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

import { useSelector } from "react-redux";

import Spotlight from "@enact/spotlight";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";

import TIConButton from "../../../components/TIconButton/TIconButton";
import TVirtualGridList from "../../../components/TVirtualGridList/TVirtualGridList";
import usePriceInfo from "../../../hooks/usePriceInfo";
import { $L } from "../../../utils/helperMethods";
import OrderItemCard, { SIZES } from "../components/OrderItemCard";
import css from "./OrderItemsSideBar.module.less";

const SideBarContainer = SpotlightContainerDecorator("div");

export default function OrderItemsSideBar({ closeSideBar }) {
  const orderItemList = useSelector(
    (state) => state.checkout?.checkoutData?.productList
  );

  useEffect(() => {
    Spotlight.focus("orderItemSideBar_backButton");
  }, []);

  const renderItem = useCallback(
    ({ index, ...rest }) => {
      const item = orderItemList[index];

      return (
        <OrderItemCard
          {...rest}
          key={index}
          imgUrls={item.imgUrls}
          prdtNm={item.prdtNm}
          prodQty={item.prodQty}
          prdtOpt={item.prdtOpt}
          patncLogPath={item.patncLogPath}
          prdtId={item.prdtId}
          expsPrdtNo={item.expsPrdtNo}
          currSign={item.currSign}
          currSignLoc={item.currSignLoc}
          shippingCharge={item.shippingCharge}
          auctProdYn={item.auctProdYn}
          auctFinalPriceChgDt={item.auctFinalPriceChgDt}
        />
      );
    },
    [orderItemList]
  );

  return (
    <>
      <div className={css.bgLayer} onClick={closeSideBar} />
      <SideBarContainer className={css.container} spotlightRestrict="self-only">
        <div className={css.titleBox}>
          <TIConButton
            className={css.backButton}
            onClick={closeSideBar}
            spotlightId="orderItemSideBar_backButton"
          />
          <h2 className={css.title}>{$L("ORDER ITEMS")}</h2>
        </div>
        <div className={css.orderItemListsWrap}>
          {orderItemList && orderItemList.length > 0 ? (
            <TVirtualGridList
              className={css.grid}
              itemRenderer={renderItem}
              dataSize={orderItemList.length}
              itemWidth={SIZES.itemWidth}
              itemHeight={SIZES.itemHeight}
              spacing={SIZES.spacing}
            />
          ) : null}
        </div>
      </SideBarContainer>
      ;
    </>
  );
}
