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

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

import { useDispatch } from "react-redux";

import VideoPlayer from "@enact/sandstone/VideoPlayer";
import Spottable from "@enact/spotlight/Spottable";

import { pushPanel } from "../../../actions/panelActions";
import { panel_names } from "../../../utils/Config";
import PlayerPanel from "../../PlayerPanel/PlayerPanel";
import HomeTodayDeal from "../HomeTodayDeal/HomeTodayDeal";
import ImageBanner from "./ImageBannerUnit";
import css from "./RollingUnit.module.less";

export default function RollingUnit({ bannerData, imageType, spotlightId }) {
  const rollingData = bannerData.bannerDetailInfos;
  const rollingDataLength = bannerData.bannerDetailInfos.length;

  const [count, setCount] = useState(10);
  const [startIndex, setStartIndex] = useState(0);
  const [lastIndex, setLastIndex] = useState(rollingDataLength - 1);
  const [onFocus, setOnFocus] = useState(false);

  const SpottableComponent = Spottable("div");
  const dispatch = useDispatch();

  const getIndex = useCallback(
    (index) => {
      setStartIndex(index);
    },
    [startIndex]
  );

  const getFocus = useCallback(
    (focus) => {
      setOnFocus(focus);
    },
    [onFocus]
  );

  // 비디오 클릭
  const handleClick = useCallback(() => {
    dispatch(
      pushPanel({
        name: panel_names.PlayerPanel,
      })
    );
  }, []);

  useEffect(() => {
    if (rollingDataLength === 1) {
      return;
    }

    if (onFocus === false) {
      const id = setInterval(() => {
        setCount((count) => count - 1);
      }, 1000);

      if (count === 0) {
        if (startIndex > lastIndex) {
          setStartIndex(0);
        }

        setStartIndex(startIndex + 1);
        setCount(10);
        clearInterval(id);

        if (startIndex === lastIndex) {
          setStartIndex(0);
        }
      }
      return () => clearInterval(id);
    }
  }, [count, onFocus]);

  return (
    <>
      {rollingData &&
      rollingData[startIndex].shptmBanrTpNm === "Image Banner" ? (
        <ImageBanner
          imgAlt={rollingData[startIndex].tmnlImgAlt}
          imageName={rollingData[startIndex].tmnlImgNm}
          imgPath={rollingData[startIndex].tmnlImgPath}
          patnrId={rollingData[startIndex].patnrId}
          prdtId={rollingData[startIndex].prdtId}
          productName={rollingData[startIndex].prdtNm}
          showUrl={rollingData[startIndex].showUrl}
          showNm={rollingData[startIndex].showNm}
          patncLogoPath={rollingData[startIndex].patncLogoPath}
          shptmLnkTpNm={rollingData[startIndex].shptmLnkTpNm}
          isHorizontal={imageType} // WIDTH = TRUE / FALSE
          rolling={rollingDataLength === 1 ? false : true}
          lastIndex={lastIndex}
          currentIndex={startIndex}
          getIndex={getIndex}
          getFocus={getFocus}
          spotlightId={spotlightId}
        />
      ) : rollingData[startIndex].shptmBanrTpNm === "LIVE" ||
        rollingData[startIndex].shptmBanrTpNm === "VOD" ? (
        <VideoPlayer>
          <source
            src="https://lgtv-vod-p.b-cdn.net/OEMLGTV_SCALPMEDLF1TRTPIHD_115428_800-660-8561_carbon.mp4"
            type="video/mp4"
          />
        </VideoPlayer>
      ) : rollingData[startIndex].shptmBanrTpNm === "Today's Deals" ? (
        /* <HomeTodayDeal
          imgAlt={rollingData[startIndex].tmnlImgAlt}
          imageName={rollingData[startIndex].tmnlImgNm}
          imgPath={rollingData[startIndex].tmnlImgPath}
          priceInfo={rollingData[startIndex].priceInfo}
          patnrId={rollingData[startIndex].patnrId}
          prdtId={rollingData[startIndex].prdtId}
          productName={rollingData[startIndex].prdtNm}
          soldoutFlag={rollingData[startIndex].soldoutFlag}
          isHorizontal={imageType} // WIDTH = TRUE / FALSE
          rolling={rollingDataLength === 1 ? false : true}
          lastIndex={lastIndex}
          currentIndex={startIndex}
          getIndex={getIndex}
          getFocus={getFocus}
          spotlightId={spotlightId}
        /> */
        <div className={css.videoMain} onClick={handleClick}>
          <VideoPlayer>
            <source
              src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
              type="video/mp4"
            />
          </VideoPlayer>
        </div>
      ) : null}
    </>
  );
}