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

import Spotlight from "@enact/spotlight";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";

import SectionTitle from "../../../components/SectionTitle/SectionTitle";
import { $L } from "../../../utils/helperMethods";
import css from "./FeaturedCategory.module.less";
import FeaturedCategoryContents from "./FeaturedCategoryContents/FeaturedCategoryContents";
import FeaturedCategoryNav from "./FeaturedCategoryNav/FeaturedCategoryNav";
import FeaturedSubCategoryNav from "./FeaturedSubCategoryNav/FeaturedSubCategoryNav";

const STRING_CONF = {
  CATEGORY: "CATEGORY",
};
const Container = SpotlightContainerDecorator(
  { leaveFor: { right: "" }, enterTo: null },
  "div"
);

const FeaturedCategory = ({
  brandCategoryInfo,
  brandCategoryProductInfo,
  fromGNB,
  fromQuickMenu,
  handleItemFocus,
  order,
  shelfOrder,
  shelfTitle,
  spotlightId,
  selectedCatCdLv1,
  selectedCatCdLv2,
  selectedPatncNm,
  selectedPatnrId,
  setSelectedCatCdLv1,
  setSelectedCatCdLv2,
}) => {
  const [
    filteredBrandCategoryProductInfo,
    setFilteredBrandCategoryProductInfo,
  ] = useState();
  const [firstChk, setFirstChk] = useState(0);

  const catCdLv1Array = useMemo(
    () => brandCategoryInfo.map((obj) => obj.catCdLv1),
    [brandCategoryInfo]
  );

  const selectedCategoryLv2Infos = useMemo(
    () =>
      brandCategoryInfo //
        .find(({ catCdLv1 }) => catCdLv1 === selectedCatCdLv1)
        ?.categoryLv2Infos,
    [brandCategoryInfo, selectedCatCdLv1]
  );

  const selectedCatCdLv2Array = useMemo(
    () =>
      selectedCategoryLv2Infos &&
      selectedCategoryLv2Infos.map((obj) => obj.catCdLv2),
    [selectedCategoryLv2Infos]
  );

  useEffect(() => {
    if (!selectedCatCdLv1 && !selectedCatCdLv2) {
      setFilteredBrandCategoryProductInfo(
        brandCategoryProductInfo //
          .filter(({ catCd }) => catCdLv1Array.includes(catCd))
      );
      return;
    }

    if (
      selectedCatCdLv1 &&
      !selectedCatCdLv2 &&
      selectedCategoryLv2Infos?.length === 0
    ) {
      setFilteredBrandCategoryProductInfo(
        brandCategoryProductInfo //
          .filter(({ catCd }) => catCd === selectedCatCdLv1)
      );
      return;
    }

    if (
      selectedCatCdLv1 &&
      !selectedCatCdLv2 &&
      selectedCategoryLv2Infos?.length > 0
    ) {
      setFilteredBrandCategoryProductInfo(
        brandCategoryProductInfo //
          .filter(
            ({ catCd }) =>
              !catCdLv1Array.includes(catCd) &&
              selectedCatCdLv2Array.includes(catCd)
          )
      );
      return;
    }

    if (
      selectedCatCdLv1 &&
      selectedCatCdLv2 &&
      selectedCategoryLv2Infos?.length > 0
    ) {
      setFilteredBrandCategoryProductInfo(
        brandCategoryProductInfo //
          .filter(({ catCd }) => catCd === selectedCatCdLv2)
      );
    }
  }, [
    brandCategoryProductInfo,
    catCdLv1Array,
    selectedCatCdLv1,
    selectedCatCdLv2,
    selectedCatCdLv2Array,
    selectedPatnrId,
    selectedCategoryLv2Infos?.length,
  ]);

  const _handleItemFocus = useCallback(() => {
    if (handleItemFocus) handleItemFocus(spotlightId, shelfOrder);

    const c = Spotlight.getCurrent();
    if (firstChk === 0) {
      if (c) {
        let cAriaLabel = c.getAttribute("aria-label");
        if (cAriaLabel) {
          cAriaLabel = "category, Heading 1," + cAriaLabel;
          c.setAttribute("aria-label", cAriaLabel);
        }
      }
      setFirstChk(1);
    } else if (firstChk === 1) {
      if (c) {
        let cAriaLabel = c.getAttribute("aria-label");
        if (cAriaLabel) {
          const newcAriaLabel = cAriaLabel.replace("category, Heading 1,", "");
          c.setAttribute("aria-label", newcAriaLabel);
        }
      }
    } else {
      return;
    }
  }, [handleItemFocus, firstChk]);

  return (
    <Container
      className={css.container}
      data-shelf-order={order}
      data-wheel-point
      spotlightId={spotlightId}
    >
      <SectionTitle
        title={$L(STRING_CONF.CATEGORY)}
        data-title="category"
        label="category, Heading 1"
      />
      <FeaturedCategoryNav
        brandCategoryInfo={brandCategoryInfo}
        fromGNB={fromGNB}
        fromQuickMenu={fromQuickMenu}
        handleItemFocus={_handleItemFocus}
        selectedCatCdLv1={selectedCatCdLv1}
        selectedPatnrId={selectedPatnrId}
        selectedPatncNm={selectedPatncNm}
        setSelectedCatCdLv1={setSelectedCatCdLv1}
        setSelectedCatCdLv2={setSelectedCatCdLv2}
      />
      {selectedCatCdLv1 && selectedCategoryLv2Infos.length > 0 && (
        <FeaturedSubCategoryNav
          handleItemFocus={_handleItemFocus}
          selectedCategoryLv2Infos={selectedCategoryLv2Infos}
          selectedCatCdLv2={selectedCatCdLv2}
          selectedPatnrId={selectedPatnrId}
          selectedPatncNm={selectedPatncNm}
          setSelectedCatCdLv2={setSelectedCatCdLv2}
        />
      )}

      {filteredBrandCategoryProductInfo &&
        filteredBrandCategoryProductInfo.map(
          (brandCategoryProductDetailInfoItem, contentsIndex) => (
            <FeaturedCategoryContents
              brandCategoryProductDetailInfoItem={
                brandCategoryProductDetailInfoItem
              }
              contentsIndex={contentsIndex}
              handleItemFocus={_handleItemFocus}
              isCarousel={filteredBrandCategoryProductInfo.length > 1}
              key={`${spotlightId}-${contentsIndex}`}
              selectedCatCdLv1={selectedCatCdLv1}
              selectedCatCdLv2={selectedCatCdLv2}
              selectedCategoryLv2Infos={selectedCategoryLv2Infos}
              selectedPatnrId={selectedPatnrId}
              spotlightId={spotlightId}
              shelfOrder={shelfOrder}
              shelfTitle={shelfTitle}
              selectedPatncNm={selectedPatncNm}
            />
          )
        )}
    </Container>
  );
};

export default memo(FeaturedCategory);
