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

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

import Marquee from '@enact/sandstone/Marquee';
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 Random from './RandomUnit';
import Rolling from './RollingUnit';
import css from './Template.module.less';

const SpottableComponent = Spottable("div");

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

export default function HomeBannerTemplate3() {
  const dispatch = useDispatch();
  const [bannerImageLoaded, setBannerImageLoaded] = useState(false);
  const [bannerInfos, setBannerInfos] = useState([]);
  const [vctpImage1, setVctpImage1] = useState(null);
  const [vctpImage2, setVctpImage2] = useState(null);
  const [wdthImage1, setWdthImage1] = useState(null);
  const [wdthImage2, setWdthImage2] = useState(null);

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

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

  useEffect(() => {
    if (homeTopDisplayInfos) {
      const vctpImage1 = homeTopDisplayInfos[0].vtctpImgPath1;
      const vctpImage2 = homeTopDisplayInfos[0].vtctpImgPath2;
      const wdthImage1 = homeTopDisplayInfos[0].wdthtpImgPath1;
      const wdthImage2 = homeTopDisplayInfos[0].wdthtpImgPath2;
      setVctpImage1(vctpImage1);
      setVctpImage2(vctpImage2);
      setWdthImage1(wdthImage1);
      setWdthImage2(wdthImage2);
    }
  }, [homeTopDisplayInfos]);

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

  useEffect(() => {
    console.log(homeMainContentsBannerInfos, "메인 컨텐츠");
    console.log(homeTopDisplayInfos, "탑디스");
    dispatch(getHomeMainContents);
  }, [dispatch]);

  const onClickBanner = useCallback(() => {}, []);

  return (
    <Container className={css.homeTemplateBox}>
      <div className={css.mainBox}>
        {/* 배너1 */}
        <SpottableComponent className={css.imgBox}>
          {bannerInfos &&
            bannerInfos.map((item, index) => {
              return item.banrLctnNo === "1" &&
                item.shptmDspyTpNm == "Rolling" ? (
                <Rolling bannerData={item} key={index} />
              ) : item.banrLctnNo === "1" && item.shptmDspyTpNm == "Random" ? (
                <Random bannerData={item} key={index} />
              ) : (
                <CustomImage
                  key={index}
                  className={""}
                  onClickBanner={onClickBanner}
                  src={
                    vctpImage1 === "" || vctpImage1 === null
                      ? vctpImage2
                      : vctpImage1
                  }
                  delay={0}
                />
              );
            })}
        </SpottableComponent>
        {/* 배너2 */}
        <SpottableComponent className={css.imgBox}>
          {bannerInfos &&
            bannerInfos.map((item, index) => {
              return item.banrLctnNo === "2" &&
                item.shptmDspyTpNm == "Rolling" ? (
                <Rolling bannerData={item} key={index} />
              ) : item.banrLctnNo === "2" && item.shptmDspyTpNm == "Random" ? (
                <Random bannerData={item} key={index} />
              ) : (
                <CustomImage
                  key={index}
                  className={""}
                  onClickBanner={onClickBanner}
                  src={
                    vctpImage1 === "" || vctpImage1 === null
                      ? vctpImage2
                      : vctpImage1
                  }
                  delay={0}
                />
              );
            })}
        </SpottableComponent>
        {/* 배너3 */}
        <div className={css.dualBox}>
          <SpottableComponent className={classNames(css.videoBox, css.topBox)}>
            {bannerInfos &&
              bannerInfos.map((item, index) => {
                return item.banrLctnNo === "3" &&
                  item.shptmDspyTpNm == "Rolling" ? (
                  <Rolling bannerData={item} key={index} />
                ) : item.banrLctnNo === "3" &&
                  item.shptmDspyTpNm == "Random" ? (
                  <Random bannerData={item} key={index} />
                ) : (
                  <CustomImage
                    key={index}
                    className={""}
                    onClickBanner={onClickBanner}
                    src={
                      wdthImage1 === "" || wdthImage1 === null
                        ? wdthImage2
                        : wdthImage1
                    }
                    delay={0}
                  />
                );
              })}
          </SpottableComponent>
          {/* 배너4 */}
          <SpottableComponent
            className={classNames(css.videoBox, css.underBox)}
          >
            {bannerInfos &&
              bannerInfos.map((item, index) => {
                return item.banrLctnNo === "4" &&
                  item.shptmDspyTpNm == "Rolling" ? (
                  <Rolling bannerData={item} key={index} />
                ) : item.banrLctnNo === "4" &&
                  item.shptmDspyTpNm == "Random" ? (
                  <Random bannerData={item} key={index} />
                ) : (
                  <CustomImage
                    key={index}
                    className={""}
                    onClickBanner={onClickBanner}
                    src={
                      wdthImage1 === "" || wdthImage1 === null
                        ? wdthImage2
                        : wdthImage1
                    }
                    delay={0}
                  />
                );
              })}
          </SpottableComponent>
        </div>
      </div>
    </Container>
  );
}
