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

import classNames from "classnames";

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

import css from "./SeriesContents.module.less";
import SeriesImageCard from "./SeriesImageCard/SeriesImageCard";
import SeriesProductGrid from "./SeriesProductGrid/SeriesProductGrid";
import SeriesProductList from "./SeriesProductList/SeriesProductList";

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

const SeriesContents = ({
  brandSeriesProductInfo,
  contentsIndex,
  handleItemFocus,
  isCarousel = false,
  patnrId,
  selectedPatnrId,
  selectedPatnrNm,
  selectedSeriesId,
  seriesImgUrl,
  seriesNm,
  shelfOrder,
  shelfTitle,
  spotlightId,
}) => {
  const rankOrd = contentsIndex * 1 + 1;
  const rankText =
    rankOrd === 1
      ? rankOrd + "st"
      : rankOrd === 2
      ? rankOrd + "nd"
      : rankOrd === 3
      ? rankOrd + "rd"
      : rankOrd + "th";

  const handleFocus = useCallback(() => {
    if (handleItemFocus) handleItemFocus();
  }, [handleItemFocus]);

  return (
    <Container
      className={classNames(
        css.container,
        isCarousel ? css.listContainer : css.gridContainer
      )}
      data-wheel-point
      spotlightId={`${spotlightId}-${contentsIndex}`}
    >
      <h3 data-series-subtitle={seriesNm}>{seriesNm}</h3>
      {isCarousel ? (
        <div>
          <SeriesImageCard
            imageAlt={seriesNm}
            imageSource={seriesImgUrl}
            seriesNm={seriesNm}
            spotlightDisabled
            ariaLabel={rankText + " SHOW " + seriesNm}
          />
          <SeriesProductList
            brandSeriesProductInfo={brandSeriesProductInfo}
            contentsIndex={contentsIndex}
            handleFocus={handleFocus}
            patnrId={patnrId}
            selectedPatnrNm={selectedPatnrNm}
            selectedSeriesId={selectedSeriesId}
            selectedPatnrId={selectedPatnrId}
            seriesNm={seriesNm}
            shelfOrder={shelfOrder}
            shelfTitle={shelfTitle}
            spotlightId={spotlightId}
          />
        </div>
      ) : (
        <SeriesProductGrid
          brandSeriesProductInfo={brandSeriesProductInfo}
          patnrId={patnrId}
          handleFocus={handleFocus}
          seriesImgUrl={seriesImgUrl}
          seriesNm={seriesNm}
          spotlightId={spotlightId}
          shelfOrder={shelfOrder}
          shelfTitle={shelfTitle}
          selectedPatnrNm={selectedPatnrNm}
        />
      )}
    </Container>
  );
};

export default memo(SeriesContents);
