import React from 'react';
import { PisellCardList, PisellText } from '@pisell/materials';
import { locales } from '@pisell/utils';
import WalletPassTextMode from "../WalletPassTextMode";
import { getPointCardAmount } from "../../utils";
import "./index.less";
var Amount = PisellText.Amount;
var WalletPassCardDisplay = function WalletPassCardDisplay(_ref) {
  var isCardMode = _ref.isCardMode,
    cardData = _ref.cardData,
    selectedWalletIds = _ref.selectedWalletIds,
    onSelectWallet = _ref.onSelectWallet,
    onDetail = _ref.onDetail,
    onConfirmEditAmount = _ref.onConfirmEditAmount,
    onBeforeEditAmount = _ref.onBeforeEditAmount;
  var handleCardListChange = function handleCardListChange(value) {
    onSelectWallet(value);
  };
  var formatBalance = function formatBalance(balance, option) {
    var _option$data;
    if ((option === null || option === void 0 || (_option$data = option.data) === null || _option$data === void 0 ? void 0 : _option$data.originData.tag) === 'point_card') {
      var _option$data2, _option$data3;
      var value = option !== null && option !== void 0 && option.active ? (balance || 0) - ((option === null || option === void 0 || (_option$data2 = option.data) === null || _option$data2 === void 0 || (_option$data2 = _option$data2.originData) === null || _option$data2 === void 0 ? void 0 : _option$data2.recommended_usage_par_value) || 0) : balance;
      var amount = getPointCardAmount(value || 0, option === null || option === void 0 || (_option$data3 = option.data) === null || _option$data3 === void 0 || (_option$data3 = _option$data3.originData) === null || _option$data3 === void 0 ? void 0 : _option$data3.wallet_pass_usage_unit);
      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Amount, {
        className: "pisell-card-amount-item-value",
        useThousandsSeparator: true,
        value: value,
        showCurrencySymbol: false
      }), "(", /*#__PURE__*/React.createElement(Amount, {
        className: "pisell-card-amount-item-value",
        useThousandsSeparator: true,
        value: amount,
        showCurrencySymbol: false
      }), ")");
    }
    if (option !== null && option !== void 0 && option.active) {
      var _option$data4;
      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Amount, {
        className: "pisell-card-amount-item-value testtest",
        useThousandsSeparator: true,
        value: balance ? balance - ((option === null || option === void 0 || (_option$data4 = option.data) === null || _option$data4 === void 0 ? void 0 : _option$data4.redeem) || 0) : 0,
        showCurrencySymbol: true,
        hideDecimalForWholeNumbers: false,
        precision: 2
      }));
    }
    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Amount, {
      className: "pisell-card-amount-item-value testtest",
      useThousandsSeparator: true,
      value: balance,
      showCurrencySymbol: true,
      hideDecimalForWholeNumbers: false,
      precision: 2
    }));
  };
  var formatBalanceTitle = function formatBalanceTitle(balanceTitle, option) {
    if (option !== null && option !== void 0 && option.active) {
      return /*#__PURE__*/React.createElement("span", null, locales.getText('wallet-pass-module-balance-after'));
    }
    return /*#__PURE__*/React.createElement("span", null, locales.getText('wallet-pass-module-balance'));
  };
  var formatRedeemTitle = function formatRedeemTitle(title, option) {
    if (option !== null && option !== void 0 && option.active) {
      return /*#__PURE__*/React.createElement("span", null, option.originDom);
    }
    return /*#__PURE__*/React.createElement("span", null, locales.getText('wallet-pass-module-max.use'));
  };
  return /*#__PURE__*/React.createElement("div", {
    className: "wallet-pass-card-display-container"
  }, isCardMode ? /*#__PURE__*/React.createElement(PisellCardList, {
    showActiveBackground: true,
    showName: true,
    showStoreName: false,
    showRedeem: true,
    showBalance: true,
    showCode: true,
    showValidDate: true,
    showDetail: true,
    showQrCode: true,
    showCover: true,
    showActions: false,
    platform: "pc",
    mode: "multiple",
    direction: "horizontal",
    formatBalance: formatBalance,
    formatBalanceTitle: formatBalanceTitle,
    formatRedeemTitle: formatRedeemTitle,
    type: "mini",
    data: cardData,
    hasMore: false,
    showEmpty: false,
    fullWidth: false,
    value: selectedWalletIds,
    useExternalDetail: true,
    onDetail: onDetail,
    showStatus: false,
    onChange: handleCardListChange,
    actions: {
      layout: 'expanded',
      detail: {
        visible: false,
        iconColor: '#1570EF'
      },
      edit: {
        visible: false,
        iconColor: '#1570EF'
      }
    },
    enableEditAmount: true,
    onConfirmEditAmount: onConfirmEditAmount,
    onBeforeEditAmount: onBeforeEditAmount
  }) : /*#__PURE__*/React.createElement(WalletPassTextMode, {
    cardData: cardData,
    selectedWalletIds: selectedWalletIds
  }));
};
export default WalletPassCardDisplay;