var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/components/pisellWalletPassCard/index.tsx
var pisellWalletPassCard_exports = {};
__export(pisellWalletPassCard_exports, {
  default: () => pisellWalletPassCard_default
});
module.exports = __toCommonJS(pisellWalletPassCard_exports);
var import_react = __toESM(require("react"));
var import_ahooks = require("ahooks");
var import_classnames = __toESM(require("classnames"));
var import_icons = require("@ant-design/icons");
var import_antd = require("antd");
var import_dayjs = __toESM(require("dayjs"));
var import_iconfont = __toESM(require("../iconfont"));
var import__ = require("../../index");
var import_utils = require("@pisell/utils");
var import_pisellTags = __toESM(require("../pisellTags"));
var import_Amount = __toESM(require("../pisellText/components/Amount"));
var import_Amount2 = __toESM(require("../virtual-keyboard/Amount"));
var import_index = require("./index.less");
var import_locales = require("../../locales");
var import_pisellQrcode = __toESM(require("./../pisellQrcode"));
var cardStatusMap = {
  used: "warning",
  expired: "error",
  conflict: "error",
  disabled: "gray",
  lastPayment: "gray"
};
var PisellWalletPassCard = (props) => {
  const [isShowDetail, setIsShowDetail] = import_react.default.useState(false);
  const [isShowEdit, setIsShowEdit] = import_react.default.useState(false);
  const [form] = import_antd.Form.useForm();
  const [form2] = import_antd.Form.useForm();
  const [tempAmount, setTempAmount] = import_react.default.useState("");
  const [isKeyboardOpen, setIsKeyboardOpen] = import_react.default.useState(false);
  const [lastTap, setLastTap] = import_react.default.useState(0);
  const [pressTimer, setPressTimer] = import_react.default.useState(
    null
  );
  const config = (0, import__.usePisellConfig)();
  (0, import_react.useEffect)(() => {
    return () => {
      if (pressTimer) {
        clearTimeout(pressTimer);
      }
    };
  }, [pressTimer]);
  const {
    id,
    type,
    code,
    qrCode,
    balance,
    disabledReason,
    name,
    storeName,
    redeem,
    validDate,
    disabled,
    active = false,
    cover,
    balanceTitle,
    redeemTitle,
    showCover = true,
    showDetail = true,
    showBalance = true,
    showRedeem = true,
    showName = true,
    showCode = true,
    showStoreName = true,
    showValidDate = true,
    showQrCode = true,
    showBalanceSymbol = true,
    showDisabledReason = true,
    showDiscount = false,
    discount,
    showActions,
    actions,
    beforeEdit,
    onBeforeEditAmount,
    onConfirmEdit,
    onConfirmEditAmount,
    onDetail,
    useExternalDetail = false,
    originData,
    style = {},
    mode = "multiple",
    showActiveIcon,
    enableEditAmount,
    showStatus,
    cardStatus,
    nameTitleStyle,
    formatBalance,
    formatBalanceTitle,
    formatRedeem,
    formatRedeemTitle,
    maxRedeem,
    showHolderName = true,
    holder,
    onSetHolder,
    validDateBySchedule,
    scheduleList
  } = props;
  (0, import_react.useEffect)(() => {
    document.body.id = "body";
  }, []);
  const actionsWrapperRef = (0, import_react.useRef)(null);
  const actionsWrapperSize = (0, import_ahooks.useSize)(actionsWrapperRef);
  const warnMessageRef = (0, import_react.useRef)(null);
  const warnMessageSize = (0, import_ahooks.useSize)(warnMessageRef);
  const dynamicPaddingBottom = (0, import_react.useMemo)(() => {
    if (disabled && (warnMessageSize == null ? void 0 : warnMessageSize.height)) {
      return warnMessageSize.height;
    }
    return void 0;
  }, [disabled, warnMessageSize == null ? void 0 : warnMessageSize.height]);
  const isMini = (0, import_react.useMemo)(() => {
    return "mini" === type;
  }, [type]);
  const dynamicNameWrapStyle = (0, import_react.useMemo)(() => {
    const actionsWidth = (actionsWrapperSize == null ? void 0 : actionsWrapperSize.width) || 0;
    const baseStyle = nameTitleStyle || {};
    if (actionsWidth > 0) {
      return {
        ...baseStyle,
        width: `calc(100% - ${actionsWidth + 8}px)`
        // 添加8px的边距
      };
    }
    return {
      ...baseStyle,
      width: isMini ? "100%" : "calc(100% - 80px)"
      // 使用默认宽度
    };
  }, [nameTitleStyle, actionsWrapperSize == null ? void 0 : actionsWrapperSize.width, isMini]);
  const handleDetail = () => {
    var _a;
    if (disabled || disabledReason || !((_a = actions == null ? void 0 : actions.detail) == null ? void 0 : _a.visible)) return;
    if (useExternalDetail && onDetail) {
      onDetail({
        id,
        name,
        storeName,
        balance,
        redeem,
        code,
        validDate,
        originData
      });
    } else {
      form2.setFieldsValue({
        name,
        storeName,
        balance,
        redeem,
        code,
        validDate
      });
      setIsShowDetail(true);
    }
  };
  const onEdit = async () => {
    var _a, _b;
    if (disabled || disabledReason || !((_a = actions == null ? void 0 : actions.edit) == null ? void 0 : _a.visible) || !((_b = actions == null ? void 0 : actions.edit) == null ? void 0 : _b.enableDialog)) {
      return;
    }
    const executeEdit = () => {
      form.setFieldsValue({
        name,
        storeName,
        balance,
        redeem,
        code,
        validDate: (0, import_dayjs.default)(validDate)
      });
      setIsShowEdit(true);
    };
    if (!beforeEdit) {
      executeEdit();
      return;
    }
    try {
      const result = beforeEdit({
        id,
        name,
        storeName,
        balance,
        redeem,
        code,
        validDate,
        originData
      });
      if (result instanceof Promise) {
        const shouldProceed = await result;
        if (shouldProceed !== false) {
          executeEdit();
        }
        return;
      }
      if (result !== false) {
        executeEdit();
      }
    } catch (error) {
      console.error("Before edit check failed:", error);
    }
  };
  const formatValidDate = (0, import_react.useMemo)(() => {
    if (validDateBySchedule && scheduleList && (scheduleList == null ? void 0 : scheduleList.length) > 0) {
      return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, (0, import_locales.getText)("pisell-wallet-pass-card-valid"), " ", (0, import_utils.getScheduleSummary)(scheduleList, config == null ? void 0 : config.locale) || validDate);
    }
    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, (0, import_locales.getText)("pisell-wallet-pass-card-valid-to"), " ", !!validDate ? validDate : (0, import_locales.getText)("pisell-wallet-pass-card-expireDate"));
  }, [validDateBySchedule, scheduleList, validDate]);
  const _onConfirmEdit = () => {
    form.validateFields().then((values) => {
      var _a;
      onConfirmEdit == null ? void 0 : onConfirmEdit({
        id,
        name,
        storeName,
        balance,
        redeem,
        code,
        ...values,
        validDate: "validDate" in values ? (_a = values.validDate) == null ? void 0 : _a.format("YYYY-MM-DD") : validDate
      });
      setIsShowEdit(false);
    });
  };
  const stop = (e) => {
    e.stopPropagation();
  };
  const renderActions = () => {
    var _a, _b, _c, _d;
    if ((disabled || disabledReason) && !showStatus) return null;
    if ((!showActions || !actions) && !showStatus) return null;
    if ("collapsed" === (actions == null ? void 0 : actions.layout)) {
      const items = [];
      if ((actions == null ? void 0 : actions.detail) && ((_a = actions == null ? void 0 : actions.detail) == null ? void 0 : _a.visible)) {
        items.push({
          key: "detail",
          label: /* @__PURE__ */ import_react.default.createElement(
            "div",
            {
              className: "pisell-card-actions-dropdown-detail",
              onClick: (e) => {
                stop(e);
                handleDetail();
              }
            },
            /* @__PURE__ */ import_react.default.createElement("span", null, (0, import_locales.getText)("pisell-wallet-pass-card-detail"))
          )
        });
      }
      if ((actions == null ? void 0 : actions.edit) && ((_b = actions == null ? void 0 : actions.edit) == null ? void 0 : _b.visible)) {
        items.push({
          key: "edit",
          label: /* @__PURE__ */ import_react.default.createElement(
            "div",
            {
              className: "pisell-card-actions-dropdown-edit",
              onClick: (e) => {
                stop(e);
                onEdit();
              }
            },
            /* @__PURE__ */ import_react.default.createElement("span", null, (0, import_locales.getText)("pisell-wallet-pass-card-edit"))
          )
        });
      }
      if (!items.length) return null;
      return /* @__PURE__ */ import_react.default.createElement(
        import_antd.Dropdown,
        {
          trigger: ["click"],
          menu: { items },
          overlayStyle: { minWidth: 120 }
        },
        /* @__PURE__ */ import_react.default.createElement("div", { className: "actions-dropdown-trigger", onClick: stop }, /* @__PURE__ */ import_react.default.createElement(import_icons.MoreOutlined, { style: { fontSize: 24 } }))
      );
    }
    if ("expanded" === (actions == null ? void 0 : actions.layout) || showStatus) {
      return /* @__PURE__ */ import_react.default.createElement("div", { className: "actions-btn-wrapper", ref: actionsWrapperRef }, showStatus && cardStatus && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-card-status-icon" }, /* @__PURE__ */ import_react.default.createElement(
        import_pisellTags.default,
        {
          style: {
            borderRadius: "6px",
            padding: "2px 8px",
            ...cardStatus === "lastPayment" && { fontSize: "12px" }
          },
          type: "pill_color",
          color: cardStatusMap[cardStatus]
        },
        (0, import_locales.getText)(`pisell-wallet-pass-card-status-${cardStatus}`)
      )), (actions == null ? void 0 : actions.detail) && ((_c = actions == null ? void 0 : actions.detail) == null ? void 0 : _c.visible) && /* @__PURE__ */ import_react.default.createElement(
        "div",
        {
          className: "pisell-card-actions-detail-btn",
          onClick: (e) => {
            stop(e);
            handleDetail();
          }
        },
        /* @__PURE__ */ import_react.default.createElement(
          import_icons.ExclamationCircleOutlined,
          {
            style: {
              fontSize: 24,
              color: actions.detail.iconColor || "#1570EF"
            }
          }
        )
      ), (actions == null ? void 0 : actions.edit) && ((_d = actions == null ? void 0 : actions.edit) == null ? void 0 : _d.visible) && /* @__PURE__ */ import_react.default.createElement(
        "div",
        {
          className: "pisell-card-actions-edit-btn",
          onClick: (e) => {
            stop(e);
            onEdit();
          }
        },
        /* @__PURE__ */ import_react.default.createElement(
          import_icons.EditOutlined,
          {
            style: {
              fontSize: 24,
              color: actions.edit.iconColor || "#1570EF"
            }
          }
        )
      ));
    }
  };
  const _showHolderName = (0, import_react.useMemo)(() => {
    return (holder == null ? void 0 : holder.holder_type) === "form" && showHolderName;
  }, [holder, showHolderName]);
  const holderName = (0, import_react.useMemo)(() => {
    var _a;
    if ((holder == null ? void 0 : holder.holder_type) === "form" && !(holder == null ? void 0 : holder.holder_id)) {
      return "--";
    }
    return ((_a = holder == null ? void 0 : holder.detail) == null ? void 0 : _a.main_field) || "";
  }, [holder]);
  const renderNameInfo = () => {
    const shouldShowStoreName = typeof showStoreName === "function" ? showStoreName(props) : showStoreName;
    return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("pisell-card-name-info-wrap") }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-card-name-wrap" }, showName && name), _showHolderName && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-card-holder-name" }, holderName), shouldShowStoreName && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-card-store-name" }, storeName));
  };
  const handleEditAmount = async (e) => {
    if (active && enableEditAmount) {
      e.stopPropagation();
    }
    if (!active) {
      return;
    }
    if (enableEditAmount && !disabled) {
      if (onBeforeEditAmount) {
        onBeforeEditAmount == null ? void 0 : onBeforeEditAmount({
          id,
          name,
          storeName,
          balance,
          redeem,
          code,
          validDate,
          originData
        });
        setIsKeyboardOpen(true);
        setTempAmount((redeem == null ? void 0 : redeem.toString()) || "");
      }
    }
  };
  const createOriginalBalanceTitleDom = () => /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-card-amount-item-label" }, formatBalanceTitle ? formatBalanceTitle(balanceTitle, {
    originDom: /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, balanceTitle || (0, import_locales.getText)("pisell-wallet-pass-card-balance")),
    active,
    data: props
  }) : balanceTitle || (0, import_locales.getText)("pisell-wallet-pass-card-balance"), disabled || isMini ? ": " : "");
  const createOriginalBalanceDom = () => /* @__PURE__ */ import_react.default.createElement(
    import_Amount.default,
    {
      className: "pisell-card-amount-item-value",
      useThousandsSeparator: true,
      value: balance,
      showCurrencySymbol: showBalanceSymbol
    }
  );
  const createOriginalRedeemTitleDom = () => /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-card-amount-item-label-text" }, formatRedeemTitle ? formatRedeemTitle(redeemTitle, {
    originDom: /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, redeemTitle || (0, import_locales.getText)("pisell-wallet-pass-card-redeem")),
    active,
    data: props
  }) : redeemTitle || (0, import_locales.getText)("pisell-wallet-pass-card-redeem"), isMini ? ": " : "");
  const createOriginalRedeemDom = () => /* @__PURE__ */ import_react.default.createElement(
    import_Amount.default,
    {
      className: "pisell-card-amount-item-value",
      useThousandsSeparator: true,
      value: redeem,
      showCurrencySymbol: true
    }
  );
  const renderRedeemInfo = () => {
    return showRedeem && !disabled && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-card-amount-item pisell-wallet-pass-card-redeem" }, /* @__PURE__ */ import_react.default.createElement(
      "div",
      {
        className: "pisell-card-amount-item-label"
      },
      enableEditAmount && active && /* @__PURE__ */ import_react.default.createElement(
        import_iconfont.default,
        {
          type: "pisell2-edit-05",
          className: "pisell-card-amount-item-label-icon"
        }
      ),
      createOriginalRedeemTitleDom()
    ), formatRedeem ? formatRedeem(redeem, {
      originDom: createOriginalRedeemDom(),
      active,
      data: props
    }) : createOriginalRedeemDom());
  };
  const renderBalanceInfo = () => {
    var _a;
    return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-card-amount-info-wrap" }, showBalance && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-card-amount-item pisell-card-amount-item-balance" }, createOriginalBalanceTitleDom(), formatBalance ? formatBalance(balance, {
      originDom: createOriginalBalanceDom(),
      active,
      data: props
    }) : createOriginalBalanceDom()), showDiscount && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-card-amount-item pisell-card-amount-item-discount" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-card-amount-item-label" }, (0, import_locales.getText)("pisell-discount-card-title"), ": "), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-card-amount-item-value" }, ((_a = props.metadata) == null ? void 0 : _a.discount_card_type) === "fixed_amount" ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, (0, import_locales.getText)("pisell-discount-card-fixed-amount-prefix"), " ", /* @__PURE__ */ import_react.default.createElement(
      import_Amount.default,
      {
        className: "pisell-card-amount-item-value",
        useThousandsSeparator: true,
        value: discount
      }
    )) : /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, discount, "% ", (0, import_locales.getText)("pisell-discount-card-unit"))))), /* @__PURE__ */ import_react.default.createElement(
      "div",
      {
        className: "pisell-card-code-wrap",
        style: { marginRight: showQrCode && !isMini ? 60 : 0 }
      },
      /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-card-code" }, showCode && !isMini && /* @__PURE__ */ import_react.default.createElement("div", null, code), showValidDate && (!isMini || !_showHolderName) && /* @__PURE__ */ import_react.default.createElement("div", null, formatValidDate))
    ));
  };
  const getInputItem = (name2) => {
    if ("validDate" === name2) {
      return /* @__PURE__ */ import_react.default.createElement(import_antd.DatePicker, { style: { width: "100%" } });
    }
    if ("balance" === name2 || "redeem" === name2) {
      return /* @__PURE__ */ import_react.default.createElement(
        import_antd.InputNumber,
        {
          formatter: (value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ","),
          parser: (value) => value == null ? void 0 : value.replace(/\$\s?|(,*)/g, ""),
          style: { width: "100%" },
          max: "redeem" === name2 ? originData == null ? void 0 : originData.available_max_amount : void 0
        }
      );
    }
    return /* @__PURE__ */ import_react.default.createElement(import_antd.Input, { style: { width: "100%" } });
  };
  const renderEditModal = () => {
    var _a, _b;
    return /* @__PURE__ */ import_react.default.createElement(
      import__.PisellModal,
      {
        title: ((_a = actions == null ? void 0 : actions.edit) == null ? void 0 : _a.dialogTitle) || (0, import_locales.getText)("pisell-wallet-pass-card-edit"),
        open: isShowEdit,
        className: "pisell-wallet-pass-card-edit-modal",
        onCancel: () => setIsShowEdit(false),
        width: 480,
        onOk: _onConfirmEdit,
        okText: (0, import_locales.getText)("pisell-wallet-pass-card-confirm"),
        cancelText: (0, import_locales.getText)("pisell-wallet-pass-card-cancel"),
        platform: "pc"
      },
      /* @__PURE__ */ import_react.default.createElement(import_antd.Form, { form, layout: "vertical", style: { padding: "16px 0" } }, Array.isArray((_b = actions == null ? void 0 : actions.edit) == null ? void 0 : _b.fields) && actions.edit.fields.map((item) => {
        return /* @__PURE__ */ import_react.default.createElement(
          import_antd.Form.Item,
          {
            key: item.name,
            name: item.name,
            label: item.label,
            rules: [
              {
                required: true,
                message: (0, import_locales.getText)("pisell-wallet-pass-card-required")
              }
            ]
          },
          getInputItem(item.name)
        );
      }))
    );
  };
  const renderDetailModal = () => {
    return /* @__PURE__ */ import_react.default.createElement(
      import__.PisellModal,
      {
        title: (0, import_locales.getText)("pisell-wallet-pass-card-detail"),
        open: isShowDetail,
        onCancel: () => {
          setIsShowDetail(false);
        },
        width: 480,
        className: "pisell-wallet-pass-card-detail-modal",
        footer: null,
        platform: "pc"
      },
      /* @__PURE__ */ import_react.default.createElement(
        import_antd.Form,
        {
          form: form2,
          disabled: true,
          layout: "vertical",
          style: { padding: "16px 0" }
        },
        /* @__PURE__ */ import_react.default.createElement(
          import_antd.Form.Item,
          {
            name: "name",
            label: (0, import_locales.getText)("pisell-wallet-pass-card-name")
          },
          /* @__PURE__ */ import_react.default.createElement(import_antd.Input, null)
        ),
        /* @__PURE__ */ import_react.default.createElement(
          import_antd.Form.Item,
          {
            name: "storeName",
            label: (0, import_locales.getText)("pisell-wallet-pass-card-store-name")
          },
          /* @__PURE__ */ import_react.default.createElement(import_antd.Input, null)
        ),
        /* @__PURE__ */ import_react.default.createElement(
          import_antd.Form.Item,
          {
            name: "balance",
            label: (0, import_locales.getText)("pisell-wallet-pass-card-balance")
          },
          /* @__PURE__ */ import_react.default.createElement(
            import_antd.InputNumber,
            {
              formatter: (value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ","),
              style: { width: "100%" }
            }
          )
        ),
        /* @__PURE__ */ import_react.default.createElement(
          import_antd.Form.Item,
          {
            name: "redeem",
            label: (0, import_locales.getText)("pisell-wallet-pass-card-redeem")
          },
          /* @__PURE__ */ import_react.default.createElement(
            import_antd.InputNumber,
            {
              formatter: (value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ","),
              style: { width: "100%" }
            }
          )
        ),
        /* @__PURE__ */ import_react.default.createElement(
          import_antd.Form.Item,
          {
            name: "code",
            label: (0, import_locales.getText)("pisell-wallet-pass-card-code")
          },
          /* @__PURE__ */ import_react.default.createElement(import_antd.Input, null)
        ),
        /* @__PURE__ */ import_react.default.createElement(
          import_antd.Form.Item,
          {
            name: "validDate",
            label: (0, import_locales.getText)("pisell-wallet-pass-card-valid-to")
          },
          /* @__PURE__ */ import_react.default.createElement(import_antd.Input, null)
        )
      )
    );
  };
  const checkedDom = (0, import_react.useMemo)(() => {
    if (!isMini || disabled) return null;
    if (showActiveIcon && !active) {
      return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-card-checked-icon" }, /* @__PURE__ */ import_react.default.createElement(import_antd.Radio, { checked: false }));
    }
    return active && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-card-checked-icon" }, mode === "multiple" ? /* @__PURE__ */ import_react.default.createElement(
      import_icons.CheckCircleFilled,
      {
        style: {
          fontSize: 20,
          color: "var(--Primary-600, #7F56D9)",
          display: "block"
        }
      }
    ) : /* @__PURE__ */ import_react.default.createElement(import_antd.Radio, { checked: true }));
  }, [showActiveIcon, isMini, active, disabled]);
  const handleKeyboardClose = () => {
    setIsKeyboardOpen(false);
    setTempAmount("");
  };
  const handleKeyboardChange = (value) => {
    setTempAmount(value.toString() || "");
  };
  const handleKeyboardEnter = () => {
    setIsKeyboardOpen(false);
    onConfirmEditAmount == null ? void 0 : onConfirmEditAmount(Math.min(Number(tempAmount), maxRedeem || 0));
  };
  const wrapperStyle = (0, import_react.useMemo)(() => {
    return showCover && !isMini ? {
      ...style,
      paddingBottom: dynamicPaddingBottom,
      backgroundImage: showCover ? `url('${cover || "data:image/jpeg;base64, "}')` : ""
    } : { ...style, paddingBottom: dynamicPaddingBottom };
  }, [style, showCover, isMini, cover, dynamicPaddingBottom]);
  const _renderMask = () => {
    if (typeof onSetHolder !== "function") return null;
    if ((holder == null ? void 0 : holder.holder_type) === "form" && !(holder == null ? void 0 : holder.holder_id)) {
      return /* @__PURE__ */ import_react.default.createElement(
        "div",
        {
          className: "pisell-wallet-add-holder-mask",
          onClick: (e) => e.stopPropagation()
        },
        /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-wallet-add-holder-mask-text" }, (0, import_locales.getText)("pisell2.wallet-card.add-holder-tip")),
        /* @__PURE__ */ import_react.default.createElement(
          import_antd.Button,
          {
            type: "primary",
            className: "pisell-wallet-add-holder-mask-button",
            onClick: (e) => {
              e.stopPropagation();
              onSetHolder == null ? void 0 : onSetHolder();
            }
          },
          (0, import_locales.getText)("pisell2.wallet-card.add-holder-button-text"),
          /* @__PURE__ */ import_react.default.createElement(import_iconfont.default, { type: "pisell2-user-edit", style: { fontSize: 16 } })
        )
      );
    }
    return null;
  };
  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", null, renderDetailModal(), renderEditModal()), /* @__PURE__ */ import_react.default.createElement(
    "div",
    {
      className: (0, import_classnames.default)("pisell-wallet-pass-card", {
        "pisell-card-disabled": disabled,
        "pisell-card-disabled-hide-disabled-reason": disabled && !showDisabledReason,
        "pisell-wallet-pass-card-mini": isMini,
        active
      }),
      style: wrapperStyle
    },
    _renderMask(),
    renderActions(),
    /* @__PURE__ */ import_react.default.createElement(
      "div",
      {
        className: "pisell-wallet-pass-card-body",
        onClick: handleEditAmount
      },
      renderNameInfo(),
      renderRedeemInfo(),
      renderBalanceInfo(),
      showQrCode && !isMini && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-card-qr-code" }, /* @__PURE__ */ import_react.default.createElement(import_pisellQrcode.default, { value: qrCode, size: 60 }))
    ),
    checkedDom,
    disabled && disabledReason && showDisabledReason && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-card-warn-message", ref: warnMessageRef }, /* @__PURE__ */ import_react.default.createElement(
      import_iconfont.default,
      {
        className: "pisell-card-icon",
        type: "pisell2-alert-circle"
      }
    ), /* @__PURE__ */ import_react.default.createElement("span", null, disabledReason)),
    /* @__PURE__ */ import_react.default.createElement("div", { onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react.default.createElement(
      import__.PisellModal,
      {
        open: isKeyboardOpen,
        onCancel: handleKeyboardClose,
        title: null,
        footer: null,
        header: null,
        closable: false,
        mask: false,
        maskClosable: true,
        destroyOnClose: true,
        centered: true,
        width: "auto",
        wrapClassName: "keyboard-modal-wrapper",
        bodyStyle: { padding: 0 },
        styles: {
          content: {
            padding: 0,
            boxShadow: "none",
            background: "transparent"
          },
          body: { padding: 0 }
        }
      },
      /* @__PURE__ */ import_react.default.createElement(
        import_Amount2.default,
        {
          key: isKeyboardOpen ? "open" : "close",
          defaultSelect: true,
          value: tempAmount,
          onChange: handleKeyboardChange,
          onEnter: handleKeyboardEnter,
          allowDecimal: true,
          decimalPlaces: 2,
          min: 0,
          selectType: "dark",
          resetText: (0, import_locales.getText)("pisell-wallet-pass-card-reset"),
          doneText: (0, import_locales.getText)("pisell-wallet-pass-card-done"),
          amountProps: {
            showCurrencySymbol: true,
            useThousandsSeparator: true
          }
        }
      )
    ))
  ));
};
var pisellWalletPassCard_default = PisellWalletPassCard;
