import React, { useEffect, useState } from 'react';
import CSSTransition from 'react-transition-group/CSSTransition';
import shared from '../../styles/Shared.module.scss';
import styles from '../../styles/Archive.module.scss';
import PerformersData2021 from '../../data/performers/2021';
import PerformersData2022 from '../../data/performers/2022';
import PerformersData2023 from '../../data/performers/2023';
import PerformersData2024 from '../../data/performers/2024';
import PerformersData2025 from '../../data/performers/2025';
import PerformersData2026 from '../../data/performers/2026';
import Performer from '../../types/Performer';
import { BiChevronDown, BiChevronLeft } from 'react-icons/bi';

interface PerformerCard extends Performer {
  showDesc: boolean;
}

const dataByYear: Record<number, Performer[]> = {
  2026: PerformersData2026,
  2025: PerformersData2025,
  2024: PerformersData2024,
  2023: PerformersData2023,
  2022: PerformersData2022,
  2021: PerformersData2021,
};

const sortedYears = Object.keys(dataByYear).map(Number).sort((a, b) => b - a);

const Archive = () => {
  const [performersByYear, setPerformersByYear] = useState<Record<number, PerformerCard[]>>({});
  const [expandedYears, setExpandedYears] = useState<Record<number, boolean>>({});

  useEffect(() => {
    const initial: Record<number, PerformerCard[]> = {};
    const initialExpanded: Record<number, boolean> = {};
    for (const year of sortedYears) {
      initial[year] = dataByYear[year].map((p) => ({ ...p, showDesc: false }));
      initialExpanded[year] = false;
    }
    setPerformersByYear(initial);
    setExpandedYears(initialExpanded);
  }, []);

  const toggleYear = (year: number) => {
    setExpandedYears((prev) => ({
      ...prev,
      [year]: !prev[year],
    }));
  };

  const togglePerformerDesc = (year: number, id: string) => {
    setPerformersByYear((prev) => ({
      ...prev,
      [year]: prev[year].map((p) =>
        p.id === id ? { ...p, showDesc: !p.showDesc } : p
      ),
    }));
  };

  return (
    <section className={shared.page + ' ' + styles.archivePage}>
      <h1>Arkisto</h1>
      {sortedYears.map((year) => (
        <React.Fragment key={year}>
          <div
            className={styles.yearTitle}
            onClick={() => toggleYear(year)}
          >
            <h2 className={styles.year}>{year}</h2>
            <button className={shared.openingChevron}>
              {expandedYears[year] ? (
                <BiChevronDown size='3rem' />
              ) : (
                <BiChevronLeft size='3rem' />
              )}
            </button>
          </div>
          <div className={styles.yearPerformers}>
            <CSSTransition
              in={expandedYears[year]}
              timeout={300}
              classNames='fadeTransition'
              unmountOnExit
            >
              <div className={styles.yearPerformersContent}>
                {(performersByYear[year] ?? []).map((p) => (
                  <div className={styles.performerContainer} key={p.id}>
                    <img
                      className={styles.performerImage}
                      src={'/performers/' + year + '/' + p.id + '.jpg'}
                      width={100}
                      height={100}
                      loading="lazy"
                      alt={p.name}
                    />
                    <div className={styles.performerTextContainer}>
                      <div
                        className={styles.performerTitle}
                        onClick={() => togglePerformerDesc(year, p.id)}
                      >
                        <h2>{p.name}</h2>
                        <button className={shared.openingChevron}>
                          {p.showDesc ? (
                            <BiChevronDown size='3rem' />
                          ) : (
                            <BiChevronLeft size='3rem' />
                          )}
                        </button>
                      </div>
                      <CSSTransition
                        in={p.showDesc}
                        timeout={300}
                        classNames='fadeTransition'
                        unmountOnExit
                      >
                        <div>
                          {p.paragraphs.map((parag, index) => (
                            <p key={index}>{parag.toString()}</p>
                          ))}
                        </div>
                      </CSSTransition>
                      <hr />
                    </div>
                  </div>
                ))}
              </div>
            </CSSTransition>
          </div>
        </React.Fragment>
      ))}
    </section>
  );
};

export default Archive;
