import React, {
  useCallback,
  useEffect,
  useState,
} from 'react';

import classNames from 'classnames';
import { data } from 'ilib';
import {
  useDispatch,
  useSelector,
} from 'react-redux';

import Spottable from '@enact/spotlight/Spottable';

import { getThemeCurationInfo } from '../../actions/homeActions';
import TBody from '../../components/TBody/TBody';
import TPanel from '../../components/TPanel/TPanel';
import css from './HotPicks.module.less';
import TCAD from './Type/TCAD/TCAD';
import TCFI from './Type/TCFI/TCFI';
import TCFI_2 from './Type/TCFI_2/TCFI_2';
import TCFI_3 from './Type/TCFI_3/TCFI_3';
import TCFI_4 from './Type/TCFI_4/TCFI_4';
import TCFV from './Type/TCFV/TCFV';
import TCFV_2 from './Type/TCFV_2/TCFV_2';
import TCFV_3 from './Type/TCFV_3/TCFV_3';
import TCFV_4 from './Type/TCFV_4/TCFV_4';
import TCHH from './Type/TCHH/TCHH';

const SpottableComponent = Spottable("button");

export default function HotPicksPanel() {
  const dispatch = useDispatch();
  const themeCurationInfoData = useSelector(
    (state) => state.home.themeCurationInfoData.themeInfos
  );

  const themeCurationType = themeCurationInfoData
    ? themeCurationInfoData.map((item) => item.tmpltCd)
    : [];

  const [currentPage, setCurrentPage] = useState(0);
  const currentType = themeCurationType[currentPage];
  const currentTypeData =
    themeCurationInfoData &&
    themeCurationInfoData.filter((item) => item.tmpltCd === currentType);

  const handlePrev = useCallback(() => {
    setCurrentPage((prevIndex) =>
      prevIndex === 0 ? themeCurationType.length - 1 : prevIndex - 1
    );
  }, [currentPage]);

  const handleNext = useCallback(() => {
    setCurrentPage((prevIndex) =>
      prevIndex === themeCurationType.length - 1 ? 0 : prevIndex + 1
    );
  }, [currentPage]);

  let typeComponent;
  switch (currentType) {
    case "TCFI": // Full Image
      typeComponent = (
        <TCFI data={currentTypeData} className={css.sectionWrap} />
      );
      break;
    case "TCHH": // Half Image X2
      typeComponent = (
        <TCHH data={currentTypeData} className={css.sectionWrap} />
      );
      break;
    case "TCFI_2": // Full Image + Item(2)
      typeComponent = (
        <TCFI_2 data={currentTypeData} className={css.sectionWrap} />
      );
      break;
    case "TCFI_3": // Full Image + Item(3)
      typeComponent = (
        <TCFI_3 data={currentTypeData} className={css.sectionWrap} />
      );
      break;
    case "TCFI_4": // Full Image + Item(4)
      typeComponent = (
        <TCFI_4 data={currentTypeData} className={css.sectionWrap} />
      );
      break;
    case "TCFV": // Full Image + VOD
      typeComponent = (
        <TCFV data={currentTypeData} className={css.sectionWrap} />
      );
      break;
    case "TCFV_2": // Full Image + VOD + Item(2)
      typeComponent = (
        <TCFV_2 data={currentTypeData} className={css.sectionWrap} />
      );
      break;
    case "TCFV_3": // Full Image + VOD + Item(3)
      typeComponent = (
        <TCFV_3 data={currentTypeData} className={css.sectionWrap} />
      );
      break;
    case "TCFV_4": // Full Image + VOD + Item(4)
      typeComponent = (
        <TCFV_4 data={currentTypeData} className={css.sectionWrap} />
      );
      break;
    case "TCAD": // Theme AD
      typeComponent = (
        <TCAD data={currentTypeData} className={css.sectionWrap} />
      );
      break;
    default:
      typeComponent = (
        <TCFV_2 data={currentTypeData} className={css.sectionWrap} />
      );
  }

  useEffect(() => {
    dispatch(getThemeCurationInfo());
  }, [dispatch]);

  return (
    <TPanel>
      <TBody className={css.hotPicks}>
        {currentPage > 0 && (
          <p className={classNames(css.arrow, css.arrowPrev)}>
            <SpottableComponent onClick={handlePrev}>이전</SpottableComponent>
          </p>
        )}
        {typeComponent}
        {currentPage < themeCurationType.length - 1 && (
          <p className={classNames(css.arrow, css.arrowNext)}>
            <SpottableComponent onClick={handleNext}>다음</SpottableComponent>
          </p>
        )}
      </TBody>
    </TPanel>
  );
}
