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

import classNames from 'classnames';
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 css from './HomeBannerTemplate3.module.less';
import Random from './RandomUnit';
import Rolling from './RollingUnit';

const SpottableComponent = Spottable("div");

const Container = SpotlightContainerDecorator(
  { leaveFor: { left: "", right: "" }, enterTo: "last-focused" },
  "div"
);

export default function HomeBannerTemplate3() {
  const dispatch = useDispatch();
  const [bannerInfos, setBannerInfos] = useState([]);
  const [onFocus, setOnFocus] = useState(true);
  const [vctpImage1, setVctpImage1] = useState();
  const [vctpImage2, setVctpImage2] = useState();
  const [wdthImage1, setwdthImage1] = useState();
  const [wdthImage2, setwdthImage2] = useState();

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

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

  useEffect(() => {
    Spotlight.focus("banner01");
  }, []);

  useEffect(() => {
    if (homeTopDisplayInfos) {
      setVctpImage1(homeTopDisplayInfos[0].vtctpImgPath1);
      setVctpImage2(homeTopDisplayInfos[0].vtctpImgPath2);
      setwdthImage1(homeTopDisplayInfos[0].wdthtpImgPath1);
      setwdthImage2(homeTopDisplayInfos[0].wdthtpImgPath2);

      dispatch(getHomeMainContents);
    }
  }, [homeTopDisplayInfos, dispatch]);

  useEffect(() => {
    if (homeMainContentsBannerInfos) {
      const banerInfo = homeMainContentsBannerInfos[0].bannerInfos;
      setBannerInfos(banerInfo);
      dispatch(getHomeMainContents);
      console.log(homeMainContentsBannerInfos, "메인 컨텐츠 - 템플릿3");
      console.log(homeTopDisplayInfos, "탑디스");
    }
  }, [homeMainContentsBannerInfos, dispatch]);

  const onClickBanner = useCallback(() => {
    console.log("클릭");
  }, []);

  // 포커스가 들어오면 롤링 중지
  const _onFocus = useCallback(() => {
    setOnFocus(true);
  }, [onFocus]);

  const _onBlur = useCallback(() => {
    setOnFocus(false);
  }, [onFocus]);

  return (
    <Container className={css.homeTemplateBox} spotlightId="top">
      <div className={css.mainBox}>
        {/* 배너1 */}
        <SpottableComponent className={css.imgBox} spotlightId="banner01">
          {bannerInfos &&
            bannerInfos.map((item, index) => {
              return item.banrLctnNo === "1" &&
                item.shptmDspyTpNm == "Rolling" ? (
                <Rolling
                  bannerData={item}
                  index={index}
                  key={index}
                  imageType={false}
                />
              ) : item.banrLctnNo === "1" && item.shptmDspyTpNm == "Random" ? (
                <Random
                  bannerData={item}
                  index={index}
                  key={index}
                  imageType={false}
                />
              ) : (
                <CustomImage
                  key={index}
                  onClick={onClickBanner}
                  delay={0}
                  src={vctpImage1}
                />
              );
            })}
        </SpottableComponent>

        {/* 배너2 */}
        <SpottableComponent
          className={css.imgBox}
          spotlightId="banner02"
          onFocus={_onFocus}
          onBlur={_onBlur}
        >
          {bannerInfos &&
            bannerInfos.map((item, index) => {
              return item.banrLctnNo === "2" &&
                item.shptmDspyTpNm == "Rolling" ? (
                <Rolling
                  bannerData={item}
                  index={index}
                  key={index}
                  imageType={false}
                  onFocus={onFocus}
                />
              ) : item.banrLctnNo === "2" && item.shptmDspyTpNm == "Random" ? (
                <Random
                  bannerData={item}
                  index={index}
                  key={index}
                  imageType={false}
                />
              ) : (
                <CustomImage
                  key={index}
                  onClickBanner={onClickBanner}
                  delay={0}
                  src={vctpImage2}
                />
              );
            })}
        </SpottableComponent>

        <div className={css.dualBox}>
          {/* 배너3 */}
          <SpottableComponent
            className={classNames(css.videoBox, css.topBox)}
            spotlightId="banner03"
          >
            {bannerInfos &&
              bannerInfos.map((item, index) => {
                return item.banrLctnNo === "3" &&
                  item.shptmDspyTpNm == "Rolling" ? (
                  <Rolling
                    bannerData={item}
                    index={index}
                    key={index}
                    imageType={true}
                  />
                ) : item.banrLctnNo === "3" &&
                  item.shptmDspyTpNm == "Random" ? (
                  <Random
                    bannerData={item}
                    index={index}
                    key={index}
                    imageType={true}
                  />
                ) : (
                  <CustomImage
                    key={index}
                    onClickBanner={onClickBanner}
                    delay={0}
                    src={wdthImage1}
                  />
                );
              })}
          </SpottableComponent>

          {/* 배너4 */}
          <SpottableComponent
            className={classNames(css.videoBox, css.underBox)}
            spotlightId="banner04"
          >
            {bannerInfos &&
              bannerInfos.map((item, index) => {
                return item.banrLctnNo === "4" &&
                  item.shptmDspyTpNm == "Rolling" ? (
                  <Rolling
                    bannerData={item}
                    index={index}
                    key={index}
                    imageType={true}
                  />
                ) : item.banrLctnNo === "4" &&
                  item.shptmDspyTpNm == "Random" ? (
                  <Random
                    bannerData={item}
                    index={index}
                    key={index}
                    imageType={true}
                  />
                ) : (
                  <CustomImage
                    key={index}
                    onClickBanner={onClickBanner}
                    delay={0}
                    src={wdthImage2}
                  />
                );
              })}
          </SpottableComponent>
        </div>
      </div>
    </Container>
  );
}
