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 { updatePanel } from "../../../../actions/panelActions";
import { startVideoPlayer } from "../../../../actions/playActions";
import TItemCard, { TYPES } from "../../../../components/TItemCard/TItemCard";
import {
  LOG_CONTEXT_NAME,
  LOG_MESSAGE_ID,
  panel_names,
} from "../../../../utils/Config";
import css from "./RecommendedShowsContents.module.less";
import RecommendedShowsProductList from "./RecommendedShowsProductList/RecommendedShowsProductList";

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

const RecommendedShowsContents = ({
  brandRecommendedShowInfoItem,
  contentsIndex,
  handleItemFocus,
  selectedCatCd,
  selectedCatNm,
  selectedPatnrId,
  spotlightId,
  shelfOrder,
  shelfTitle,
}) => {
  const dispatch = useDispatch();

  const cursorVisible = useSelector(
    (state) => state.common.appStatus.cursorVisible
  );

  const {
    brandRecommendedShowProductInfo,
    catCd,
    patncLogoPath,
    patnrId,
    showId,
    showNm,
    thumbnailUrl,
    patncNm,
    expsOrd,
    brndNm,
  } = brandRecommendedShowInfoItem;

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

  useEffect(() => {
    const containerId = "recommended-shows-contents-id-" + contentsIndex;
    const container = document.getElementById(containerId);

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

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

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

    if (lastFocusedTargetId) {
      const section = "recommended-shows";
      const x = 0;

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

    dispatch(
      startVideoPlayer({
        modal: false,
        patnrId,
        showId,
        shptmBanrTpNm: "VOD",
        thumbnail: thumbnailUrl,
      })
    );
  }, [catCd, dispatch, patnrId, showId]);

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

    if (cursorVisible) {
      return;
    }
  }, [cursorVisible, handleItemFocus]);

  return (
    <Container
      className={css.container}
      data-wheel-point
      id={"recommended-shows-contents-id-" + contentsIndex}
      spotlightId={`${spotlightId}-${contentsIndex}`}
    >
      <TItemCard
        contextName={LOG_CONTEXT_NAME.FEATURED_BRANDS}
        messageId={LOG_MESSAGE_ID.SHELF_CLICK}
        shelfLocation={shelfOrder}
        shelfTitle={shelfTitle}
        shelfId={spotlightId}
        brandName={brndNm}
        contentId={showId}
        contentTitle={showNm}
        patnerName={patncNm}
        catNm={selectedCatNm}
        order={expsOrd}
        data-video-card={"recommended-shows-video-card-" + contentsIndex}
        imageAlt={showNm}
        imageSource={thumbnailUrl}
        logo={patncLogoPath}
        nonPosition
        onClick={handleClick}
        onFocus={handleFocus}
        productName={showNm}
        productId={showId}
        firstLabel={rankText + "SHOW "}
        type={TYPES.videoShow}
      />
      <RecommendedShowsProductList
        brandRecommendedShowProductInfo={brandRecommendedShowProductInfo}
        catCd={catCd}
        contentsIndex={contentsIndex}
        handleItemFocus={handleItemFocus}
        patnrId={patnrId}
        selectedCatCd={selectedCatCd}
        selectedPatnrId={selectedPatnrId}
        showId={showId}
        videoThumbnail={thumbnailUrl}
        spotlightId={spotlightId}
        shelfOrder={shelfOrder}
        shelfTitle={shelfTitle}
        patnerName={patncNm}
        contentId={showId}
        contentTitle={showNm}
        catNm={selectedCatNm}
      />
    </Container>
  );
};

export default memo(RecommendedShowsContents);
