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

import { useDispatch } 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, {
  IMAGETYPES,
  TYPES,
} from "../../../../components/TItemCard/TItemCard";
import {
  LOG_CONTEXT_NAME,
  LOG_MESSAGE_ID,
  panel_names,
} from "../../../../utils/Config";
import css from "./LiveChannelsHorizontalContents.module.less";
import LiveChannelsHorizontalProductList from "./LiveChannelsHorizontalProductList/LiveChannelsHorizontalProductList";

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

const LiveChannelsHorizontalContents = ({
  brandChanInfoItem,
  contentsIndex,
  handleItemFocus,
  selectedPatnrId,
  spotlightId,
  shelfOrder,
  shelfTitle,
}) => {
  const dispatch = useDispatch();

  const {
    brandProductInfo,
    chanId,
    // hstNm,
    lgCatNm,
    logoImgPath,
    patnrId,
    showId,
    showNm,
    showUrl,
    thumbnailImgPath,
    vtctpYn,
    chanNm,
    brndNm,
  } = brandChanInfoItem;

  const isVertical = vtctpYn === "Y";

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

  useEffect(() => {
    const containerId = "live-channels-horizontal-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, selectedPatnrId]);

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

    if (lastFocusedTargetId) {
      const section = "live-channels-horizontal";
      const x = 0;

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

    dispatch(
      startVideoPlayer({
        chanId,
        modal: false,
        patnrId,
        showId,
        showUrl,
        shptmBanrTpNm: "LIVE",
      })
    );
  }, [chanId, dispatch, patnrId, showId, showUrl]);

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

  return (
    <Container
      className={css.container}
      data-wheel-point={contentsIndex > 0}
      id={"live-channels-horizontal-contents-id-" + contentsIndex}
      spotlightId={`${spotlightId}-${contentsIndex}`}
    >
      <TItemCard
        contextName={LOG_CONTEXT_NAME.FEATURED_BRANDS}
        messageId={LOG_MESSAGE_ID.SHELF_CLICK}
        catNm={lgCatNm}
        order={rankOrd}
        patnerName={chanNm}
        brandName={brndNm}
        shelfLocation={shelfOrder}
        shelfTitle={shelfTitle}
        shelfId={spotlightId}
        contentId={showId}
        contentTitle={showNm}
        data-video-card={"live-channels-horizontal-video-card-" + contentsIndex}
        imageAlt={showNm}
        imageSource={thumbnailImgPath}
        imgType={isVertical ? IMAGETYPES.imgVertical : IMAGETYPES.imgHorizontal}
        isLive
        logo={logoImgPath}
        nonPosition
        onClick={handleClick}
        onFocus={handleFocus}
        productName={showNm}
        productId={showId}
        type={TYPES.videoShow}
        firstLabel={rankText + "SHOW "}
      />
      <LiveChannelsHorizontalProductList
        chanNm={chanNm}
        showNm={showNm}
        brandProductInfo={brandProductInfo}
        chanId={chanId}
        contentsIndex={contentsIndex}
        handleItemFocus={handleItemFocus}
        patnrId={patnrId}
        selectedPatnrId={selectedPatnrId}
        showId={showId}
        showUrl={showUrl}
        shelfOrder={shelfOrder}
        shelfTitle={shelfTitle}
        shelfId={spotlightId}
        order={rankOrd}
      />
    </Container>
  );
};

export default memo(LiveChannelsHorizontalContents);
