import React, { memo, useMemo } from "react";

import { useSelector } from "react-redux";

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

import CustomImage from "../../../components/CustomImage/CustomImage";
import { $L, formatCurrencyValue } from "../../../utils/helperMethods";
import css from "./OrderItemCard.module.less";

const OrderItemContainer = Spottable("div");

export const SIZES = {
  itemWidth: 660,
  itemHeight: 333,
  spacing: 12,
};

export default memo(function OrderItemCard({
  imgUrls,
  prdtNm,
  prodQty,
  prdtOpt,
  patncLogPath,
  prdtId,
  currSign,
  currSignLoc,
  shippingCharge,
  auctProdYn,
  auctFinalPriceChgDt,
  expsPrdtNo,
  ...rest
}) {
  const priceTotalData = useSelector(
    (state) => state.checkout?.checkoutTotalData
  );

  const formattedPrices = useMemo(() => {
    return {
      discounted: priceTotalData?.totProdPrc
        ? formatCurrencyValue(priceTotalData?.totProdPrc, currSign, currSignLoc)
        : "-",

      shipping: priceTotalData?.totDlvrAmt
        ? formatCurrencyValue(priceTotalData?.totDlvrAmt, currSign, currSignLoc)
        : "-",
    };
  }, [priceTotalData, currSign, currSignLoc]);

  return (
    <OrderItemContainer className={css.itemContainer} {...rest}>
      <div className={css.itemHeader}>
        <CustomImage src={patncLogPath} alt="" className={css.patnrLogo} />
        <h2 className={css.prdtId}>ID: {expsPrdtNo}</h2>
      </div>
      <div className={css.itemContents}>
        <div className={css.leftContents}>
          <CustomImage
            src={imgUrls[0].imgUrl}
            alt=""
            className={css.itemImage}
          />
        </div>
        <div className={css.rightContents}>
          <p className={css.prdtNm}>{prdtNm}</p>
          <p className={css.options}>
            {prdtOpt && prdtOpt[0] && prdtOpt[0].optNm
              ? `${prdtOpt[0].optNm} / `
              : " "}
            {prdtOpt && prdtOpt[0] && prdtOpt[0].prodOptCval
              ? prdtOpt[0].prodOptCval
              : " "}
          </p>
          <p className={css.prodQty}>Qty: {prodQty}</p>
          <p className={css.priceWrap}>
            <span className={css.itemPrice}>
              <span className={css.discountedPrice}>
                {formattedPrices.discounted}
              </span>
              {/* {originalPrice && originalPrice !== discountedPrice && (
                <span className={css.originalPrice}>
                  {formattedPrices.original}
                </span>
              )} */}
            </span>
            <span className={css.shippingPrice}>
              {`${$L("S&H")}: `}
              {formattedPrices.shipping}
            </span>
            {auctProdYn === "Y" && !auctFinalPriceChgDt && (
              <div className={css.noticeBox}>
                {$L("Purchased products will be paid at the final price.")}
              </div>
            )}
          </p>
        </div>
      </div>
    </OrderItemContainer>
  );
});
