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

import VideoPlay from '@enact/sandstone/VideoPlayer';

import image1 from '../../../../assets/Image/img-home-banner-h-01.png';
import image2 from '../../../../assets/Image/img-home-banner-h-01.png';
import image3 from '../../../../assets/Image/img-home-banner-v-01.png';
import image4 from '../../../../assets/Image/img-home-banner-v-02.png';
import CustomImage from '../../../components/CustomImage/CustomImage';
import HomeTodayDeal from '../HomeTodayDeal/HomeTodayDeal';

// 더미 데이터
const imgArr = [
  { img: image1, key: 1 },
  { img: image2, key: 2 },
  { img: image3, key: 3 },
  { img: image4, key: 4 },
];

export default function RollingUnit({ bannerData, index, imageType, onFocus }) {
  const bannerDetailInfos = bannerData.bannerDetailInfos;
  const bannerDetailInfosLength = bannerData.bannerDetailInfos.length;

  const [rollingData, setRollingData] = useState([]);
  const [shptmBanrTpNm, setShptmBanrTpNm] = useState();
  const [count, setCount] = useState(10);
  const [detailLenghth, setDetailLength] = useState();
  const [startIndex, setStartIndex] = useState(0);
  const [lastIndex, setLastIndex] = useState();

  useEffect(() => {
    if (bannerData) {
      setRollingData(bannerDetailInfos);
      setDetailLength(bannerDetailInfosLength);
      setShptmBanrTpNm(bannerDetailInfos[startIndex].shptmBanrTpNm);
      setLastIndex(bannerDetailInfosLength - 1);
    }
  }, [bannerData, shptmBanrTpNm]);

  // 더미 데이터 테스트용
  useEffect(() => {
    // 포커스가 없을 경우에만 롤링
    if (bannerDetailInfosLength === 1) {
      return;
    }

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

      if (count === 0) {
        setStartIndex(startIndex + 1);
        setCount(10);
        clearInterval(id);
        if (startIndex === lastIndex) {
          setStartIndex(0);
        }
      }
      return () => clearInterval(id);
    }
  }, [count, onFocus]);
  return (
    <>
      {bannerDetailInfos &&
      bannerDetailInfos[startIndex].shptmBanrTpNm === "Image Banner" ? (
        <CustomImage></CustomImage>
      ) : bannerDetailInfos[startIndex].shptmBanrTpNm === "LIVE" ||
        bannerDetailInfos[startIndex].shptmBanrTpNm === "VOD" ? (
        <VideoPlay></VideoPlay>
      ) : bannerDetailInfos[startIndex].shptmBanrTpNm === "Today's Deals" ? (
        <HomeTodayDeal
          imgAlt={bannerDetailInfos[startIndex].imgAlt}
          imageName={bannerDetailInfos[startIndex].tmnlImgNm}
          imgPath={bannerDetailInfos[startIndex].tmnlImgPath}
          priceInfo={bannerDetailInfos[startIndex].priceInfo}
          productId={bannerDetailInfos[startIndex].prdtId}
          productName={bannerDetailInfos[startIndex].prdtNm}
          soldoutFlag={bannerDetailInfos[startIndex].soldoutFlag}
          isHorizontal={imageType} // TRUE, FALSE
          rolling={bannerDetailInfosLength === 1 ? false : true}
        />
      ) : null}
    </>
  );
}
