import React, { useCallback } from "react";

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

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

import TItemCard, {
  IMAGETYPES,
  TYPES,
} from "../../../../../components/TItemCard/TItemCard";
import { panel_names } from "../../../../../utils/Config";
import css from "./ShowLists.module.less";
import { startVideoPlayer } from "../../../../../actions/playActions";
import { SpotlightIds } from "../../../../../utils/SpotlightIds";
import TVirtualGridList from "../../../../../components/TVirtualGridList/TVirtualGridList";

const Container = SpotlightContainerDecorator(
  { enterTo: null },
  "div"
);

export default function ShowLists({ onClick }) {
  const showListDatas = useSelector(
    (state) => state.main.subCategoryData?.categoryShowInfos
  );
  const showListDatasItem = useSelector(
    (state) => state.main.subCategoryData?.categoryShowInfos?.subCatShowList
  );
  const dispatch = useDispatch();
  const _onClick = useCallback(
    (patnrId, showId, lgCatCd, showUrl) => (ev) => {
      onClick && onClick(ev);
      dispatch(
        startVideoPlayer({
          showId,
          patnrId,
          shptmBanrTpNm: "VOD",
          lgCatCd,
          modal: false,
        })
      );
    },
    [onClick]
  );

  return (
    <Container className={css.container} spotlightId={SpotlightIds.SHOW_CONTENTS_BOX}>
      {showListDatas && showListDatasItem.length > 0 &&
        showListDatasItem.map((item, index) => {
          const {
            showId,
            thumbnailUrl,
            showNm,
            vtctpYn,
            showUrl,
            patnrId,
            hstNm,
            patncLogoPath,
          } = item;
            return (
              <TItemCard
                type={TYPES.videoShow}
                key={showId}
                imageAlt={showId}
                imageSource={thumbnailUrl}
                productName={showNm}
                logo={patncLogoPath}
                imgType={
                  vtctpYn !== "Y" ? IMAGETYPES.imgHorizontal : IMAGETYPES.imgVertical
                }
                catNm={showListDatas.catNm}
                onClick={_onClick(patnrId, showId, showListDatas.lgCatCd, showUrl)}
                productId={showId}
                spotlightId={"categoryShowContents" + index}
                data-wheel-point="true"
                hstNm={hstNm}
              />
            );
        })
      }
    </Container>
  );
}
