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 Spottable from '@enact/spotlight/Spottable';

import SectionTitle from '../../../components/SectionTitle/SectionTitle';
import {
  $L,
  scaleH,
  scaleW,
} from '../../../utils/helperMethods';
import css from '../PopularShow/PopularShow.module.less';
import PopularShowItem from './PopularShowItem/PopularShowItem';

const SpottableComponent = Spottable("div");
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];
      if (index !== topInfos.length) {
        return (
          <PopularShowItem
            topInfosData={topInfos}
            itemNum={itemData}
            {...rest}
          />
        );
      } else {
        return (
          <SpottableComponent
            className={css.addItem}
            {...rest}
          ></SpottableComponent>
        );
      }
    },
    [topInfos]
  );

  return (
    <Container className={css.popularShow}>
      <SectionTitle className={css.subTitle} title={$L(`POPULAR SHOW`)} />
      <div className={css.showList}>
        {topInfos && topInfos.length > 0 && (
          <VirtualGridList
            dataSize={topInfos.length + 1}
            direction="horizontal"
            horizontalScrollbar="hidden"
            itemRenderer={renderItem}
            itemSize={{
              minWidth: scaleW(546),
              minHeight: scaleH(438),
            }}
            noScrollByWheel
            scrollMode="translate"
            spacing={scaleW(18)}
            className={css.grid}
          />
        )}
      </div>
    </Container>
  );
};

export default PopularShow;
