import React, { useCallback } from "react";

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

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

import NoResultsImage from "../../../../../assets/images/searchpanel/img-search-nodata.png";
import { pushPanel } from "../../../../actions/panelActions";
import SectionTitle from "../../../../components/SectionTitle/SectionTitle";
import TItemCard from "../../../../components/TItemCard/TItemCard";
import TScroller from "../../../../components/TScroller/TScroller";
import { panel_names } from "../../../../utils/Config";
import { $L } from "../../../../utils/helperMethods";
import css from "./NoResultsCategoryItems.module.less";

const Container = SpotlightContainerDecorator({ enterTo: null }, "div");
export default function NoResultsCategoryItems() {
  const dispatch = useDispatch();
  const bestSellerDatas = useSelector(
    (state) => state.product.bestSellerData.bestSeller
  );
  const handleCardClick = useCallback(
    (patnrId, prdtId) => () => {
      dispatch(
        pushPanel({
          name: panel_names.DETAIL_PANEL,
          panelInfo: { patnrId: patnrId, prdtId: prdtId },
        })
      );
    },
    [dispatch]
  );
  return (
    <Container
      className={css.container}
      spotlightId={"category_noResult"}
      data-wheel-point={true}
    >
      <div className={css.info}>
        <div className={css.imageBox}>
          <img src={NoResultsImage} alt="THERE ARE NO SHOWS AVAILABLE" />
        </div>
        <p aria-lable="THERE ARE NO ITEMS AVAILABLE">
          {$L("THERE ARE NO ITEMS AVAILABLE")}
        </p>
      </div>
      <div className={css.bestSellerWrap}>
        <SectionTitle title={$L("BEST SELLER")} />
        <TScroller
          className={css.categoryBestSeller}
          direction="horizontal"
          noScrollByWheel
        >
          {bestSellerDatas &&
            bestSellerDatas.map((bestSeller, index) => {
              const rankText =
                bestSeller.rankOrd === 1
                  ? bestSeller.rankOrd + "st"
                  : bestSeller.rankOrd === 2
                  ? bestSeller.rankOrd + "nd"
                  : bestSeller.rankOrd === 3
                  ? bestSeller.rankOrd + "rd"
                  : bestSeller.rankOrd + "th";
              return (
                <TItemCard
                  key={bestSeller.rankOrd}
                  imageSource={bestSeller.imgUrl}
                  imageAlt={bestSeller.prdtNm}
                  productName={bestSeller.prdtNm}
                  priceInfo={bestSeller.priceInfo}
                  offerInfo={bestSeller.offerInfo}
                  onClick={handleCardClick(
                    bestSeller.patnrId,
                    bestSeller.prdtId
                  )}
                  rank={bestSeller.rankOrd}
                  firstLabel={rankText}
                  label={index * 1 + 1 + " of 5"}
                  lastLabel=" go to detail, button"
                  isBestSeller
                />
              );
            })}
        </TScroller>
      </div>
    </Container>
  );
}
