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

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

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

import { pushPanel, updatePanel } from "../../../../actions/panelActions";
import TItemCard, { TYPES } from "../../../../components/TItemCard/TItemCard";
import TVirtualGridList from "../../../../components/TVirtualGridList/TVirtualGridList";
import useScrollTo from "../../../../hooks/useScrollTo";
import { panel_names } from "../../../../utils/Config";
import { getTranslate3dValueByDirection } from "../../../../utils/helperMethods";
import css from "./ShopNowProductList.module.less";

const ShopNowProductList = ({ selectedRoomThemeInfo }) => {
  const dispatch = useDispatch();
  const { getScrollTo, scrollTop } = useScrollTo();

  const panelInfo = useSelector((state) => state.panels.panels[1]?.panelInfo);

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

  const { roomThemeProducts } = selectedRoomThemeInfo;

  useEffect(() => {
    if (!panelInfo?.y) return;

    const scrollTopJobValue = scrollTopJob.current;
    const { y } = panelInfo;

    scrollTopJobValue.start(() => scrollTop({ y, animate: false }));

    return () => scrollTopJobValue.stop();
  }, [panelInfo, scrollTop]);

  useEffect(() => scrollTop({ animate: false }), [selectedRoomThemeInfo]);

  const handleClick = useCallback(
    (patnrId, prdtId) => (e) => {
      const tItemCard = e.currentTarget;

      const yContainer = tItemCard?.parentNode?.parentNode;

      if (yContainer) {
        const y = getTranslate3dValueByDirection(yContainer, false);

        dispatch(
          updatePanel({
            name: panel_names.IMAGE_PANEL,
            panelInfo: {
              targetId: null,
              y,
            },
          })
        );
      }

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

  const renderItem = useCallback(
    ({ index, ...rest }) => {
      const { offerInfo, patnrId, prdtId, prdtImgUrl, prdtNm, priceInfo } =
        roomThemeProducts[index];

      return (
        <TItemCard
          className={css.tItemCard}
          imageAlt={prdtNm}
          imageSource={prdtImgUrl}
          onClick={handleClick(patnrId, prdtId)}
          offerInfo={offerInfo}
          priceInfo={priceInfo}
          productId={prdtId}
          productName={prdtNm}
          type={TYPES.horizontal}
          {...rest}
        />
      );
    },
    [handleClick, roomThemeProducts]
  );

  return (
    <div className={css.container}>
      {roomThemeProducts && (
        <TVirtualGridList
          cbScrollTo={getScrollTo}
          className={css.tVirtualGridList}
          dataSize={roomThemeProducts.length}
          itemHeight={236}
          itemWidth={540}
          spacing={12}
          renderItem={renderItem}
        />
      )}
    </div>
  );
};

export default memo(ShopNowProductList);
