import React, { useCallback } from "react";

import { useSelector } from "react-redux";

import { VirtualGridList } from "@enact/sandstone/VirtualList";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import Spottable from "@enact/spotlight/Spottable";

import { scaleH, scaleW } from "../../../../../utils/helperMethods";
import css from "./ShowLists.module.less";
import ShowListsItem from "./ShowListsItem";

const LIST_ITEM_CONF = {
  ITEM_WIDTH: 546,
  ITEM_HEIGHT: 438,
  SPACING: 18,
};

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

export default function ShowLists() {
  const showListDatas = useSelector(
    (state) => state.main.subCategoryData?.categoryShowInfos
  );

  const renderItem = useCallback(
    ({ index, ...rest }) => {
      const ItemInfo = showListDatas[index];
      const {
        catNm,
        dfltThumbnailImgPath,
        hstNm,
        lgCatCd,
        pathnLogoPath,
        patnrId,
        showId,
        showNm,
        thumbnailUrl,
        total,
        vtctpYn,
      } = ItemInfo;

      return (
        <ShowListsItem
          key={showId}
          thumbnail={thumbnailUrl}
          title={showNm}
          {...rest}
        />
      );
    },
    [showListDatas]
  );

  console.log("showListDatas", showListDatas);

  return (
    <Container className={css.container}>
      {showListDatas && showListDatas.length > 0 && (
        <VirtualGridList
          className={css.grid}
          dataSize={showListDatas.length}
          direction="vertical"
          verticalScrollbar="hidden"
          itemRenderer={renderItem}
          itemSize={{
            minWidth: scaleW(LIST_ITEM_CONF.ITEM_WIDTH),
            minHeight: scaleH(LIST_ITEM_CONF.ITEM_HEIGHT),
          }}
          noScrollByWheel
          scrollMode="translate"
          spacing={scaleW(LIST_ITEM_CONF.SPACING)}
        />
      )}
    </Container>
  );
}
