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 "./ShowroomNav.module.less";
import ShowroomNavItem from "./ShowroomNavItem/ShowroomNavItem";
import { sendLogFeaturedBrands } from "../../../../actions/logActions";

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

export default memo(function ShowroomNav({
  brandShowroomInfo,
  fromGNB,
  fromQuickMenu,
  handleItemFocus,
  selectedPatncNm,
  selectedPatnrId,
  selectedRoomId,
  setSelectedRoomId,
}) {
  const dispatch = useDispatch();

  const { getScrollTo, scrollLeft } = useScrollTo();

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

  const firstRoomIdRef = useRef(brandShowroomInfo[0]?.roomId || null);
  const firstRoomNmRef = useRef(brandShowroomInfo[0]?.roomNm || null);
  const logTimerRef = useRef(null);
  const scrollLeftJob = useRef(new Job((func) => func(), 0));

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

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

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

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

  useEffect(() => {
    const containerId = "showroom-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({
          catCd: firstRoomIdRef.current,
          catNm: firstRoomNmRef.current,
          patnrId: selectedPatnrId,
          patncNm: selectedPatncNm,
        }));
      }, 500);

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

  return (
    <Container
      className={css.nav}
      id="showroom-nav-id"
      spotlightId="showroom-nav-id"
    >
      <TScroller
        cbScrollTo={getScrollTo}
        direction="horizontal"
        noScrollByWheel
      >
        <ul>
          {brandShowroomInfo.map((brandShowroomInfoItem, itemIndex) => (
            <ShowroomNavItem
              brandShowroomInfoItem={brandShowroomInfoItem}
              handleItemFocus={handleItemFocus}
              itemIndex={itemIndex}
              key={"brand-showroom-info-" + itemIndex}
              length={brandShowroomInfo.length}
              scrollLeft={scrollLeft}
              selectedPatncNm={selectedPatncNm}
              selectedPatnrId={selectedPatnrId}
              selectedRoomId={selectedRoomId}
              setSelectedRoomId={setSelectedRoomId}
            />
          ))}
        </ul>
      </TScroller>
    </Container>
  );
});
