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

import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";

import { LOG_MENU } from "../../../utils/Config";
import { SpotlightIds } from "../../../utils/SpotlightIds";
import css from "./PopularShowIndicator.module.less";
import PopularProductList from "./PopularShowVerticalContents/PopularProductList";
import PopularVideoCard from "./PopularVideoCard/PopularVideoCard";

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

const PopularShowIndicator = ({
  topInfos,
  selectedIndex,
  onSpotlightDown,
  onSpotlightRight,
  handleItemFocus,
  handleItemClick,
  currentShelf,
  isOnTop,
}) => {
  const {
    thumbnailUrl960,
    showNm,
    disclaimer,
    expsOrd,
    patnrId,
    vtctpYn,
    catCd,
    showId,
    patncNm,
  } = topInfos[selectedIndex];

  const isVertical = Boolean(vtctpYn === "Y");

  const _handleItemFocus = useCallback(() => {
    if (handleItemFocus)
      handleItemFocus(LOG_MENU.TRENDING_NOW_POPULAR_SHOWS, currentShelf);
  }, [handleItemFocus]);

  const _handleItemClick = useCallback(() => {
    if (handleItemClick) handleItemClick();
  }, [handleItemClick]);

  return (
    <Container className={css.popularContainer}>
      <PopularVideoCard
        disclaimer={disclaimer}
        expsOrd={expsOrd}
        handleItemClick={_handleItemClick}
        handleItemFocus={_handleItemFocus}
        isOnTop={isOnTop}
        lgCatCd={catCd}
        onSpotlightDown={onSpotlightDown}
        patncNm={patncNm}
        patnrId={patnrId}
        showId={showId}
        showNm={showNm}
        spotlightId={SpotlightIds.TRENDING_NOW_POPULAR_VIDEO}
        thumbnailType={isVertical ? "vertical" : "horizontal"}
        thumbnailImgPath={thumbnailUrl960}
        selectedIndex={selectedIndex}
        currentShelf={currentShelf}
      />
      <PopularProductList
        handleItemClick={_handleItemClick}
        handleItemFocus={_handleItemFocus}
        onSpotlightRight={onSpotlightRight}
        onSpotlightDown={onSpotlightDown}
        selectedIndex={selectedIndex}
        topInfo={topInfos[selectedIndex]}
        thumbnailImgPath={thumbnailUrl960}
        currentShelf={currentShelf}
      />
    </Container>
  );
};

export default memo(PopularShowIndicator);
