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 ri from "@enact/ui/resolution";

import { getSubCategory } from "../../../actions/mainActions";
import { getOnSaleInfo } from "../../../actions/onSaleActions";
import TGrid from "../../../components/TGrid/TGrid";
import TItemCard from "../../../components/TItemCard/TItemCard";
import css from "../../HomePanel/SubCategory/SubCategory.module.less";
import CategoryNav from "../../OnSalePanel/CategoryNav/CategoryNav";
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: null,
          tabType: "CAT00102",
          filterType: "CAT00202",
        })
      );
    }
  }, [currentLgCatCd]);
  const renderItem = useCallback(
    ({ index, ...rest }) => {
      const itemData = categoryItemInfos[index];

      return (
        <SubCategoryItem
          subCategoryData={categoryItemInfos}
          currentLgCatCd={currentLgCatCd}
          itemNum={itemData}
          key={itemData.rankOrd}
          {...rest}
        />
      );
    },
    [categoryItemInfos]
  );
  return (
    <SpottableComponent>
      <CategoryNav
        categoryInfos={categoryInfos}
        currentCategoryCode={currentLgCatCd}
        onCategoryNavClick={handleCategoryNav}
        type="home"
      />
      <TGrid type="home">
        {categoryItemInfos && categoryItemInfos.length > 0 && (
          <VirtualGridList
            className={css.virtualGridList}
            dataSize={categoryItemInfos.length}
            direction="horizontal"
            horizontalScrollbar="hidden"
            itemRenderer={renderItem}
            itemSize={{
              minWidth: ri.scale(324 * 2),
              minHeight: ri.scale(438 * 2),
            }}
            noScrollByWheel
            scrollMode="translate"
          />
        )}
      </TGrid>
    </SpottableComponent>
  );
};

export default SubCategory;
