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

import { useDispatch } from "react-redux";

import { startVideoPlayer } from "../../../../actions/playActions";
import TItemCard, {
  removeDotAndColon,
  TYPES,
} from "../../../../components/TItemCard/TItemCard";
import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGridList";
import useScrollTo from "../../../../hooks/useScrollTo";
import { scaleH } from "../../../../utils/helperMethods";
import { SpotlightIds } from "../../../../utils/SpotlightIds";
import css from "./PopularProductList.module.less";
import { LOG_CONTEXT_NAME, LOG_MESSAGE_ID } from "../../../../utils/Config";

const PopularProductList = ({
  handleItemClick,
  handleItemFocus,
  onSpotlightRight,
  onSpotlightDown,
  selectedIndex,
  thumbnailImgPath,
  topInfo,
  currentShelf,
}) => {
  const { getScrollTo, scrollTop } = useScrollTo();

  const dispatch = useDispatch();

  const {
    catCd,
    patnrId,
    productInfos,
    showId,
    showNm,
    catNm,
    patncNm,
    expsOrd,
  } = topInfo;

  useEffect(() => {
    let timer = setTimeout(() => scrollTop({ animate: false }));
    return () => clearTimeout(timer);
  }, [selectedIndex]);

  const _onSpotlightDown = useCallback(
    (ev) => {
      if (onSpotlightDown) onSpotlightDown(ev);
    },
    [onSpotlightDown]
  );

  const handleClick = useCallback(
    (index, offsetHour, prdtId) => () => {
      let y =
        index < 2
          ? 0
          : index === 2
          ? scaleH(208)
          : scaleH(index * 248 - 248 - 40);

      dispatch(
        startVideoPlayer({
          targetId: "spotlightId-" + removeDotAndColon(prdtId),
          offsetHour,
          showId,
          patnrId,
          prdtId,
          lgCatCd: catCd,
          shptmBanrTpNm: "VOD",
          index,
          modal: false,
          thumbnail: thumbnailImgPath,
          y,
        })
      );

      if (handleItemClick) handleItemClick();
    },
    [catCd, patnrId, showId, handleItemClick, thumbnailImgPath]
  );

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

  const renderItem = useCallback(
    ({ index, ...rest }) => {
      const {
        imgUrl,
        offerInfo,
        offsetHour,
        prdtId,
        prdtNm,
        priceInfo,
        soldoutFlag,
        brndNm,
      } = productInfos[index];

      return (
        <TItemCard
          contextName={LOG_CONTEXT_NAME.TRENDING_NOW}
          messageId={LOG_MESSAGE_ID.SHELF_CLICK}
          shelfLocation={expsOrd}
          shelfTitle={currentShelf}
          shelfId={SpotlightIds.TRENDING_NOW_POPULAR_SHOW}
          order={index + 1}
          contentId={showId}
          contentTitle={showNm}
          productId={prdtId}
          catNm={catNm}
          patnerName={patncNm}
          brandName={brndNm}
          imageAlt={prdtNm}
          imageSource={imgUrl}
          onClick={handleClick(index, offsetHour, prdtId)}
          onFocus={handleFocus}
          offerInfo={offerInfo}
          priceInfo={priceInfo}
          productName={prdtNm}
          soldoutFlag={soldoutFlag}
          className={css.itemCard}
          type={TYPES.horizontal}
          onSpotlightRight={onSpotlightRight}
          spotlightId={
            "spotlightId-" + "popularShow-" + removeDotAndColon(prdtId)
          }
          onSpotlightDown={_onSpotlightDown}
          label={index * 1 + 1 + " of " + productInfos.length}
          lastLabel=" go to detail, button"
          {...rest}
        />
      );
    },
    [productInfos, handleClick, handleFocus, _onSpotlightDown]
  );

  return (
    <div className={css.container}>
      {productInfos && (
        <TVirtualGridList
          cbScrollTo={getScrollTo}
          className={css.tVirtualGridList}
          dataSize={productInfos.length}
          itemHeight={236}
          itemWidth={600}
          spacing={12}
          renderItem={renderItem}
          noScrollByWheel={false}
          spotlightId={SpotlightIds.TRENDING_NOW_POPULAR_GRID_LIST}
        />
      )}
    </div>
  );
};

export default memo(PopularProductList);
