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

import {
  useDispatch,
  useSelector,
} from 'react-redux';

import {
  SpotlightContainerDecorator,
} from '@enact/spotlight/SpotlightContainerDecorator';

import TPanel from '../../components/TPanel/TPanel';
import BestSeller from '../HomePanel/BestSeller/BestSeller';
import HomeBannerTemplate1 from '../HomePanel/HomeBanner/HomeBannerTemplate1';
import HomeBannerTemplate2 from '../HomePanel/HomeBanner/HomeBannerTemplate2';
import HomeBannerTemplate3 from '../HomePanel/HomeBanner/HomeBannerTemplate3';
import HomeOnSale from '../HomePanel/HomeOnSale/HomeOnSale';
import css from '../HomePanel/HomePanel.module.less';
import PopularShow from '../HomePanel/PopularShow/PopularShow';
import SubCategory from '../HomePanel/SubCategory/SubCategory';

// const SpottableComponent = Spottable("div");

const Container = SpotlightContainerDecorator(
  {
    enterTo: "default-element",
  },
  "div"
);

export default function HomePanel() {
  const dispatch = useDispatch();
  const homeLayoutInfo = useSelector((state) => state.home.layoutData);
  const homeTopDisplayInfos = useSelector(
    (state) => state.home.mainContentsData.homeTopDisplayInfos
  );
  const [select, setSelect] = useState(null);
  const [homeLayoutInfoDetail, setHomeLayoutInfoDetail] = useState([]);
  // 추후 변경
  const selectSwitch = (index) => {
    switch ("DSP00203") {
      case "DSP00201":
        return <HomeBannerTemplate1 key={index} />;
      case "DSP00202":
        return <HomeBannerTemplate2 key={index} />;
      case "DSP00203":
        return <HomeBannerTemplate3 key={index} />;
      default:
        return null;
    }
  };

  useEffect(() => {
    if (homeTopDisplayInfos) {
      setSelect(homeTopDisplayInfos[0].shptmTmplCd);
    }
    if (homeLayoutInfo) {
      setHomeLayoutInfoDetail(homeLayoutInfo.homeLayoutInfo);
    }
    selectSwitch();
  }, [homeTopDisplayInfos, homeLayoutInfo]);

  return (
    <TPanel className={css.panelDesign}>
      <Container>
        {homeLayoutInfoDetail &&
          homeLayoutInfoDetail.map((item, index) => {
            return item.shptmApphmDspyOptCd == "DSP00101" ? (
              selectSwitch(index)
            ) : item.shptmApphmDspyOptCd == "DSP00102" ? (
              <SubCategory key={index} />
            ) : item.shptmApphmDspyOptCd == "DSP00105" ? (
              <BestSeller key={index} />
            ) : item.shptmApphmDspyOptCd == "DSP00103" ? (
              <HomeOnSale key={index} />
            ) : item.shptmApphmDspyOptCd == "DSP00104" ? (
              <PopularShow key={index} />
            ) : null;
          })}
      </Container>
    </TPanel>
  );
}
