import React from 'react';
import classNames from 'classnames';
import { PisellEmpty } from '@pisell/materials';
import { formatAmount, locales } from '@pisell/utils';
import { formatLocalizedDateTime } from "../../../../utils";
import { resolvePaymentMethodName, usePaymentMethodNameMap } from "../../../../../pisellSalesManagement/hooks/usePaymentMethodNameMap";
import "./index.less";
function formatPaymentTime(record) {
  var value = record.payment_time || record.created_at;
  return formatLocalizedDateTime(value);
}
function getPaymentRecordMethod(record, paymentMethodNameMap) {
  return resolvePaymentMethodName(record, paymentMethodNameMap);
}
function getPaymentRecordAmount(record) {
  var _record$amount;
  return (_record$amount = record.amount) !== null && _record$amount !== void 0 ? _record$amount : 0;
}
function isRefundPaymentRecord(record) {
  var rawType = String(record.type || '').toLowerCase();
  return rawType.includes('refund') || Number(getPaymentRecordAmount(record)) < 0;
}
export function Pay(_ref) {
  var _ref2, _context$summary$summ;
  var context = _ref.context;
  var paymentMethodNameMap = usePaymentMethodNameMap();
  var tempOrder = context.sales.tempOrder;
  var summary = (_ref2 = (_context$summary$summ = context.summary.summary) !== null && _context$summary$summ !== void 0 ? _context$summary$summ : tempOrder === null || tempOrder === void 0 ? void 0 : tempOrder.summary) !== null && _ref2 !== void 0 ? _ref2 : null;
  var symbol = (tempOrder === null || tempOrder === void 0 ? void 0 : tempOrder.currency_symbol) || '$';
  var payments = Array.isArray(tempOrder === null || tempOrder === void 0 ? void 0 : tempOrder.payments) ? tempOrder === null || tempOrder === void 0 ? void 0 : tempOrder.payments : [];
  var overviewItems = [{
    key: 'total',
    label: locales.getText('pisell2.sale-detail.total'),
    value: summary === null || summary === void 0 ? void 0 : summary.total_amount
  }, {
    key: 'paid',
    label: locales.getText('pisell2.sale-detail.pay.paid'),
    value: summary === null || summary === void 0 ? void 0 : summary.order_paid_amount
  }, {
    key: 'refunded',
    label: locales.getText('pisell2.sale-detail.pay.refunded'),
    value: summary === null || summary === void 0 ? void 0 : summary.total_refund_amount,
    tone: 'warning'
  }, {
    key: 'toPay',
    label: locales.getText('pisell2.sale-detail.to-pay'),
    value: summary === null || summary === void 0 ? void 0 : summary.amount_gap
  }];
  return /*#__PURE__*/React.createElement("main", {
    className: "pisell-sale-detail-main pisell-sale-detail-pay-main"
  }, /*#__PURE__*/React.createElement("section", {
    className: "pisell-sale-detail-pay-overview"
  }, overviewItems.map(function (item) {
    var _item$value;
    return /*#__PURE__*/React.createElement("div", {
      key: item.key,
      className: classNames('pisell-sale-detail-pay-overview__item', {
        'pisell-sale-detail-pay-overview__item--warning': item.tone === 'warning'
      })
    }, /*#__PURE__*/React.createElement("span", {
      className: "pisell-sale-detail-pay-overview__label"
    }, item.label), /*#__PURE__*/React.createElement("span", {
      className: "pisell-sale-detail-pay-overview__value"
    }, formatAmount((_item$value = item.value) !== null && _item$value !== void 0 ? _item$value : 0, 2, symbol)));
  })), /*#__PURE__*/React.createElement("section", {
    className: "pisell-sale-detail-pay-timeline"
  }, payments.length ? payments.map(function (payment, index) {
    var isRefund = isRefundPaymentRecord(payment);
    var amount = getPaymentRecordAmount(payment);
    var signedAmount = isRefund ? -Math.abs(Number(amount)) : amount;
    return /*#__PURE__*/React.createElement("article", {
      key: payment.order_payment_id || index,
      className: classNames('pisell-sale-detail-pay-record', {
        'pisell-sale-detail-pay-record--refund': isRefund
      })
    }, /*#__PURE__*/React.createElement("div", {
      className: "pisell-sale-detail-pay-record__date"
    }, formatPaymentTime(payment)), /*#__PURE__*/React.createElement("div", {
      className: "pisell-sale-detail-pay-record__content"
    }, /*#__PURE__*/React.createElement("span", {
      className: "pisell-sale-detail-pay-record__title"
    }, isRefund ? locales.getText('pisell2.sale-detail.refund') : locales.getText('pisell2.sale-detail.pay.payment'), ' · ', getPaymentRecordMethod(payment, paymentMethodNameMap)), /*#__PURE__*/React.createElement("span", {
      className: "pisell-sale-detail-pay-record__amount"
    }, formatAmount(signedAmount, 2, symbol))));
  }) : /*#__PURE__*/React.createElement("div", {
    className: "pisell-sale-detail-pay-timeline__empty"
  }, /*#__PURE__*/React.createElement(PisellEmpty, {
    description: locales.getText('pisell2.sale-detail.pay.empty')
  }))));
}