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

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 { getSubCategory } from '../../../actions/mainActions';
import TBody from '../../../components/TBody/TBody';
import TGrid from '../../../components/TGrid/TGrid';
import {
  scaleH,
  scaleW,
} from '../../../utils/helperMethods';
import CategoryNav from '../../HomePanel/SubCategory/CategoryNav/CategoryNav';
import css from '../../HomePanel/SubCategory/SubCategory.module.less';
import SubCategoryItem from './SubCategoryItem/SubCategoryItem';

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

const SubCategory = () => {
  const dispatch = useDispatch();

  const categoryInfos = useSelector(
    (state) => state.onSale.onSaleData.categoryInfos
  );
  const categoryItemInfos = useSelector(
    (state) => state.main.subCategoryData.categoryItemInfos
  );
  const [currentLgCatCd, setCurrentLgCatCd] = useState();

  const handleCategoryNav = (lgCatCd) => {
    if (currentLgCatCd === lgCatCd) {
      return;
    }

    setCurrentLgCatCd(lgCatCd);
  };

  useEffect(() => {
    if (categoryInfos && !currentLgCatCd) {
      const initialLgCatCd = categoryInfos[0].lgCatCd;
      setCurrentLgCatCd(initialLgCatCd);
    }
  }, [categoryInfos]);

  useEffect(() => {
    if (currentLgCatCd) {
      dispatch(
        getSubCategory({
          lgCatCd: currentLgCatCd,
          patnrIdList: null,
          pageSize: 10,
          tabType: "CAT00102",
          filterType: "CAT00202",
        })
      );
    }
  }, [currentLgCatCd]);
  const renderItem = useCallback(
    ({ index, ...rest }) => {
      const itemData = categoryItemInfos[index];
      if (index !== categoryItemInfos.length) {
        return (
          <SubCategoryItem
            subCategoryData={categoryItemInfos}
            currentLgCatCd={currentLgCatCd}
            itemNum={itemData}
            key={itemData.rankOrd}
            {...rest}
          />
        );
      } else {
        return (
          <SpottableComponent
            className={css.addItem}
            {...rest}
          ></SpottableComponent>
        );
      }
    },
    [categoryItemInfos]
  );

  return (
    <Container>
      <CategoryNav
        categoryInfos={categoryInfos}
        currentCategoryCode={currentLgCatCd}
        onCategoryNavClick={handleCategoryNav}
        type="home"
      />
      <div className={css.home}>
        {categoryItemInfos && categoryItemInfos.length > 0 && (
          <VirtualGridList
            dataSize={categoryItemInfos.length + 1}
            direction="horizontal"
            horizontalScrollbar="hidden"
            itemRenderer={renderItem}
            itemSize={{
              minWidth: scaleW(324),
              minHeight: scaleH(438),
            }}
            spacing={scaleW(0)}
            noScrollByWheel
            scrollMode="translate"
            className={css.grid}
          />
        )}
      </div>
    </Container>
  );
};

export default SubCategory;
