import React from "react";

import { useSelector } from "react-redux";

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

import css from "./ShowContents.module.less";
import ShowLists from "./ShowLists/ShowLists";
import ShowProductContents from "./ShowProductContents/ShowProductContents";

const SpottableVideoContainer = Spottable("div");

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

  console.log("showContentDatas", showContentDatas);

  return (
    <>
      {showContentDatas &&
        topShowInfo &&
        categoryShowInfos &&
        categoryShowInfos.length > 0 && (
          <>
            <h1 className={css.topsTitle}>{topShowInfo.showNm}</h1>
            <div className={css.topShowContainer}>
              <SpottableVideoContainer className={css.videoContainer}>
                <img src={topShowInfo.thumbnailUrl} alt={topShowInfo.showNm} />
              </SpottableVideoContainer>
              <ShowProductContents />
            </div>
            <div>
              <ShowLists />
            </div>
          </>
        )}
    </>
  );
}
