import React, { memo } from "react";

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

import css from "./FeaturedCategoryContents.module.less";
import FeaturedCategoryProductGrid from "./FeaturedCategoryProductGrid/FeaturedCategoryProductGrid";
import FeaturedCategoryProductList from "./FeaturedCategoryProductList/FeaturedCategoryProductList";

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

const FeaturedCategoryContents = ({
  brandCategoryProductDetailInfoItem,
  contentsIndex,
  handleItemFocus,
  isCarousel,
  selectedCatCdLv1,
  selectedCatCdLv2,
  selectedCategoryLv2Infos,
  selectedPatnrId,
  spotlightId,
  shelfOrder,
  shelfTitle,
  selectedPatncNm,
}) => {
  const { brandCategoryProductDetailInfo, catCd, catNm, patnrId } =
    brandCategoryProductDetailInfoItem;

  return (
    <Container
      className={css.container}
      data-wheel-point
      spotlightId={`${spotlightId}-${contentsIndex}`}
    >
      <h3 data-category-subtitle-index={contentsIndex}>{catNm}</h3>
      {isCarousel ? (
        <FeaturedCategoryProductList
          brandCategoryProductDetailInfo={brandCategoryProductDetailInfo}
          catCd={catCd}
          contentsIndex={contentsIndex}
          handleItemFocus={handleItemFocus}
          patnrId={patnrId}
          selectedCatCdLv1={selectedCatCdLv1}
          selectedCatCdLv2={selectedCatCdLv2}
          selectedCategoryLv2Infos={selectedCategoryLv2Infos}
          selectedPatnrId={selectedPatnrId}
          spotlightId={spotlightId}
          shelfOrder={shelfOrder}
          shelfTitle={shelfTitle}
          selectedPatncNm={selectedPatncNm}
          catNm={catNm}
        />
      ) : (
        <FeaturedCategoryProductGrid
          brandCategoryProductDetailInfo={brandCategoryProductDetailInfo}
          catCd={catCd}
          contentsIndex={contentsIndex}
          handleItemFocus={handleItemFocus}
          patnrId={patnrId}
          selectedCatCdLv1={selectedCatCdLv1}
          selectedCatCdLv2={selectedCatCdLv2}
          selectedCategoryLv2Infos={selectedCategoryLv2Infos}
          spotlightId={spotlightId}
          shelfOrder={shelfOrder}
          shelfTitle={shelfTitle}
          selectedPatncNm={selectedPatncNm}
          catNm={catNm}
        />
      )}
    </Container>
  );
};

export default memo(FeaturedCategoryContents);
