import React, { useCallback } from "react";

import classNames from "classnames";
import { useSelector } from "react-redux";

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

import noCouponImg from "../../../../assets/images/img-checkout-coupon@3x.png";
import TIconButton from "../../../components/TIconButton/TIconButton";
import TVirtualGridList from "../../../components/TVirtualGridList/TVirtualGridList";
import { $L } from "../../../utils/helperMethods";
import OffersPromotionItemCard, {
  SIZES,
} from "../components/OffersPromotionItemCard";
import css from "./FixedSideBar.module.less";

const SideBarContainer = SpotlightContainerDecorator("div");

export default function FixedSideBar({ closeSideBar, offerSideBarOpen }) {
  const orderItemList = useSelector(
    (state) => state.checkout?.checkoutData?.productList
  );
  const selectedCoupons = useSelector(
    (state) => state.checkout.selectedCoupons
  ); // 선택된 쿠폰 정보

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

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

  return (
    <>
      <div className={classNames(css.bgLayer)} onClick={closeSideBar} />
      <SideBarContainer
        className={classNames(css.fixedSideBar)}
        spotlightRestrict="self-only"
      >
        <div className={css.sideMainTitle}>
          <TIconButton className={css.backButton} onClick={closeSideBar} />
          <h2 className={css.title}>{$L("OFFERS & PROMOTION")}</h2>
        </div>
        <div className={css.sideCoupon}>
          <div className={css.right}>COUPON</div>
        </div>

        <div className={classNames(css.sideItemList, css.hasCoupon)}>
          <div className={css.sideItemTitle}>ITEM COUPON</div>
          {orderItemList && orderItemList.length > 0 ? (
            <TVirtualGridList
              className={css.grid}
              itemRenderer={renderItem}
              dataSize={orderItemList.length}
              itemWidth={SIZES.itemWidth}
              itemHeight={SIZES.itemHeight}
              spacing={SIZES.spacing}
            />
          ) : (
            <div className={css.noRegiCoupon}>
              <div className={css.noRegiCouponBg}></div>
              <div className={css.noRegiCouponInfo}>
                <img src={noCouponImg} />
                <p>There are no registered coupons.</p>
              </div>
            </div>
          )}
        </div>
      </SideBarContainer>
    </>
  );
}
