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

import VideoPlay from '@enact/sandstone/VideoPlayer';
import { VirtualGridList } from '@enact/sandstone/VirtualList';
import ri from '@enact/ui/resolution';

import CustomImage from '../../../components/CustomImage/CustomImage';
import HomeTodayDeal from '../HomeTodayDeal/HomeTodayDeal';
import css from './Template.module.less';

const LIST_ITEM_CONF = {
  ITEM_WIDTH: 561 * 2,
  ITEM_HEIGHT: 150 * 2,
  SPACING: 30 * 2,
};

export default function RollingUnit({ bannerData, imageType }) {
  useEffect(() => {
    console.log("롤링");
  }, []);

  const renderItem = useCallback(
    ({ index, ...rest }) => {
      //   const itemData = itemDatas[index];
      const shptmBanrTpNm = bannerData.bannerDetailInfos[index].shptmBanrTpNm;

      if (shptmBanrTpNm === "Image Banner") {
        return <CustomImage></CustomImage>;
      }
      if (shptmBanrTpNm === "LIVE" || shptmBanrTpNm === "VOD") {
        return <VideoPlay></VideoPlay>;
      }
      if (shptmBanrTpNm === "Today's Deals") {
        return (
          <HomeTodayDeal
            imgAlt={bannerData.bannerDetailInfos[index].imgAlt}
            imageName={bannerData.bannerDetailInfos[index].tmnlImgNm}
            imgPath={bannerData.bannerDetailInfos[index].tmnlImgPath}
            priceInfo={bannerData.bannerDetailInfos[index].priceInfo}
            productId={bannerData.bannerDetailInfos[index].prdtId}
            productName={bannerData.bannerDetailInfos[index].prdtNm}
            soldoutFlag={bannerData.bannerDetailInfos[index].soldoutFlag}
            isHorizontal={imageType} // TRUE, FALSE
          />
        );
      }
    },
    [bannerData]
  );

  return (
    <>
      {bannerData && (
        <VirtualGridList
          className={""}
          dataSize={bannerData.bannerDetailInfos.length}
          direction="horizontal"
          itemRenderer={renderItem}
          itemSize={{
            minWidth: ri.scale(LIST_ITEM_CONF.ITEM_WIDTH),
            minHeight: ri.scale(LIST_ITEM_CONF.ITEM_HEIGHT),
          }}
          spacing={ri.scale(LIST_ITEM_CONF.SPACING)}
          scrollMode="translate"
          horizontalScrollbar="hidden"
          noScrollByWheel
        />
      )}
    </>
  );
}
