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

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

import Spotlight from "@enact/spotlight";
import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
import Spottable from "@enact/spotlight/Spottable";

import { getHomeMainContents } from "../../../actions/homeActions";
import CustomImage from "../../../components/CustomImage/CustomImage";
import useScrollReset from "../../../hooks/useScrollReset";
import css from "./HomeBannerTemplate1.module.less";
import Random from "./RandomUnit";
import Rolling from "./RollingUnit";

const SpottableComponent = Spottable("div");
const Container = SpotlightContainerDecorator(
  { enterTo: "last-focused" },
  "div"
);
const ContainerBasic = SpotlightContainerDecorator(
  { enterTo: "last-focused" },
  "div"
);

export default function HomeBannerTemplate1({ scrollTop }) {
  const dispatch = useDispatch();
  const [bannerInfos, setBannerInfos] = useState([]);
  const { handleScrollReset, handleStopScrolling } = useScrollReset(scrollTop);
  const [banner01DataType, setBanner01DataType] = useState();
  const [banner02DataType, setBanner02DataType] = useState();
  const [banner03DataType, setBanner03DataType] = useState();
  const [banner04DataType, setBanner04DataType] = useState();
  const [banner01Data, setBanner01Data] = useState();
  const [banner02Data, setBanner02Data] = useState();
  const [banner03Data, setBanner03Data] = useState();
  const [banner04Data, setBanner04Data] = useState();

  const banner01ScrollTop = scrollTop;
  const banner02ScrollTop = scrollTop;
  const banner03ScrollTop = scrollTop;
  const banner04ScrollTop = scrollTop;

  const homeMainContentsBannerInfos = useSelector(
    (state) => state.home.mainContentsData.homeMainContentsBannerInfos
  );
  const homeTopDisplayInfos = useSelector(
    (state) => state.home.mainContentsData.homeTopDisplayInfos
  );

  const vctpImage1 = useSelector(
    (state) => state.home.mainContentsData.homeTopDisplayInfos[0].vtctpImgPath1
  );
  const vctpImage2 = useSelector(
    (state) => state.home.mainContentsData.homeTopDisplayInfos[0].vtctpImgPath2
  );
  const wdthImage1 = useSelector(
    (state) => state.home.mainContentsData.homeTopDisplayInfos[0].wdthtpImgPath1
  );
  const wdthImage2 = useSelector(
    (state) => state.home.mainContentsData.homeTopDisplayInfos[0].wdthtpImgPath2
  );

  // const startFocus = () => {
  //   if (Spotlight.focus("banner01Prev")) {
  //     Spotlight.focus("banner01Prev");
  //   } else {
  //     Spotlight.focus("banner01");
  //   }
  // };

  useEffect(() => {
    if (!homeTopDisplayInfos || !homeMainContentsBannerInfos) {
      dispatch(getHomeMainContents);
    }
  }, [homeTopDisplayInfos, homeMainContentsBannerInfos, dispatch]);

  useEffect(() => {
    if (homeMainContentsBannerInfos) {
      const banerInfo = homeMainContentsBannerInfos[0].bannerInfos;

      setBannerInfos(banerInfo[0]);

      setBanner01DataType(banerInfo[0].shptmDspyTpNm);
      setBanner01Data(banerInfo[0]);

      setBanner02DataType(banerInfo[1].shptmDspyTpNm);
      setBanner02Data(banerInfo[1]);

      setBanner03DataType(banerInfo[2].shptmDspyTpNm);
      setBanner03Data(banerInfo[2]);

      setBanner04DataType(banerInfo[3].shptmDspyTpNm);
      setBanner04Data(banerInfo[3]);

      dispatch(getHomeMainContents);
      scrollTop({ animate: false });
      // startFocus();
      // console.log(homeMainContentsBannerInfos, "메인 컨텐츠");
      // console.log(homeTopDisplayInfos, "탑디스");
    }
  }, [homeMainContentsBannerInfos, bannerInfos, dispatch, scrollTop]);

  return (
    <Container className={css.container} spotlightId={"top"}>
      <div className={css.homeTemplateBox}>
        <div className={css.mainBox}>
          <ContainerBasic className={css.dualBox}>
            {/* 배너1 */}
            <div className={css.smallBox}>
              {banner01DataType === "Rolling" ? (
                <Rolling
                  bannerData={banner01Data}
                  imageType={true}
                  spotlightId={"banner01"}
                  scrollTop={banner01ScrollTop}
                />
              ) : banner01DataType === "Random" ? (
                <Random
                  bannerData={banner01Data}
                  imageType={true}
                  spotlightId={"banner01"}
                  scrollTop={banner01ScrollTop}
                />
              ) : (
                <SpottableComponent
                  spotlightId={"banner01"}
                  onFocus={handleScrollReset}
                  onBlur={handleStopScrolling}
                >
                  <CustomImage delay={0} src={wdthImage1} />
                </SpottableComponent>
              )}
            </div>

            {/* 배너2 */}
            <div className={css.smallBox}>
              {banner02DataType === "Rolling" ? (
                <Rolling
                  bannerData={banner02Data}
                  imageType={true}
                  spotlightId={"banner02"}
                  scrollTop={banner02ScrollTop}
                />
              ) : banner02DataType === "Random" ? (
                <Random
                  bannerData={banner02Data}
                  imageType={true}
                  spotlightId={"banner02"}
                  scrollTop={banner02ScrollTop}
                />
              ) : (
                <SpottableComponent
                  spotlightId={"banner02"}
                  onFocus={handleScrollReset}
                  onBlur={handleStopScrolling}
                >
                  <CustomImage delay={0} src={wdthImage2} />
                </SpottableComponent>
              )}
            </div>
          </ContainerBasic>

          {/* 배너3 */}
          <div className={css.imgBox}>
            {banner03DataType === "Rolling" ? (
              <Rolling
                bannerData={banner03Data}
                imageType={false}
                spotlightId={"banner03"}
                scrollTop={banner03ScrollTop}
              />
            ) : banner03DataType === "Random" ? (
              <Random
                bannerData={banner03Data}
                imageType={false}
                spotlightId={"banner03"}
                scrollTop={banner03ScrollTop}
              />
            ) : (
              <SpottableComponent
                spotlightId={"banner03"}
                onFocus={handleScrollReset}
                onBlur={handleStopScrolling}
              >
                <CustomImage delay={0} src={vctpImage1} />
              </SpottableComponent>
            )}
          </div>

          {/* 베너 데이터 확인 필요 : 티비 데이터 2개 03.07 */}
          {/* 배너4 */}
          <div className={css.imgBox}>
            {banner04DataType === "Rolling" ? (
              /* <Rolling
                bannerData={banner04Data}
                imageType={false}
                spotlightId={"banner04"}
                scrollTop={banner04ScrollTop}
              /> */
              <SpottableComponent
                spotlightId={"banner04"}
                onFocus={handleScrollReset}
                onBlur={handleStopScrolling}
              >
                <CustomImage delay={0} src={vctpImage2} />
              </SpottableComponent>
            ) : banner04DataType === "Random" ? (
              <Random
                bannerData={banner04Data}
                imageType={false}
                spotlightId={"banner04"}
                scrollTop={banner04ScrollTop}
              />
            ) : (
              <SpottableComponent
                spotlightId={"banner04"}
                onFocus={handleScrollReset}
                onBlur={handleStopScrolling}
              >
                <CustomImage delay={0} src={vctpImage2} />
              </SpottableComponent>
            )}
          </div>
        </div>
      </div>
    </Container>
  );
}