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

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

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

import SectionTitle from "../../../components/SectionTitle/SectionTitle";
import TGrid from "../../../components/TGrid/TGrid";
import { $L } from "../../../utils/helperMethods";
import css from "./BestSeller.module.less";
import BestSellerItem from "./BestSellerItem/BestSellerItem";

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

const BestSeller = () => {
  const bestSellerDatas = useSelector(
    (state) => state.product.bestSellerData.bestSeller
  );
  const renderItem = useCallback(
    ({ index, ...rest }) => {
      const itemData = bestSellerDatas[index];
      return (
        <BestSellerItem
          bestSellerData={bestSellerDatas}
          itemData={itemData}
          isBestSeller
          {...rest}
        />
      );
    },
    [bestSellerDatas]
  );

  return (
    <Container className={css.bestSellerWrap}>
      <SectionTitle title={$L(`BEST SELLER`)} />

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

export default BestSeller;
