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 { 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, spotlightId, handleItemFocus }) => {
  const { getScrollTo, scrollLeft } = useScrollTo();
  const { handleScrollReset, handleStopScrolling } = useScrollReset(
    scrollLeft,
    true
  );

  const dispatch = useDispatch();

  const { cursorVisible } = useSelector((state) => state.common.appStatus);

  const bestSellerDatas = useSelector(
    (state) => state.product.bestSellerData?.bestSeller
  );

  const [drawChk, setDrawChk] = useState(false);

  const orderStyle = useMemo(() => ({ order: order }), [order]);

  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();
      }
    },
    [handleStopScrolling]
  );

  const handleFocus = useCallback(
    (itemIndex) => () => {
      _handleItemFocus();

      if (itemIndex === 0) {
        handleScrollReset();
      }

      if (cursorVisible) {
        return;
      }
    },
    [
      cursorVisible,
      _handleItemFocus,
      handleScrollReset,
      scrollTopBody
    ]
  );

  const handleScrollRight = (e) => {
    const container = e.currentTarget?.parentNode;
    const x = container.scrollWidth - container.clientWidth + 60;

    setTimeout(() => {
      scrollLeft({ x, animate: true });
    });
  };

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

  return (
    <Container className={css.bestSellerWrap} style={orderStyle} spotlightId={spotlightId}>
      <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
            ) => {
              const rankText =
                rankOrd === 1
                  ? rankOrd + "st"
                  : rankOrd === 2
                  ? rankOrd + "nd"
                  : rankOrd === 3
                  ? rankOrd + "rd"
                  : rankOrd + "th";
              return (
                <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}
                  firstLabel={rankText}
                  label={itemIndex * 1 + 1 + " of " + bestSellerDatas.length}
                  lastLabel=" go to detail, button"
                />
              );
            }
          )}

        {drawChk && (
          <div className={css.addItem} onFocus={handleScrollRight}>
            <SpottableComponent
              className={css.displayBox}
              onClick={handleMoreCardClick}
              spotlightId={"bestseller-item-more-btn"}
              aria-label="See more button"
            ></SpottableComponent>
          </div>
        )}
      </TScroller>
    </Container>
  );
};

export default BestSeller;