import React, { useEffect } from 'react';
import { Button, Dropdown } from 'antd';
import { DownOutlined } from '@ant-design/icons';
import { formatAmount, locales } from '@pisell/utils';
import ClientItem from "../ClientItem";
import Edit05 from '@pisell/icon/src/Edit05';
import "./index.less";
var statusTagColor = {
  unpaid: '#B2DDFF',
  paid: '#ABEFC6',
  partially_paid: '#CEEAB0'
};
var statusBgColor = {
  unpaid: '#EFF8FF',
  paid: '#ECFDF3',
  partially_paid: '#F5FBEE'
};
var DepositItem = function DepositItem(props) {
  var status = props.status,
    customer = props.customer,
    totalAmountStr = props.totalAmountStr,
    onEdit = props.onEdit,
    orderId = props.orderId,
    orderNumber = props.orderNumber,
    handleGoOrderDetail = props.handleGoOrderDetail,
    generatePaymentLink = props.generatePaymentLink,
    depositAmount = props.depositAmount,
    amountSymbol = props.amountSymbol,
    createdTime = props.createdTime,
    isPaid = props.isPaid,
    isBookingCancelled = props.isBookingCancelled,
    sendEmail = props.sendEmail,
    hideOrderDetail = props.hideOrderDetail,
    depositPaidAmount = props.depositPaidAmount,
    depositUnPaidAmount = props.depositUnPaidAmount,
    depositOriginPaidAmount = props.depositOriginPaidAmount;
  var statusText = {
    unpaid: locales.getText('pisell2.text.deposit-item-status-unpaid'),
    paid: locales.getText('pisell2.text.deposit-item-status-paid'),
    partially_paid: locales.getText('pisell2.text.deposit-item-status-partially-paid')
  };
  useEffect(function () {
    document.body.id = 'body';
  }, []);
  var items = [{
    key: 'send',
    disabled: isPaid || isBookingCancelled,
    label: /*#__PURE__*/React.createElement("div", null, locales.getText('pisell2.text.send-mail'))
  }, {
    key: '1',
    disabled: isPaid || isBookingCancelled,
    label: /*#__PURE__*/React.createElement("div", null, locales.getText('pisell2.text.copy-to-clipboard'))
  }];
  var onClick = function onClick(_ref) {
    var key = _ref.key;
    if (key === '1') {
      generatePaymentLink === null || generatePaymentLink === void 0 || generatePaymentLink(orderId);
    } else if (key === 'send') {
      sendEmail === null || sendEmail === void 0 || sendEmail(orderId);
    }
  };
  var handlingFee = (Number(depositPaidAmount) || 0) - (Number(depositOriginPaidAmount) || 0);
  return /*#__PURE__*/React.createElement("div", {
    className: "pisell-lowcode__deposit-item"
  }, /*#__PURE__*/React.createElement("div", {
    className: "pisell-lowcode__deposit-item-header",
    style: {
      backgroundColor: statusBgColor[status]
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: "pisell-lowcode__deposit-status",
    style: {
      backgroundColor: statusTagColor[status]
    }
  }, statusText[status]), /*#__PURE__*/React.createElement("div", {
    className: "pisell-lowcode__deposit-item-header-right"
  }, /*#__PURE__*/React.createElement("span", {
    className: "pisell-lowcode__deposit-item-header-right-amount"
  }, formatAmount(depositAmount, 2, amountSymbol)), !(isPaid || status === 'partially_paid' || isBookingCancelled) && /*#__PURE__*/React.createElement(Edit05, {
    className: "pisell-lowcode__deposit-item-header-right-edit",
    onClick: onEdit
  }))), /*#__PURE__*/React.createElement("div", {
    className: "pisell-lowcode__deposit-item-content"
  }, /*#__PURE__*/React.createElement("div", {
    className: "pisell-lowcode__deposit-item-content-line1"
  }, locales.getText('pisell2.text.deposit-order-no'), " ", orderNumber), /*#__PURE__*/React.createElement("div", {
    className: "pisell-lowcode__deposit-item-content-line2"
  }, createdTime), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ClientItem, {
    data: customer,
    coverSize: 40,
    walkInName: "Walk-In"
  }))), /*#__PURE__*/React.createElement("div", {
    className: "pisell-lowcode__deposit-item-footer"
  }, /*#__PURE__*/React.createElement("div", {
    className: "pisell-lowcode__deposit-item-footer-total"
  }, /*#__PURE__*/React.createElement("div", null, locales.getText('pisell2.text.deposit-order-total')), /*#__PURE__*/React.createElement("div", null, totalAmountStr)), ['partially_paid'].includes(status) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: "pisell-lowcode__deposit-item-footer-total-deposit"
  }, /*#__PURE__*/React.createElement("div", null, locales.getText('pisell2.text.deposit-deposit-paid'), ' ', handlingFee > 0 && /*#__PURE__*/React.createElement("span", null, "(", locales.getText('pisell2.text.deposit-deposit-paid-including-surcharge'), ' ', formatAmount(handlingFee, 2, amountSymbol), ")")), /*#__PURE__*/React.createElement("div", null, formatAmount(depositPaidAmount, 2, amountSymbol))), /*#__PURE__*/React.createElement("div", {
    className: "pisell-lowcode__deposit-item-footer-total-deposit"
  }, /*#__PURE__*/React.createElement("div", null, locales.getText('pisell2.text.deposit-deposit-paid-due'), ' '), /*#__PURE__*/React.createElement("div", null, formatAmount(depositUnPaidAmount, 2, amountSymbol)))), /*#__PURE__*/React.createElement("div", {
    className: "pisell-lowcode__deposit-item-footer-action"
  }, !hideOrderDetail && /*#__PURE__*/React.createElement(Button, {
    block: true,
    size: "large",
    onClick: handleGoOrderDetail
  }, locales.getText('pisell2.text.deposit-order-detail')), /*#__PURE__*/React.createElement(Dropdown, {
    menu: {
      items: items,
      onClick: onClick
    },
    placement: "bottom"
  }, /*#__PURE__*/React.createElement(Button, {
    block: true,
    type: "primary",
    size: "large"
  }, locales.getText('pisell2.text.deposit-collect-deposit'), ' ', /*#__PURE__*/React.createElement(DownOutlined, null))))));
};
export default DepositItem;