import React, { useCallback } from "react";

import { useDispatch } from "react-redux";

import Spotlight from "@enact/spotlight";

import { pushPanel, updatePanel } from "../../../../../actions/panelActions";
import TItemCard from "../../../../../components/TItemCard/TItemCard";
import {
  LOG_CONTEXT_NAME,
  LOG_MESSAGE_ID,
  panel_names,
} from "../../../../../utils/Config";
import SeriesImageCard from "../SeriesImageCard/SeriesImageCard";
import css from "./SeriesProductGrid.module.less";

const SeriesProductGrid = ({
  brandSeriesProductInfo,
  patnrId,
  handleFocus,
  seriesImgUrl,
  seriesNm,
  spotlightId,
  shelfOrder,
  shelfTitle,
  selectedPatnrNm,
}) => {
  const dispatch = useDispatch();

  const handleClick = useCallback(
    (prdtId) => () => {
      const lastFocusedTarget = Spotlight.getCurrent();
      const lastFocusedTargetId =
        lastFocusedTarget?.getAttribute("data-spotlight-id");

      if (lastFocusedTargetId) {
        const section = "series";
        const x = 0;

        dispatch(
          updatePanel({
            name: panel_names.FEATURED_BRANDS_PANEL,
            panelInfo: {
              lastFocusedTargetId,
              patnrId,
              section,
              x,
            },
          })
        );
      }

      dispatch(
        pushPanel({
          name: panel_names.DETAIL_PANEL,
          panelInfo: { patnrId, prdtId },
        })
      );
    },
    [dispatch, patnrId]
  );

  return (
    <div className={css.container}>
      <ul>
        <li>
          <SeriesImageCard
            imageAlt={seriesNm}
            imageSource={seriesImgUrl}
            spotlightDisabled
          />
        </li>
        {brandSeriesProductInfo.map(
          (
            {
              offerInfo,
              prdtId,
              prdtImgUrl,
              prdtNm,
              priceInfo,
              soldoutFlag,
              catNm,
              brndNm,
            },
            itemIndex
          ) => (
            <li key={`${spotlightId}-${itemIndex}`}>
              <TItemCard
                contextName={LOG_CONTEXT_NAME.FEATURED_BRANDS}
                messageId={LOG_MESSAGE_ID.SHELF_CLICK}
                shelfLocation={shelfOrder}
                shelfTitle={shelfTitle}
                shelfId={spotlightId}
                patnerName={selectedPatnrNm}
                order={itemIndex + 1}
                catNm={catNm}
                brndNm={brndNm}
                data-wheel-point={itemIndex >= 3}
                imageAlt={prdtNm}
                imageSource={prdtImgUrl}
                label={
                  itemIndex * 1 + 1 + " of " + brandSeriesProductInfo.length
                }
                lastLabel=" go to detail, button"
                offerInfo={offerInfo}
                onClick={handleClick(prdtId)}
                onFocus={itemIndex < 3 && handleFocus}
                priceInfo={priceInfo}
                productId={prdtId}
                productName={prdtNm}
                soldoutFlag={soldoutFlag}
                spotlightId={`${spotlightId}-${itemIndex}`}
              />
            </li>
          )
        )}
      </ul>
    </div>
  );
};

export default SeriesProductGrid;
