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

import classNames from "classnames";
import { useDispatch, useSelector } from "react-redux";

import { VirtualGridList } from "@enact/sandstone/VirtualList";
import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
import ri from "@enact/ui/resolution";

import TGrid from "../../../components/TGrid/TGrid";
import { $L } from "../../../utils/helperMethods";
import css from "../PopularShow/PopularShow.module.less";
import PopularShowItem from "./PopularShowItem/PopularShowItem";

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

const PopularShow = ({ ...rest }) => {
  const dispatch = useDispatch();
  const topInfos = useSelector((state) => state.main.top20ShowData.topInfos);

  const renderItem = useCallback(
    ({ index, ...rest }) => {
      const itemData = topInfos[index];
      return (
        <PopularShowItem topInfosData={topInfos} itemNum={itemData} {...rest} />
      );
    },
    [topInfos]
  );

  return (
    <Container className={css.popularShow}>
      <h2 className={css.subTitle}>{$L("POPULAR SHOW")}</h2>

      <TGrid type="showList">
        {topInfos && topInfos.length > 0 && (
          <VirtualGridList
            dataSize={topInfos.length}
            direction="horizontal"
            horizontalScrollbar="hidden"
            itemRenderer={renderItem}
            itemSize={{
              minWidth: ri.scale(546 * 2),
              minHeight: ri.scale(438 * 2),
            }}
            noScrollByWheel
            scrollMode="translate"
            spacing={ri.scale(18 * 2)}
          />
        )}
      </TGrid>
    </Container>
  );
};

export default PopularShow;
