import React, { memo, useCallback, useEffect, 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 "./Series.module.less";
import SeriesContents from "./SeriesContents/SeriesContents";
import SeriesNav from "./SeriesNav/SeriesNav";

const STRING_CONF = {
  SERIES: "SERIES",
};

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

const Series = ({
  brandSeriesGroupInfo,
  brandSeriesInfo,
  fromGNB,
  fromQuickMenu,
  handleItemFocus,
  order,
  shelfOrder,
  shelfTitle,
  spotlightId,
  selectedPatncNm,
  selectedPatnrId,
  selectedSeriesId,
  setSelectedSeriesId,
}) => {
  const [filteredBrandSeriesGroupInfo, setFilteredSeriesGroupInfo] = useState();
  const [firstChk, setFirstChk] = useState(0);

  useEffect(() => {
    if (!selectedSeriesId) {
      return setFilteredSeriesGroupInfo(brandSeriesGroupInfo);
    }

    setFilteredSeriesGroupInfo(
      brandSeriesGroupInfo.filter(
        ({ seriesId }) => seriesId === selectedSeriesId
      )
    );
  }, [brandSeriesGroupInfo, selectedSeriesId]);

  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 = "series, Heading1," + 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("series, Heading1,", "");
          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.SERIES)} data-title="series" />
      <SeriesNav
        brandSeriesInfo={brandSeriesInfo}
        fromGNB={fromGNB}
        fromQuickMenu={fromQuickMenu}
        handleItemFocus={_handleItemFocus}
        selectedPatncNm={selectedPatncNm}
        selectedPatnrId={selectedPatnrId}
        selectedSeriesId={selectedSeriesId}
        setSelectedSeriesId={setSelectedSeriesId}
      />
      {filteredBrandSeriesGroupInfo &&
        filteredBrandSeriesGroupInfo.map(
          (
            {
              brandSeriesProductInfo,
              patnrId,
              seriesId,
              seriesImgUrl,
              seriesNm,
            },
            contentsIndex
          ) => (
            <SeriesContents
              brandSeriesProductInfo={brandSeriesProductInfo}
              filteredBrandLength={filteredBrandSeriesGroupInfo.length}
              contentsIndex={contentsIndex}
              handleItemFocus={_handleItemFocus}
              isCarousel={!selectedSeriesId}
              key={`${spotlightId}-${contentsIndex}`}
              patnrId={patnrId}
              selectedPatnrId={selectedPatnrId}
              selectedSeriesId={selectedSeriesId}
              seriesId={seriesId}
              seriesImgUrl={seriesImgUrl}
              seriesNm={seriesNm}
              spotlightId={spotlightId}
              shelfOrder={shelfOrder}
              shelfTitle={shelfTitle}
              selectedPatncNm={selectedPatncNm}
            />
          )
        )}
    </Container>
  );
};

export default memo(Series);
