import React from 'react';
import { Iconfont } from '@pisell/materials';
import { locales } from '@pisell/utils';
import Decimal from 'decimal.js';
import { useSymbol } from "../../hooks";
import "./index.less";
var ConfirmedPayment = function ConfirmedPayment(props) {
  var data = props.data;
  var symbol = useSymbol();
  var getTotalAmount = function getTotalAmount(item) {
    var amount = new Decimal((item === null || item === void 0 ? void 0 : item.amount) || 0);
    var surcharge = getSurcharge(item);
    return amount.add(surcharge).toFixed(2).toString();
  };
  var getSurcharge = function getSurcharge(item) {
    var _item$service_charge, _item$service_charge2;
    var amount = new Decimal((item === null || item === void 0 ? void 0 : item.amount) || 0);
    var surcharge = new Decimal(0);
    if (item !== null && item !== void 0 && (_item$service_charge = item.service_charge) !== null && _item$service_charge !== void 0 && _item$service_charge.percentage) {
      // amount * percentage
      surcharge = amount.mul(item.service_charge.percentage);
    }
    if (item !== null && item !== void 0 && (_item$service_charge2 = item.service_charge) !== null && _item$service_charge2 !== void 0 && _item$service_charge2.amount) {
      // surcharge + service_charge.amount
      surcharge = surcharge.add(item.service_charge.amount);
    }
    return surcharge.toFixed(2).toString();
  };
  return /*#__PURE__*/React.createElement("div", {
    className: "tob-pay-confirmed-payment"
  }, /*#__PURE__*/React.createElement("div", {
    className: "tob-pay-confirmed-payment-title"
  }, locales.getText('tobPay.text.confirmed.payment')), /*#__PURE__*/React.createElement("div", {
    className: "tob-pay-confirmed-payment-list"
  }, data.map(function (item) {
    var totalAmount = getTotalAmount(item);
    var surcharge = getSurcharge(item);
    return /*#__PURE__*/React.createElement("div", {
      key: item.uuid,
      className: "tob-pay-confirmed-payment-item"
    }, /*#__PURE__*/React.createElement("div", {
      className: "tob-pay-confirmed-payment-item-left"
    }, /*#__PURE__*/React.createElement(Iconfont, {
      type: "icona-zu6491",
      style: {
        marginTop: '-2px',
        fontSize: '24px',
        color: 'var(--theme-color)'
      }
    }), /*#__PURE__*/React.createElement("div", {
      className: "tob-pay-confirmed-payment-item-left-content"
    }, /*#__PURE__*/React.createElement("span", {
      className: "tob-pay-confirmed-payment-item-name"
    }, item.name), item.created_at && /*#__PURE__*/React.createElement("span", {
      className: "tob-pay-confirmed-payment-item-time"
    }, item.created_at))), /*#__PURE__*/React.createElement("div", {
      className: "tob-pay-confirmed-payment-item-right"
    }, /*#__PURE__*/React.createElement("div", {
      className: "tob-pay-confirmed-payment-item-right-info"
    }, /*#__PURE__*/React.createElement("span", {
      className: "tob-pay-confirmed-payment-item-amount"
    }, symbol, totalAmount), Number(surcharge) > 0 && /*#__PURE__*/React.createElement("span", {
      className: "tob-pay-confirmed-payment-item-surcharge"
    }, locales.getText('tobPay.text.payment.with.surcharge'), ":", ' ', symbol, surcharge))));
  })));
};
export default ConfirmedPayment;