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 { panel_names } from "../../../../../utils/Config";
import css from "./ShowroomNavItem.module.less";

export default function ShowroomNavItem({
  brandShowroomInfoItem,
  handleItemFocus,
  itemIndex,
  length,
  scrollLeft,
  selectedPatncNm,
  selectedPatnrId,
  selectedRoomId,
  setSelectedRoomId,
}) {
  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 { roomId, roomNm } = brandShowroomInfoItem;

  const selectedText =
    (selectedRoomId ?? panelInfo?.roomId) === roomId ? "Selected " : "";

  const allLabeltext =
    selectedText + roomNm + " " + (itemIndex * 1 + 1) + " of " + length;

  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 = "showroom";
        const showroomNavX = xContainer.scrollLeft;

        dispatch(
          updatePanel({
            name: panel_names.FEATURED_BRANDS_PANEL,
            panelInfo: {
              roomId,
              section,
              showroomNavX,
              x: 0,
            },
          })
        );
      }

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

      setSelectedRoomId(roomId);
    },
    [
      dispatch,
      panelInfo?.patnrId,
      roomId,
      roomNm,
      selectedPatncNm,
      selectedPatnrId,
      setSelectedRoomId,
    ]
  );

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

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

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

  return (
    <li className={css.item}>
      <TButton
        className={
          (selectedRoomId ?? panelInfo?.roomId) === roomId && css.selected
        }
        onBlur={handleBlur}
        onClick={handleClick}
        onFocus={handleFocus}
        selected={(selectedRoomId ?? panelInfo?.roomId) === roomId}
        type={TYPES.oneDepthCategory}
        ariaLabel={allLabeltext}
      >
        {roomNm}
      </TButton>
    </li>
  );
}
