shoptime/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate2.jsx

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 './HomeBannerTemplate2.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 HomeBannerTemplate2() {
  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(() => {
    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, "메인 컨텐츠 - 템플릿2");
      console.log(homeTopDisplayInfos, "탑디스");
    }
  }, [homeMainContentsBannerInfos, dispatch]);

  const onClickBanner = useCallback(() => {}, []);
  return (
    <Container className={css.container}>
      <div className={css.homeTemplateBox}>
        <div className={css.mainBox}>
          {/* 배너1 */}
          <SpottableComponent className={classNames(css.longBanner, css.mr18)}>
            {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>

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

              {/* 배너3 */}
              <SpottableComponent className={css.smallBox}>
                {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={wdthImage2}
                      />
                    );
                  })}
              </SpottableComponent>
            </div>
          </div>

          {/* 배너4 */}
          <SpottableComponent className={css.longBanner}>
            {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={vctpImage2}
                  />
                );
              })}
          </SpottableComponent>
        </div>
      </div>
    </Container>
  );
}