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

import { useSelector } from "react-redux";

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 "./RecommendedShows.module.less";
import RecommendedShowsContents from "./RecommendedShowsContents/RecommendedShowsContents";
import RecommendedShowsNav from "./RecommendedShowsNav/RecommendedShowsNav";

const STRING_CONF = {
  RECOMMENDED_SHOWS: "RECOMMENDED SHOWS",
};

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

const RecommendedShows = ({
  brandRecommendedShowCategoryInfo,
  brandRecommendedShowInfo,
  fromGNB,
  fromQuickMenu,
  handleItemFocus,
  order,
  shelfOrder,
  shelfTitle,
  spotlightId,
  selectedCatCd,
  selectedPatncNm,
  selectedPatnrId,
  setSelectedCatCd,
}) => {
  const panelInfo = useSelector((state) => state.panels.panels[0]?.panelInfo);

  const [firstChk, setFirstChk] = useState(0);

  const selectedCatNm = useMemo(
    () =>
      brandRecommendedShowCategoryInfo //
        .find(({ catCd }, index) => {
          if (!selectedCatCd) {
            if (panelInfo?.catCd) {
              return catCd.toString() === panelInfo?.catCd;
            }

            return index === 0;
          }

          return catCd.toString() === selectedCatCd;
        })?.catNm,
    [brandRecommendedShowCategoryInfo, panelInfo, selectedCatCd]
  );

  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 = "RECOMMENDED SHOWS, 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(
            "RECOMMENDED SHOWS, 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.RECOMMENDED_SHOWS)}
        data-title="recommended-shows"
        aria-label="RECOMMENDED SHOWS, Heading1"
      />
      <RecommendedShowsNav
        brandRecommendedShowCategoryInfo={brandRecommendedShowCategoryInfo}
        fromGNB={fromGNB}
        fromQuickMenu={fromQuickMenu}
        handleItemFocus={_handleItemFocus}
        selectedCatCd={selectedCatCd}
        selectedPatncNm={selectedPatncNm}
        selectedPatnrId={selectedPatnrId}
        setSelectedCatCd={setSelectedCatCd}
      />
      {brandRecommendedShowInfo.map(
        (brandRecommendedShowInfoItem, contentsIndex) => (
          <RecommendedShowsContents
            brandRecommendedShowInfoItem={brandRecommendedShowInfoItem}
            contentsIndex={contentsIndex}
            handleItemFocus={_handleItemFocus}
            key={`${spotlightId}-${contentsIndex}`}
            selectedCatCd={selectedCatCd}
            selectedCatNm={selectedCatNm}
            selectedPatnrId={selectedPatnrId}
            spotlightId={spotlightId}
            shelfOrder={shelfOrder}
            shelfTitle={shelfTitle}
          />
        )
      )}
    </Container>
  );
};

export default memo(RecommendedShows);
