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

import { useSelector } from "react-redux";

import { convertUtcToLocal } from "../../../../../components/MediaPlayer/util";
import {
  $L,
  convertToTimeFormat,
  formatCurrencyValue,
  getFormattingCardNo,
} from "../../../../../utils/helperMethods";
import css from "./OrderListCardTopContents.module.less";

export default memo(function OrderListCardTopContents({ paymentInfo }) {
  const {
    cardKnd,
    cardNo,
    regDt,
    totProdQty,
    totProdPrc,
    totDcAmt,
    totOptPrc,
    totDlvrAmt,
    ordTotTaxAmt,
    currSign,
    currSignLoc,
  } = paymentInfo || {};

  return (
    <div className={css.orderCardTopContents}>
      <div className={css.left}>
        <p className={css.leftTitle}>{$L("PAYMENT METHOD")}</p>
        <span className={css.leftDesc}>
          {cardKnd} / {getFormattingCardNo(cardNo)}
        </span>
        <p className={css.leftTitle}>{$L("ORDER DATE")}</p>
        <span className={css.leftDesc}>
          {convertToTimeFormat(convertUtcToLocal(regDt), true)}
        </span>
      </div>
      <table className={css.table}>
        <thead>
          <tr>
            <th>{$L("ITEM")}</th>
            <th>{$L("ITEM TOTAL")}</th>
            <th>{$L("S&H")}</th>
            <th>{$L("TAX")}</th>
            <th>{$L("COUPON")}</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            {/* <td>{totProdQty}</td> */}
            <td>1</td>
            <td>{formatCurrencyValue(totProdPrc, currSign, currSignLoc)}</td>
            <td>{formatCurrencyValue(totDlvrAmt, currSign, currSignLoc)}</td>
            <td>{formatCurrencyValue(ordTotTaxAmt, currSign, currSignLoc)}</td>
            <td>
              {formatCurrencyValue(totDcAmt, currSign, currSignLoc, true)}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  );
});
