import React, { useCallback } from "react";

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

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

import defaultImageShow from "../../../../../assets/images/img-thumb-empty-product@3x.png";
import { startVideoPlayer } from "../../../../actions/playActions";
import CustomImage from "../../../../components/CustomImage/CustomImage";
import NoResultsCategoryShows from "../NoResultsCategory/NoResultsCategoryShows";
import css from "./ShowContents.module.less";
import ShowLists from "./ShowLists/ShowLists";
import ShowProductContents from "./ShowProductContents/ShowProductContents";

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

export default function ShowContents({ onClick }) {
  const dispatch = useDispatch();
  const showContentDatas = useSelector((state) => state.main?.subCategoryData);
  const topShowInfo = useSelector((state) => state.main?.topShowInfo);
  const { categoryShowInfos, partnerInfos } = showContentDatas || {};

  const _handleItemClick = useCallback(
    (patnrId, showId, lgCatCd, showUrl) => (ev) => {
      onClick && onClick(ev);
      dispatch(
        startVideoPlayer({
          showId,
          patnrId,
          shptmBanrTpNm: "VOD",
          lgCatCd,
          modal: false,
        })
      );
    },
    [onClick]
  );

  return (
    <>
      {showContentDatas &&
        categoryShowInfos &&
        categoryShowInfos?.subCatShowList?.length > 0 && (
          <>
            {topShowInfo && (
              <>
                <h1
                  className={css.topsTitle}
                  aria-label={topShowInfo.showNm + ", Heading2"}
                >
                  {topShowInfo.showNm}
                </h1>
                <Container className={css.topShowContainer}>
                  <SpottableVideoContainer
                    className={css.videoContainer}
                    onClick={_handleItemClick(
                      topShowInfo.patnrId,
                      topShowInfo.showId,
                      categoryShowInfos.lgCatCd,
                      topShowInfo.showUrl
                    )}
                    spotlightId={"category-topshow"}
                    aria-label={"1st, " + topShowInfo.showNm}
                  >
                    <CustomImage
                      alt={topShowInfo.showNm}
                      delay={0}
                      src={topShowInfo.thumbnailUrl}
                      fallbackSrc={defaultImageShow}
                    />
                  </SpottableVideoContainer>
                  <ShowProductContents onClick={onClick} />
                </Container>
              </>
            )}
            <ShowLists onClick={onClick} />
          </>
        )}
      {categoryShowInfos && categoryShowInfos.subCatShowList?.length === 0 && (
        <NoResultsCategoryShows />
      )}
    </>
  );
}
