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

import { useDispatch } from "react-redux";

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

import { setShowPopup } from "../../../../../actions/commonActions";
import TButton from "../../../../../components/TButton/TButton";
import * as Config from "../../../../../utils/Config";
import { $L } from "../../../../../utils/helperMethods";
import css from "./OrderListCard.module.less";
import OrderListCardStatus from "./OrderListCardStatus";
import OrderListCardTopContents from "./OrderListCardTopContents";

const OrderListCardContainer = SpotlightContainerDecorator(
  {
    enterTo: "last-focused",
    leaveFor: { left: "#tabLayout", right: "" },
  },
  "div"
);

export default memo(function OrderListCard({
  item,
  onClickBuyAgain,
  cancelItem = false,
  doSendLogOrderBtnClick,
  setSelectedCancelItem,
}) {
  const {
    ordNo,
    expsOrdNo,
    mbrNo,
    currSign,
    currSignLoc,
    ordPmtReqAmt,
    cardKnd,
    cardNo,
    regDt,
    totProdQty,
    totProdPrc,
    totDcAmt,
    totOptPrc,
    totDlvrAmt,
    ordTotTaxAmt,
    orderProductInfo,
  } = item || {};

  const paymentInfo = {
    cardKnd,
    cardNo,
    regDt,
    totProdQty,
    totProdPrc,
    totDcAmt,
    totOptPrc,
    totDlvrAmt,
    ordTotTaxAmt,
    currSign,
    currSignLoc,
    ordPmtReqAmt,
  };

  return (
    <OrderListCardContainer
      className={css.itemContainer}
      spotlightId={`spotId-${expsOrdNo}`}
      data-wheel-point={true}
    >
      <div className={css.cardHeader}>
        <h2 className={css.orderNumber}>
          {$L("ORDER NUMBER")} : <span className={css.ordNo}>{expsOrdNo}</span>
        </h2>
      </div>
      <OrderListCardTopContents paymentInfo={paymentInfo} />
      <div className={css.orderTotal}>
        <span className={css.orderTotalTitle}>{$L("ORDER TOTAL")}</span>
        <span className={css.orderTotalPrice}>
          {currSign} {ordPmtReqAmt}
        </span>
      </div>
      <OrderListCardStatus
        orderProductInfo={orderProductInfo?.[0]}
        paymentInfo={paymentInfo}
        onClickBuyAgain={onClickBuyAgain}
        cancelItem={cancelItem}
        doSendLogOrderBtnClick={doSendLogOrderBtnClick}
        ordNo={ordNo}
        mbrNo={mbrNo}
        setSelectedCancelItem={setSelectedCancelItem}
      />
    </OrderListCardContainer>
  );
});
