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

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

import TBody from '../../components/TBody/TBody';
import TopButton from '../../components/TopButton/TopButton';
import TPanel from '../../components/TPanel/TPanel';
import useDebugKey from '../../hooks/useDebugKey';
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';

export default function HomePanel() {
  const dispatch = useDispatch();
  useDebugKey({ isLandingPage: true });
  const homeLayoutInfo = useSelector((state) => state.home.layoutData);
  const homeTopDisplayInfos = useSelector(
    (state) => state.home.mainContentsData.homeTopDisplayInfos
  );
  const [selectTemplate, setSelectTemplate] = useState(null);
  const [homeLayoutInfoDetail, setHomeLayoutInfoDetail] = useState([]);

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

  // export default memo(function TopButton({ className, targetId, ...rest }) {

  return (
    <TPanel className={css.panel}>
      <TBody className={css.tBody}>
        {selectTemplate &&
          (selectTemplate === "DSP00201" ? (
            <HomeBannerTemplate1 />
          ) : selectTemplate === "DSP00202" ? (
            <HomeBannerTemplate2 />
          ) : selectTemplate === "DSP00203" ? (
            <HomeBannerTemplate3 />
          ) : null)}
        <SubCategory />
        <HomeOnSale />
        <PopularShow />
        <BestSeller />
        <TopButton targetId={"top"} />
      </TBody>
    </TPanel>
  );
}
