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

import { useDispatch } from "react-redux";

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 { panel_names } from "../../../../utils/Config";
import css from "./FeaturedCreatorsContents.module.less";
import FeaturedCreatorsProductList from "./FeaturedCreatorsProductList/FeaturedCreatorsProductList";

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

const FeaturedCreatorsContents = ({
  barndCreatorsShowInfoItem,
  contentsIndex,
  handleItemFocus,
  selectedHstNm,
  selectedPatnrId,
  spotlightId,
}) => {
  const dispatch = useDispatch();

  const {
    brandCreatorsProductInfo,
    hstNm,
    patnrId,
    patncLogoPath,
    showId,
    showNm,
    thumbnailUrl,
    vtctpYn,
  } = barndCreatorsShowInfoItem;

  useEffect(() => {
    const containerId = "featured-creators-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, selectedHstNm, selectedPatnrId]);

  const handleClick = useCallback(() => {
    const section = "featured-creators";
    const x = 0;

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

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

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

  return (
    <Container
      className={css.container}
      data-wheel-point
      id={"featured-creators-contents-id-" + contentsIndex}
      spotlightId={`${spotlightId}-${contentsIndex}`}
    >
      <TItemCard
        catNm={hstNm}
        data-video-card={"featured-creators-video-card-" + contentsIndex}
        imageAlt={showNm}
        imageSource={thumbnailUrl}
        imgType={
          vtctpYn === "Y" ? IMAGETYPES.imgVertical : IMAGETYPES.imgHorizontal
        }
        logo={patncLogoPath}
        nonPosition
        onClick={handleClick}
        onFocus={handleFocus}
        productName={showNm}
        productId={showId}
        type={TYPES.videoShow}
      />
      <FeaturedCreatorsProductList
        brandCreatorsProductInfo={brandCreatorsProductInfo}
        contentsIndex={contentsIndex}
        handleItemFocus={handleItemFocus}
        hstNm={hstNm}
        patnrId={patnrId}
        selectedHstNm={selectedHstNm}
        selectedPatnrId={selectedPatnrId}
        showId={showId}
      />
    </Container>
  );
};

export default memo(FeaturedCreatorsContents);
