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

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

import Spotlight from "@enact/spotlight";

import { getSubCategory } from "../../actions/mainActions";
import SectionTitle from "../../components/SectionTitle/SectionTitle";
import TBody from "../../components/TBody/TBody";
import TButtonTab, { LIST_TYPE } from "../../components/TButtonTab/TButtonTab";
import TDropDown from "../../components/TDropDown/TDropDown";
import THeader from "../../components/THeader/THeader";
import TPanel from "../../components/TPanel/TPanel";
import { $L } from "../../utils/helperMethods";
import ItemContents from "./CategoryContents/ItemContents/ItemContents";
import ShowContents from "./CategoryContents/ShowContents/ShowContents";
import css from "./CategoryPanel.module.less";

const getButtonTabList = () => {
  return [$L("SHOW"), $L("ITEM")];
};

let buttonTabList = null;

export default function CategoryPanel() {
  if (!buttonTabList) {
    buttonTabList = getButtonTabList();
  }

  const dispatch = useDispatch();

  const categoryDatas = useSelector((state) => state.main.subCategoryData);
  const panelInfos = useSelector((state) => state.panels.panels?.[0]);

  const { lgCatCd, lgCatNm, COUNT } = panelInfos.panelInfo || {};
  const {
    bannerInfos,
    categoryDescInfos,
    categoryFilterCd,
    categoryItemInfos,
    categoryShowInfos,
    categoryTabTypeCd,
    partnerInfos,
    topShowInfo,
  } = categoryDatas || {};

  const [tab, setTab] = useState(0);
  const [dropDownTab, setDropDownTab] = useState(0);
  const [filterMethods, setFilterMethods] = useState([]);

  useEffect(() => {
    setTab(0);
    setDropDownTab(0);

    if (panelInfos?.panelInfo) {
      dispatch(getSubCategory({ lgCatCd, filterType: "CAT00202" }));
    }
  }, [panelInfos, lgCatCd, dispatch]);

  useEffect(() => {
    if (categoryDatas) {
      const detailCdNmValues = categoryFilterCd
        .map((item) => item.detailCdNm)
        .reverse();

      setFilterMethods(detailCdNmValues);
    }
  }, [categoryDatas, tab]);

  useEffect(() => {
    const tabType = tab === 0 ? "CAT00101" : "CAT00102";

    dispatch(getSubCategory({ lgCatCd, tabType }));
  }, [tab, dispatch]);

  const handleItemClick = useCallback(
    ({ index }) => {
      if (index === tab) return;

      setTab(index);
    },
    [tab]
  );

  const handleSelectFilter = useCallback(({ selected }) => {
    setDropDownTab(selected);
  }, []);

  useEffect(() => {
    const filterType = dropDownTab === 0 ? "CAT00202" : "CAT00201";

    dispatch(getSubCategory({ lgCatCd, filterType }));
  }, [dropDownTab, dispatch]);

  console.log(
    "panelInfos",
    panelInfos.panelInfo,
    "categoryDatas",
    categoryDatas
  );

  useEffect(() => {
    Spotlight.focus(`tab-${tab}`);
  }, []);

  return (
    <TPanel>
      <THeader title="Category" />
      <TBody className={css.tBody}>
        <div className={css.paddingContainer}>
          {panelInfos && panelInfos.panelInfo && categoryDatas && (
            <SectionTitle
              title={lgCatNm}
              className={css.title}
              itemCount={
                categoryItemInfos
                  ? categoryItemInfos.length > 0
                    ? categoryItemInfos[0].total
                    : "0"
                  : categoryShowInfos.length > 0
                  ? categoryShowInfos[0].total
                  : "0"
              }
            />
          )}
          {buttonTabList && buttonTabList.length > 0 && (
            <div className={css.tabContainer}>
              <TButtonTab
                contents={buttonTabList}
                onItemClick={handleItemClick}
                selectedIndex={tab}
                listType={LIST_TYPE.medium}
              />
              <TDropDown
                className={css.dropdown}
                onSelect={handleSelectFilter}
                selectedIndex={dropDownTab}
                width="small"
              >
                {filterMethods}
              </TDropDown>
            </div>
          )}
          {tab === 0 && <ShowContents />}
          {tab === 1 && <ItemContents />}
        </div>
      </TBody>
    </TPanel>
  );
}
