import React, { memo, useEffect, useRef } from "react";

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

import { Job } from "@enact/core/util";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import {
  getContainerId,
  setContainerLastFocusedElement,
} from "@enact/spotlight/src/container";

import TScroller from "../../../../components/TScroller/TScroller";
import useScrollTo from "../../../../hooks/useScrollTo";
import css from "./FeaturedCreatorsNav.module.less";
import FeaturedCreatorsNavItem from "./FeaturedCreatorsNavItem/FeaturedCreatorsNavItem";
import { sendLogFeaturedBrands } from "../../../../actions/logActions";

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

export default memo(function FeaturedCreatorsNav({
  brandCreatorsInfo,
  fromGNB,
  fromQuickMenu,
  handleItemFocus,
  selectedHstNm,
  selectedPatnrId,
  selectedPatncNm,
  setSelectedHstNm,
}) {
  const dispatch = useDispatch();
  const { getScrollTo, scrollLeft } = useScrollTo();

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

  const firstHstIdRef = useRef(`${brandCreatorsInfo[0]?.hostIdCval}` || null);
  const firstHstNmRef = useRef(brandCreatorsInfo[0]?.hstNm || null);
  const logTimerRef = useRef(null);
  const scrollLeftJob = useRef(new Job((func) => func(), 0));

  useEffect(() => {
    if (!panelInfo?.featuredCreatorsNavX) {
      return;
    }

    const scrollLeftJobValue = scrollLeftJob.current;
    const { featuredCreatorsNavX } = panelInfo;

    scrollLeftJobValue.start(() => scrollLeft({ x: featuredCreatorsNavX }));

    return () => scrollLeftJobValue.stop();
  }, [panelInfo, scrollLeft]);

  useEffect(() => {
    const containerId = "featured-creators-nav-id";
    const container = document.getElementById(containerId);

    if (container) {
      const childrenId = getContainerId(container?.children[0].children[0]);
      if (childrenId) {
        setContainerLastFocusedElement(null, [containerId, childrenId]);
      }
    }

    scrollLeft();
  }, [scrollLeft, selectedPatnrId]);

  useEffect(() => {
    if (fromGNB || fromQuickMenu) {
      logTimerRef.current = setTimeout(() => {
        dispatch(sendLogFeaturedBrands({
          crtrId: firstHstIdRef.current,
          crtrNm: firstHstNmRef.current,
          patnrId: selectedPatnrId,
          patncNm: selectedPatncNm,
        }));
      }, 500);

      return () => clearTimeout(logTimerRef.current);
    }
  }, [
    fromGNB,
    fromQuickMenu,
    selectedPatncNm,
    selectedPatnrId
  ]);

  return (
    <Container
      className={css.nav}
      id="featured-creators-nav-id"
      spotlightId="featured-creators-nav-id"
    >
      <TScroller
        cbScrollTo={getScrollTo}
        direction="horizontal"
        noScrollByWheel
      >
        <ul>
          {brandCreatorsInfo.map((brandCreatorsInfoItem, itemIndex) => (
            <FeaturedCreatorsNavItem
              brandCreatorsInfoItem={brandCreatorsInfoItem}
              handleItemFocus={handleItemFocus}
              itemIndex={itemIndex}
              key={"brand-creators-info-" + itemIndex}
              scrollLeft={scrollLeft}
              selectedPatncNm={selectedPatncNm}
              selectedHstNm={selectedHstNm}
              setSelectedHstNm={setSelectedHstNm}
            />
          ))}
        </ul>
      </TScroller>
    </Container>
  );
});
