import React, { useCallback } from "react";

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

import { sendLogFeaturedBrands } from "../../../../../actions/logActions";
import { updatePanel } from "../../../../../actions/panelActions";
import TButton, { TYPES } from "../../../../../components/TButton/TButton";
import useScrollReset from "../../../../../hooks/useScrollReset";
// import useScrollTopByDistance from "../../../../../hooks/useScrollTopByDistance";
import { panel_names } from "../../../../../utils/Config";
import css from "./RecommendedShowsNavItem.module.less";

export default function RecommendedShowsNavItem({
  brandRecommendedShowCategoryInfoItem,
  handleItemFocus,
  itemIndex,
  itemLength,
  scrollLeft,
  selectedCatCd,
  selectedPatnrId,
  selectedPatncNm,
  setSelectedCatCd,
}) {
  const { handleScrollReset, handleStopScrolling } = useScrollReset(
    scrollLeft,
    true
  );
  const dispatch = useDispatch();

  const panelInfo = useSelector((state) => state.panels.panels[0]?.panelInfo);

  const cursorVisible = useSelector(
    (state) => state.common.appStatus.cursorVisible
  );

  const { catCd, catNm } = brandRecommendedShowCategoryInfoItem;

  const selectedCatTrue = selectedCatCd
    ? selectedCatCd === catCd.toString()
    : panelInfo?.catCd
    ? panelInfo?.catCd === catCd.toString()
    : itemIndex === 0;
  const selectedText = selectedCatTrue === true ? "Selected " : "";

  const lengthText = itemIndex + 1 + " of " + itemLength;
  const ariaLabel = selectedText + catNm + " " + lengthText;

  const handleBlur = useCallback(() => {
    if (itemIndex === 0) {
      handleStopScrolling();
    }
  }, [handleStopScrolling, itemIndex]);

  const handleClick = useCallback(
    (e) => {
      const tButton = e.currentTarget;

      const xContainer = tButton?.parentNode?.parentNode?.parentNode;

      if (xContainer) {
        const section = "recommended-shows";
        const recommendedShowsNavX = xContainer.scrollLeft;

        dispatch(
          updatePanel({
            name: panel_names.FEATURED_BRANDS_PANEL,
            panelInfo: {
              catNm,
              catCd: catCd.toString(),
              section,
              recommendedShowsNavX,
            },
          })
        );
      }

      dispatch(
        sendLogFeaturedBrands({
          patnrId: selectedPatnrId ?? panelInfo?.patnrId,
          patncNm: selectedPatncNm,
          catNm,
          catCd: catCd.toString(),
        })
      );

      setSelectedCatCd(catCd.toString());
    },
    [
      catCd,
      catNm,
      dispatch,
      panelInfo?.patnrId,
      selectedPatncNm,
      selectedPatnrId,
      setSelectedCatCd,
    ]
  );

  const handleFocus = useCallback(() => {
    if (handleItemFocus) {
      handleItemFocus();
    }

    if (itemIndex === 0) {
      handleScrollReset();
    }

    if (cursorVisible) {
      return;
    }
  }, [cursorVisible, handleItemFocus, handleScrollReset, itemIndex]);

  return (
    <li className={css.item}>
      <TButton
        className={
          selectedCatCd
            ? selectedCatCd === catCd.toString() && css.selected
            : panelInfo?.catCd
            ? panelInfo?.catCd === catCd.toString() && css.selected
            : itemIndex === 0 && css.selected
        }
        onBlur={handleBlur}
        onClick={handleClick}
        onFocus={handleFocus}
        selected={
          selectedCatCd
            ? selectedCatCd === catCd.toString()
            : panelInfo?.catCd
            ? panelInfo?.catCd === catCd.toString()
            : itemIndex === 0
        }
        type={TYPES.oneDepthCategory}
        ariaLabel={ariaLabel}
      >
        {catNm}
      </TButton>
    </li>
  );
}
