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

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

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

import { pushPanel, updatePanel } from "../../../../actions/panelActions";
import { removeDotAndColon } from "../../../../components/TItemCard/TItemCard";
import {
  LOG_CONTEXT_NAME,
  LOG_MESSAGE_ID,
  panel_names,
} from "../../../../utils/Config";
import css from "./ShowroomContents.module.less";
import ShowroomProductList from "./ShowroomProductList/ShowroomProductList";
import ShowroomThumbnailCard from "./ShowroomThumbnailCard/ShowroomThumbnailCard";
import { sendLogTotalRecommend } from "../../../../actions/logActions";

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

const ShowroomContents = ({
  handleItemFocus,
  contentsIndex,
  selectedPatncNm,
  selectedPatnrId,
  selectedRoomId,
  selectedRoomThemeInfoItem,
  spotlightId,
  shelfOrder,
  shelfTitle,
}) => {
  const dispatch = useDispatch();

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

  const { roomThemeProducts, themeExpsOrd, themeId, themeImgUrl, themeNm } =
    selectedRoomThemeInfoItem;

  const rankOrd = contentsIndex * 1 + 1;
  const rankText =
    rankOrd === 1
      ? rankOrd + "st"
      : rankOrd === 2
      ? rankOrd + "nd"
      : rankOrd === 3
      ? rankOrd + "rd"
      : rankOrd + "th";

  useEffect(() => {
    const containerId = "showroom-contents-id-" + themeExpsOrd;
    const container = document.getElementById(containerId);

    if (container) {
      const thumbnailCard = container.children[1].children[0].children[0];
      if (thumbnailCard) {
        setContainerLastFocusedElement(thumbnailCard, [containerId]);
      }

      const gridListId = getContainerId(
        container.children[1].children[1].children[0].children[0]
      );
      const gridList =
        container.children[1].children[1].children[0].children[0];
      if (gridList) {
        setContainerLastFocusedElement(null, [gridListId]);
      }
    }
  }, [selectedPatnrId, selectedRoomId, themeExpsOrd]);

  const handleClick = useCallback(() => {
    const lastFocusedTarget = Spotlight.getCurrent();
    if (lastFocusedTarget) {
      const lastFocusedTargetId =
        lastFocusedTarget?.getAttribute("data-spotlight-id");

      if (lastFocusedTargetId) {
        const section = "showroom";
        const x = 0;

        dispatch(
          updatePanel({
            name: panel_names.FEATURED_BRANDS_PANEL,
            panelInfo: {
              lastFocusedTargetId,
              section,
              x,
            },
          })
        );
      }
    }

    dispatch(
      pushPanel({
        name: panel_names.IMAGE_PANEL,
        panelInfo: {
          patncNm: selectedPatncNm,
          patnrId: selectedPatnrId ?? panelInfo?.patnrId,
          roomId: selectedRoomId,
          themeExpsOrd,
          themeId,
          themeNm,
          y: 0,
        },
      })
    );

    dispatch(
      sendLogTotalRecommend({
        contextName: LOG_CONTEXT_NAME.FEATURED_BRANDS,
        messageId: LOG_MESSAGE_ID.SHELF_CLICK,
        partner: selectedPatncNm,
        shelfLocation: shelfOrder,
        shelfTitle: shelfTitle,
        shelfId: spotlightId,
        location: themeExpsOrd,
        contentTitle: themeNm,
        contentId: themeId,
      })
    );
  }, [
    dispatch,
    panelInfo?.patnrId,
    selectedPatncNm,
    selectedPatnrId,
    selectedRoomId,
    themeExpsOrd,
    themeId,
    themeNm,
  ]);

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

  return (
    <Container
      className={css.container}
      data-wheel-point
      id={"showroom-contents-id-" + themeExpsOrd}
      spotlightId={`${spotlightId}-${contentsIndex}`}
    >
      <h3 data-showroom-subtitle={themeNm}>{themeNm}</h3>
      <div>
        <ShowroomThumbnailCard
          onClick={handleClick}
          onFocus={handleFocus}
          spotlightId={"spotlightId-" + removeDotAndColon(themeId)}
          thumbnailUrl={themeImgUrl}
          ariaLabel={rankText + " SHOW " + themeNm}
        />
        <ShowroomProductList
          handleItemFocus={handleItemFocus}
          roomThemeProducts={roomThemeProducts}
          selectedPatncNm={selectedPatncNm}
          selectedPatnrId={selectedPatnrId}
          selectedRoomId={selectedRoomId}
          themeExpsOrd={themeExpsOrd}
          themeId={themeId}
          themeNm={themeNm}
          shelfOrder={shelfOrder}
          shelfTitle={shelfTitle}
          spotlightId={spotlightId}
        />
      </div>
    </Container>
  );
};

export default memo(ShowroomContents);
