import React, { useCallback } from "react";

import { VirtualGridList } from "@enact/sandstone/VirtualList";

import TItemCard from "../../../../components/TItemCard/TItemCard";
import { scaleH, scaleW } from "../../../../utils/helperMethods";
import css from "./LiveProductList.module.less";

const LIST_ITEM_CONF = {
  ITEM_WIDTH: 660,
  ITEM_HEIGHT: 236,
  SAPCING: 12,
};

export default function LiveProductList({ brandProductInfo, onCardClick }) {
  const renderItem = useCallback(
    ({ index, ...rest }) => {
      const {
        prdtImgUrl,
        prdtId: productId,
        prdtNm: productName,
        priceInfo,
        soldoutFlag,
      } = brandProductInfo[index];

      return (
        <TItemCard
          key={productId}
          imageAlt={productName}
          imageSource={prdtImgUrl}
          onCardClick={onCardClick}
          priceInfo={priceInfo}
          productId={productId}
          productName={productName}
          {...rest}
          soldoutFlag={soldoutFlag}
          type="horizontal"
        />
      );
    },
    [brandProductInfo, onCardClick]
  );

  return (
    <div className={css.container}>
      {brandProductInfo && (
        <VirtualGridList
          className={css.virtualGridList}
          dataSize={brandProductInfo.length}
          direction="vertical"
          itemRenderer={renderItem}
          itemSize={{
            minWidth: scaleW(LIST_ITEM_CONF.ITEM_WIDTH),
            minHeight: scaleH(LIST_ITEM_CONF.ITEM_HEIGHT),
          }}
          noScrollByWheel
          scrollMode="translate"
          spacing={scaleW(LIST_ITEM_CONF.SAPCING)}
          verticalScrollbar="hidden"
        />
      )}
    </div>
  );
}
