shoptime/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx

import React, { useCallback, useEffect, useMemo, useState } from "react";

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

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

import { pushPanel, updatePanel } from "../../../actions/panelActions";
import SectionTitle from "../../../components/SectionTitle/SectionTitle";
import TItemCard from "../../../components/TItemCard/TItemCard";
import TScroller from "../../../components/TScroller/TScroller";
import useScrollReset from "../../../hooks/useScrollReset";
import useScrollTo from "../../../hooks/useScrollTo";
import useScrollTopByDistance from "../../../hooks/useScrollTopByDistance";
import { panel_names } from "../../../utils/Config";
import { $L, scaleW } from "../../../utils/helperMethods";
import css from "./BestSeller.module.less";

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

const BestSeller = ({ order, scrollTopBody, panelInfo }) => {
  const dispatch = useDispatch();
  const bestSellerDatas = useSelector(
    (state) => state.product.bestSellerData?.bestSeller
  );
  const [drawChk, setDrawChk] = useState(false);
  const { getScrollTo, scrollLeft } = useScrollTo();
  const { handleScrollReset, handleStopScrolling } = useScrollReset(
    scrollLeft,
    true
  );
  const { scrollTopByDistance } = useScrollTopByDistance();
  const { cursorVisible } = useSelector((state) => state.common.appStatus);
  useEffect(() => {
    setDrawChk(true);
  }, [bestSellerDatas]);
  const handleCardClick = useCallback((patnrId, prdtId) => {
    dispatch(
      pushPanel(
        {
          name: panel_names.DETAIL_PANEL,
          panelInfo: { patnrId: patnrId, prdtId: prdtId },
        },
        [dispatch]
      )
    );
  });
  const handleMoreCardClick = useCallback(() => {
    dispatch(
      pushPanel(
        {
          name: panel_names.TRENDING_NOW_PANEL,
          panelInfo: {
            pageName: "BS",
          },
        },
        [dispatch]
      )
    );
  });

  const handleBlur = useCallback((itemIndex) => {
    if (itemIndex === 0) {
      handleStopScrolling();
    }
  }, []);

  const handleFocus = useCallback(
    (itemIndex) => {
      if (itemIndex === 0) {
        handleScrollReset();
      }

      if (cursorVisible) {
        return;
      }

      scrollTopByDistance(
        `[data-marker="scroll-marker"]`,
        `[data-title-index="homeBestSellerTitle"]`,
        scrollTopBody,
        36
      );
    },
    [cursorVisible]
  );

  const orderStyle = useMemo(() => ({ order: order }), [order]);
  const handleScrollRight = (e) => {
    const container = e.currentTarget?.parentNode;
    const x = container.scrollWidth - container.clientWidth;

    setTimeout(() => {
      scrollLeft({ x, animate: true });
    });
  };
  return (
    <Container className={css.bestSellerWrap} style={orderStyle}>
      <SectionTitle
        title={$L("BEST SELLER")}
        data-title-index="homeBestSellerTitle"
      />

      <TScroller
        className={css.homeBestSeller}
        direction="horizontal"
        cbScrollTo={getScrollTo}
        noScrollByWheel
      >
        {bestSellerDatas &&
          bestSellerDatas.map(
            (
              {
                prdtId,
                imgUrl,
                priceInfo,
                prdtNm,
                rankOrd,
                patnrId,
                offerInfo,
              },
              itemIndex
            ) => (
              <TItemCard
                key={prdtId}
                imageAlt={prdtId}
                imageSource={imgUrl}
                priceInfo={priceInfo}
                productName={prdtNm}
                isBestSeller={true}
                productId={prdtId}
                rank={rankOrd}
                onFocus={() => handleFocus(itemIndex)}
                onBlur={() => handleBlur(itemIndex)}
                onClick={() => handleCardClick(patnrId, prdtId)}
                offerInfo={offerInfo}
                spotlightId={"bestsellerItem" + itemIndex}
              />
            )
          )}

        {drawChk && (
          <SpottableComponent
            className={css.addItem}
            onClick={handleMoreCardClick}
            onFocus={handleScrollRight}
          ></SpottableComponent>
        )}
      </TScroller>
    </Container>
  );
};

export default BestSeller;