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 "./FeaturedCreatorsNavItem.module.less";

export default function FeaturedCreatorsNavItem({
  brandCreatorsInfoItem,
  handleItemFocus,
  itemIndex,
  scrollLeft,
  selectedHstNm,
  selectedPatncNm,
  setSelectedHstNm,
}) {
  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 { hostIdCval, hostImgNm, hostImgPath, hstNm } = brandCreatorsInfoItem;

  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 = "featured-creators";
        const featuredCreatorsNavX = xContainer.scrollLeft;

        dispatch(
          updatePanel({
            name: panel_names.FEATURED_BRANDS_PANEL,
            panelInfo: {
              hostIdCval,
              hstNm,
              section,
              featuredCreatorsNavX,
            },
          })
        );
      }

      dispatch(sendLogFeaturedBrands({
        crtrId: hostIdCval,
        crtrNm: hstNm,
        patnrId: panelInfo?.patnrId,
        patncNm: selectedPatncNm,
      }));

      setSelectedHstNm(hstNm);
    },
    [
      dispatch,
      hostIdCval,
      hstNm,
      panelInfo?.patnrId,
      selectedPatncNm,
      setSelectedHstNm,
    ]
  );

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

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

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

  return (
    <li className={css.item}>
      <TButton
        avatarAlt={hostImgNm}
        avatarSource={hostImgPath}
        className={
          selectedHstNm
            ? selectedHstNm === hstNm && css.selected
            : panelInfo?.hstNm
            ? panelInfo.hstNm === hstNm && css.selected
            : itemIndex === 0 && css.selected
        }
        onBlur={handleBlur}
        onClick={handleClick}
        onFocus={handleFocus}
        selected={
          selectedHstNm
            ? selectedHstNm === hstNm
            : panelInfo?.hstNm
            ? panelInfo.hstNm === hstNm
            : itemIndex === 0
        }
        type={hostImgPath ? TYPES.withAvatar : TYPES.oneDepthCategory}
        withAvatar={hostImgPath}
      >
        {hstNm}
      </TButton>
    </li>
  );
}
