import React, { useEffect } from "react";

import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import { setContainerLastFocusedElement } from "@enact/spotlight/src/container";

import TScroller from "../../../components/TScroller/TScroller";
import useScrollTo from "../../../hooks/useScrollTo";
import css from "./OnSaleNav.module.less";
import OnSaleNavItem from "./OnSaleNavItem/OnSaleNavItem";
import Spotlight from "@enact/spotlight";

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

export default function OnSaleNav({
  categoryInfos,
  panelInfoLgCatCd,
  previousPanelIsDetail,
  selectedLgCatCd,
  setSelectedLgCatCd,
  setSelectedLgCatNm,
  setFirstFocusableTarget,
  spotlightDisabled,
}) {
  const { getScrollTo, scrollLeft } = useScrollTo();

  useEffect(() => {
    if (panelInfoLgCatCd) {
      const container = document.querySelector("ul");
      const item = document.querySelector(
        `[data-spotlight-id="spotlightId-${panelInfoLgCatCd}"]`
      );

      if (container && item) {
        const containerRect = container.getBoundingClientRect();
        const containerWidth = containerRect.width;

        const itemRect = item.getBoundingClientRect();
        const itemWidth = itemRect.width;
        const offsetFromContainerLeft = itemRect.left;

        const rightGap = parseInt(
          window.getComputedStyle(item).getPropertyValue("margin-right")
        );

        const displayOrder = Array.from(container.children).indexOf(item) + 1;

        const maxVisibleCount = Math.floor(
          containerWidth / (itemWidth + rightGap)
        );

        if (displayOrder <= maxVisibleCount) {
          return;
        }

        const clippedWidth =
          containerWidth - (itemWidth + rightGap) * maxVisibleCount - rightGap;

        const x = offsetFromContainerLeft - containerWidth + clippedWidth;

        setTimeout(() => {
          scrollLeft({ x });
        }, 100);
      }
    }
  }, [panelInfoLgCatCd, scrollLeft]);

  useEffect(() => {
    if (panelInfoLgCatCd) {
      const node = document.querySelector(
        `[data-spotlight-id=spotlightId-${panelInfoLgCatCd}]`
      );
      if (node) {
        const containerId = "on-sale-nav";
        setContainerLastFocusedElement(node, [containerId]);
      }
      // setTimeout(() => {
      //   Spotlight.focus(node);
      // }, 100);
    }
  }, [panelInfoLgCatCd]);

  return (
    <Container
      className={css.nav}
      spotlightDisabled={spotlightDisabled}
      spotlightId="on-sale-nav"
    >
      <TScroller
        cbScrollTo={getScrollTo}
        direction="horizontal"
        noScrollByWheel
      >
        <ul>
          {categoryInfos.map((categoryInfosItem, itemIndex) => (
            <OnSaleNavItem
              categoryInfos={categoryInfos}
              categoryInfosItem={categoryInfosItem}
              key={"category-info" + itemIndex}
              itemIndex={itemIndex}
              panelInfoLgCatCd={panelInfoLgCatCd}
              selectedLgCatCd={selectedLgCatCd}
              setFirstFocusableTarget={setFirstFocusableTarget}
              setSelectedLgCatCd={setSelectedLgCatCd}
              setSelectedLgCatNm={setSelectedLgCatNm}
              length={categoryInfos.length}
            />
          ))}
        </ul>
      </TScroller>
    </Container>
  );
}
