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

import { useSelector } 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 "./ThemeCurationProductList.module.less";
import ThemeCurationProductListItem from "./ThemeCurationProductListItem/ThemeCurationProductListItem";

const Container = SpotlightContainerDecorator(
  { leaveFor: { right: "" }, enterTo: "default-element" },
  "div"
);

export default function ThemeCurationProductList({
  contentsIndex,
  isTopButtonClicked,
  shelfProductInfos,
  shelfProductInfosLength,
}) {
  const { getScrollTo, scrollLeft } = useScrollTo();

  const panels = useSelector((state) => state.panels.panels);
  const panelInfo = useSelector(
    (state) => state.panels.panels[panels?.length - 1]?.panelInfo
  );

  const scrollLeftJob = useRef(new Job((func) => func(), 0));

  useEffect(() => {
    const scrollLeftJobValue = scrollLeftJob.current;

    if (!panelInfo?.exprOrd) {
      return;
    }

    if (panelInfo?.exprOrd === contentsIndex + 1) {
      const { x } = panelInfo;

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

    return () => {
      if (panelInfo?.exprOrd === contentsIndex + 1) {
        scrollLeftJobValue.stop();
      }
    };
  }, [contentsIndex, panelInfo, scrollLeft]);

  useEffect(() => {
    const containerId = "theme-curation-product-list-id-" + contentsIndex;
    const container = document.getElementById(containerId);

    if (container) {
      const childrenId = getContainerId(
        container?.children[0].children[0].children[0]
      );

      if (childrenId) {
        setContainerLastFocusedElement(null, [containerId, childrenId]);
      }
    }

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

  useEffect(() => {
    if (contentsIndex === 0 && isTopButtonClicked) {
      scrollLeft();
    }
  }, [contentsIndex, isTopButtonClicked, scrollLeft]);

  return (
    <Container
      className={css.container}
      id={"theme-curation-product-list-id-" + contentsIndex}
      spotlightId={"theme-curation-product-list-id-" + contentsIndex}
    >
      <TScroller
        cbScrollTo={getScrollTo}
        direction="horizontal"
        noScrollByWheel
      >
        <ul className={css.body}>
          {shelfProductInfos &&
            shelfProductInfos.length > 0 &&
            shelfProductInfos.map((themeProductInfosItem, itemIndex) => {
              return (
                <ThemeCurationProductListItem
                  contentsIndex={contentsIndex}
                  itemIndex={itemIndex}
                  key={"theme-product-infos-" + itemIndex}
                  scrollLeft={scrollLeft}
                  shelfProductInfosLength={shelfProductInfosLength}
                  themeProductInfosItem={themeProductInfosItem}
                />
              );
            })}
        </ul>
      </TScroller>
    </Container>
  );
}
