import React, { useCallback, useEffect, useRef } from "react";

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

import { Job } from "@enact/core/util";
import Spotlight from "@enact/spotlight";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";

import NoSearchResultsImage from "../../../../assets/images/searchpanel/img-search-nodata.png";
import { pushPanel, updatePanel } from "../../../actions/panelActions";
import SectionTitle from "../../../components/SectionTitle/SectionTitle";
import TItemCard from "../../../components/TItemCard/TItemCard";
import { panel_names } from "../../../utils/Config";
import { $L } from "../../../utils/helperMethods";
import { SpotlightIds } from "../../../utils/SpotlightIds";
import css from "./NoSearchResults.module.less";

const ContainerBasic = SpotlightContainerDecorator(
  { enterTo: "last-focused" },
  "div"
);

export default function NoSearchResults() {
  const dispatch = useDispatch();
  const bestSellerDatas = useSelector(
    (state) => state.product.bestSellerData.bestSeller
  );
  const searchDatas = useSelector((state) => state.search.searchDatas);

  const spotJob = useRef(new Job((func) => func(), 0));

  const handleCardClick = useCallback(
    (item) => () => {
      const c = Spotlight.getCurrent();

      let targetSpotlightId = null;

      if (c) {
        targetSpotlightId = c.getAttribute("data-spotlight-id");
      }

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

      dispatch(
        updatePanel({
          name: panel_names.SEARCH_PANEL,
          panelInfo: {
            currentSpot: targetSpotlightId,
          },
        })
      );
    },
    [dispatch]
  );

  useEffect(() => {
    const spotJobValue = spotJob.current;
    spotJobValue.start(() => {
      if (searchDatas && Object.entries(searchDatas) <= 0) {
        Spotlight.focus("search-input-box");
      }
    });
    return () => {
      spotJobValue.stop();
    };
  }, [searchDatas]);

  return (
    <div className={css.container}>
      <div className={css.info}>
        <div className={css.imageBox}>
          <img
            src={NoSearchResultsImage}
            alt="Sorry, no results matching your search."
          />
        </div>
        <p>{$L("Sorry, no results matching your search.")}</p>
      </div>
      {bestSellerDatas && bestSellerDatas.length > 0 && (
        <ContainerBasic
          className={css.bestSellerWrap}
          data-wheel-point={true}
          spotlightId={SpotlightIds.SEARCH_BESTSELLER}
        >
          <SectionTitle title={$L("BEST SELLER")} />
          <div>
            {bestSellerDatas &&
              bestSellerDatas
                .slice(0, 5)
                .map((bestSeller, index) => (
                  <TItemCard
                    key={bestSeller.rankOrd}
                    imageSource={bestSeller.imgUrl}
                    imageAlt={bestSeller.prdtNm}
                    productName={bestSeller.prdtNm}
                    priceInfo={bestSeller.priceInfo}
                    productId={bestSeller.prdtId}
                    rank={bestSeller.rankOrd}
                    onClick={handleCardClick(bestSeller)}
                    isBestSeller
                  />
                ))}
          </div>
        </ContainerBasic>
      )}
    </div>
  );
}
