import { getText } from "../../locales/index.js";
import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
import IconFont from "../iconfont/index.js";
import usePisellConfig from "../pisell-config-provider/hooks/usePisellConfig.js";
import PisellModal from "../pisellModal/index.js";
import { _asyncToGenerator } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/asyncToGenerator.js";
import PisellTags from "../pisellTags/index.js";
import Amount from "../pisellText/components/Amount/index.js";
import Amount$1 from "../virtual-keyboard/Amount/index.js";
import PisellQrcode from "../pisellQrcode/index.js";
import React, { useEffect, useMemo, useRef } from "react";
import { getScheduleSummary } from "@pisell/utils";
import { Button, DatePicker, Dropdown, Form, Input, InputNumber, Radio } from "antd";
import { CheckCircleFilled, EditOutlined, ExclamationCircleOutlined, MoreOutlined } from "@ant-design/icons";
import classNames from "classnames";
import { useSize } from "ahooks";
import dayjs from "dayjs";
import "./index.less";
//#region src/components/pisellWalletPassCard/index.tsx
const cardStatusMap = {
	used: "warning",
	expired: "error",
	conflict: "error",
	disabled: "gray",
	lastPayment: "gray"
};
const PisellWalletPassCard = (props) => {
	const [isShowDetail, setIsShowDetail] = React.useState(false);
	const [isShowEdit, setIsShowEdit] = React.useState(false);
	const [form] = Form.useForm();
	const [form2] = Form.useForm();
	const [tempAmount, setTempAmount] = React.useState("");
	const [isKeyboardOpen, setIsKeyboardOpen] = React.useState(false);
	const [lastTap, setLastTap] = React.useState(0);
	const [pressTimer, setPressTimer] = React.useState(null);
	const config = usePisellConfig();
	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, validDateBySchedule, scheduleList, showHolderName = true, holder, onSetHolder } = props;
	useEffect(() => {
		document.body.id = "body";
	}, []);
	const actionsWrapperRef = useRef(null);
	const actionsWrapperSize = useSize(actionsWrapperRef);
	const warnMessageRef = useRef(null);
	const warnMessageSize = useSize(warnMessageRef);
	const dynamicPaddingBottom = useMemo(() => {
		if (disabled && (warnMessageSize === null || warnMessageSize === void 0 ? void 0 : warnMessageSize.height)) return warnMessageSize.height;
	}, [disabled, warnMessageSize === null || warnMessageSize === void 0 ? void 0 : warnMessageSize.height]);
	const isMini = useMemo(() => {
		return "mini" === type;
	}, [type]);
	useMemo(() => {
		const actionsWidth = (actionsWrapperSize === null || actionsWrapperSize === void 0 ? void 0 : actionsWrapperSize.width) || 0;
		const baseStyle = nameTitleStyle || {};
		if (actionsWidth > 0) return _objectSpread2(_objectSpread2({}, baseStyle), {}, { width: `calc(100% - ${actionsWidth + 8}px)` });
		return _objectSpread2(_objectSpread2({}, baseStyle), {}, { width: isMini ? "100%" : "calc(100% - 80px)" });
	}, [
		nameTitleStyle,
		actionsWrapperSize === null || actionsWrapperSize === void 0 ? void 0 : actionsWrapperSize.width,
		isMini
	]);
	const handleDetail = () => {
		var _actions$detail;
		if (disabled || disabledReason || !(actions === null || actions === void 0 || (_actions$detail = actions.detail) === null || _actions$detail === void 0 ? void 0 : _actions$detail.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 = function() {
		var _ref = _asyncToGenerator(function* () {
			var _actions$edit, _actions$edit2;
			if (disabled || disabledReason || !(actions === null || actions === void 0 || (_actions$edit = actions.edit) === null || _actions$edit === void 0 ? void 0 : _actions$edit.visible) || !(actions === null || actions === void 0 || (_actions$edit2 = actions.edit) === null || _actions$edit2 === void 0 ? void 0 : _actions$edit2.enableDialog)) return;
			const executeEdit = () => {
				form.setFieldsValue({
					name,
					storeName,
					balance,
					redeem,
					code,
					validDate: dayjs(validDate)
				});
				setIsShowEdit(true);
			};
			if (!beforeEdit) {
				executeEdit();
				return;
			}
			try {
				const result = beforeEdit({
					id,
					name,
					storeName,
					balance,
					redeem,
					code,
					validDate,
					originData
				});
				if (result instanceof Promise) {
					if ((yield result) !== false) executeEdit();
					return;
				}
				if (result !== false) executeEdit();
			} catch (error) {
				console.error("Before edit check failed:", error);
			}
		});
		return function onEdit() {
			return _ref.apply(this, arguments);
		};
	}();
	const formatValidDate = useMemo(() => {
		if (validDateBySchedule && scheduleList && (scheduleList === null || scheduleList === void 0 ? void 0 : scheduleList.length) > 0) return /* @__PURE__ */ React.createElement(React.Fragment, null, getText("pisell-wallet-pass-card-valid"), " ", getScheduleSummary(scheduleList, config === null || config === void 0 ? void 0 : config.locale) || validDate);
		return /* @__PURE__ */ React.createElement(React.Fragment, null, getText("pisell-wallet-pass-card-valid-to"), " ", !!validDate ? validDate : getText("pisell-wallet-pass-card-expireDate"));
	}, [
		validDateBySchedule,
		scheduleList,
		validDate
	]);
	const _onConfirmEdit = () => {
		form.validateFields().then((values) => {
			var _values$validDate;
			onConfirmEdit === null || onConfirmEdit === void 0 || onConfirmEdit(_objectSpread2(_objectSpread2({
				id,
				name,
				storeName,
				balance,
				redeem,
				code
			}, values), {}, { validDate: "validDate" in values ? (_values$validDate = values.validDate) === null || _values$validDate === void 0 ? void 0 : _values$validDate.format("YYYY-MM-DD") : validDate }));
			setIsShowEdit(false);
		});
	};
	const stop = (e) => {
		e.stopPropagation();
	};
	const renderActions = () => {
		if ((disabled || disabledReason) && !showStatus) return null;
		if ((!showActions || !actions) && !showStatus) return null;
		if ("collapsed" === (actions === null || actions === void 0 ? void 0 : actions.layout)) {
			var _actions$detail2, _actions$edit3;
			const items = [];
			if ((actions === null || actions === void 0 ? void 0 : actions.detail) && (actions === null || actions === void 0 || (_actions$detail2 = actions.detail) === null || _actions$detail2 === void 0 ? void 0 : _actions$detail2.visible)) items.push({
				key: "detail",
				label: /* @__PURE__ */ React.createElement("div", {
					className: "pisell-card-actions-dropdown-detail",
					onClick: (e) => {
						stop(e);
						handleDetail();
					}
				}, /* @__PURE__ */ React.createElement("span", null, getText("pisell-wallet-pass-card-detail")))
			});
			if ((actions === null || actions === void 0 ? void 0 : actions.edit) && (actions === null || actions === void 0 || (_actions$edit3 = actions.edit) === null || _actions$edit3 === void 0 ? void 0 : _actions$edit3.visible)) items.push({
				key: "edit",
				label: /* @__PURE__ */ React.createElement("div", {
					className: "pisell-card-actions-dropdown-edit",
					onClick: (e) => {
						stop(e);
						onEdit();
					}
				}, /* @__PURE__ */ React.createElement("span", null, getText("pisell-wallet-pass-card-edit")))
			});
			if (!items.length) return null;
			return /* @__PURE__ */ React.createElement(Dropdown, {
				trigger: ["click"],
				menu: { items },
				overlayStyle: { minWidth: 120 }
			}, /* @__PURE__ */ React.createElement("div", {
				className: "actions-dropdown-trigger",
				onClick: stop
			}, /* @__PURE__ */ React.createElement(MoreOutlined, { style: { fontSize: 24 } })));
		}
		if ("expanded" === (actions === null || actions === void 0 ? void 0 : actions.layout) || showStatus) {
			var _actions$detail3, _actions$edit4;
			return /* @__PURE__ */ React.createElement("div", {
				className: "actions-btn-wrapper",
				ref: actionsWrapperRef
			}, showStatus && cardStatus && /* @__PURE__ */ React.createElement("div", { className: "pisell-card-status-icon" }, /* @__PURE__ */ React.createElement(PisellTags, {
				style: _objectSpread2({
					borderRadius: "6px",
					padding: "2px 8px"
				}, cardStatus === "lastPayment" && { fontSize: "12px" }),
				type: "pill_color",
				color: cardStatusMap[cardStatus]
			}, getText(`pisell-wallet-pass-card-status-${cardStatus}`))), (actions === null || actions === void 0 ? void 0 : actions.detail) && (actions === null || actions === void 0 || (_actions$detail3 = actions.detail) === null || _actions$detail3 === void 0 ? void 0 : _actions$detail3.visible) && /* @__PURE__ */ React.createElement("div", {
				className: "pisell-card-actions-detail-btn",
				onClick: (e) => {
					stop(e);
					handleDetail();
				}
			}, /* @__PURE__ */ React.createElement(ExclamationCircleOutlined, { style: {
				fontSize: 24,
				color: actions.detail.iconColor || "#1570EF"
			} })), (actions === null || actions === void 0 ? void 0 : actions.edit) && (actions === null || actions === void 0 || (_actions$edit4 = actions.edit) === null || _actions$edit4 === void 0 ? void 0 : _actions$edit4.visible) && /* @__PURE__ */ React.createElement("div", {
				className: "pisell-card-actions-edit-btn",
				onClick: (e) => {
					stop(e);
					onEdit();
				}
			}, /* @__PURE__ */ React.createElement(EditOutlined, { style: {
				fontSize: 24,
				color: actions.edit.iconColor || "#1570EF"
			} })));
		}
	};
	const _showHolderName = useMemo(() => {
		return (holder === null || holder === void 0 ? void 0 : holder.holder_type) === "form" && showHolderName;
	}, [holder, showHolderName]);
	const holderName = useMemo(() => {
		var _holder$detail;
		if ((holder === null || holder === void 0 ? void 0 : holder.holder_type) === "form" && !(holder === null || holder === void 0 ? void 0 : holder.holder_id)) return "--";
		return (holder === null || holder === void 0 || (_holder$detail = holder.detail) === null || _holder$detail === void 0 ? void 0 : _holder$detail.main_field) || "";
	}, [holder]);
	const renderNameInfo = () => {
		const shouldShowStoreName = typeof showStoreName === "function" ? showStoreName(props) : showStoreName;
		return /* @__PURE__ */ React.createElement("div", { className: classNames("pisell-card-name-info-wrap") }, /* @__PURE__ */ React.createElement("div", { className: "pisell-card-name-wrap" }, showName && name), _showHolderName && /* @__PURE__ */ React.createElement("div", { className: "pisell-card-holder-name" }, holderName), shouldShowStoreName && /* @__PURE__ */ React.createElement("div", { className: "pisell-card-store-name" }, storeName));
	};
	const handleEditAmount = function() {
		var _ref2 = _asyncToGenerator(function* (e) {
			if (active && enableEditAmount) e.stopPropagation();
			if (!active) return;
			if (enableEditAmount && !disabled) {
				if (onBeforeEditAmount) {
					onBeforeEditAmount === null || onBeforeEditAmount === void 0 || onBeforeEditAmount({
						id,
						name,
						storeName,
						balance,
						redeem,
						code,
						validDate,
						originData
					});
					setIsKeyboardOpen(true);
					setTempAmount((redeem === null || redeem === void 0 ? void 0 : redeem.toString()) || "");
				}
			}
		});
		return function handleEditAmount(_x) {
			return _ref2.apply(this, arguments);
		};
	}();
	const createOriginalBalanceTitleDom = () => /* @__PURE__ */ React.createElement("div", { className: "pisell-card-amount-item-label" }, formatBalanceTitle ? formatBalanceTitle(balanceTitle, {
		originDom: /* @__PURE__ */ React.createElement(React.Fragment, null, balanceTitle || getText("pisell-wallet-pass-card-balance")),
		active,
		data: props
	}) : balanceTitle || getText("pisell-wallet-pass-card-balance"), disabled || isMini ? ": " : "");
	const createOriginalBalanceDom = () => /* @__PURE__ */ React.createElement(Amount, {
		className: "pisell-card-amount-item-value",
		useThousandsSeparator: true,
		value: balance,
		showCurrencySymbol: showBalanceSymbol,
		precision: 2,
		hideDecimalForWholeNumbers: false
	});
	const createOriginalRedeemTitleDom = () => /* @__PURE__ */ React.createElement("span", { className: "pisell-card-amount-item-label-text" }, formatRedeemTitle ? formatRedeemTitle(redeemTitle, {
		originDom: /* @__PURE__ */ React.createElement(React.Fragment, null, redeemTitle || getText("pisell-wallet-pass-card-redeem")),
		active,
		data: props
	}) : redeemTitle || getText("pisell-wallet-pass-card-redeem"), isMini ? ": " : "");
	const createOriginalRedeemDom = () => /* @__PURE__ */ React.createElement(Amount, {
		className: "pisell-card-amount-item-value",
		useThousandsSeparator: true,
		value: redeem,
		showCurrencySymbol: true,
		precision: 2,
		hideDecimalForWholeNumbers: false
	});
	const renderRedeemInfo = () => {
		return showRedeem && !disabled && /* @__PURE__ */ React.createElement("div", { className: "pisell-card-amount-item pisell-wallet-pass-card-redeem" }, /* @__PURE__ */ React.createElement("div", { className: "pisell-card-amount-item-label" }, enableEditAmount && active && /* @__PURE__ */ React.createElement(IconFont, {
			type: "pisell2-edit-05",
			className: "pisell-card-amount-item-label-icon"
		}), createOriginalRedeemTitleDom()), formatRedeem ? formatRedeem(redeem, {
			originDom: createOriginalRedeemDom(),
			active,
			data: props
		}) : createOriginalRedeemDom());
	};
	const renderBalanceInfo = () => {
		var _props$metadata;
		return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "pisell-card-amount-info-wrap" }, showBalance && /* @__PURE__ */ React.createElement("div", { className: "pisell-card-amount-item pisell-card-amount-item-balance" }, createOriginalBalanceTitleDom(), formatBalance ? formatBalance(balance, {
			originDom: createOriginalBalanceDom(),
			active,
			data: props
		}) : createOriginalBalanceDom()), showDiscount && /* @__PURE__ */ React.createElement("div", { className: "pisell-card-amount-item pisell-card-amount-item-discount" }, /* @__PURE__ */ React.createElement("div", { className: "pisell-card-amount-item-label" }, getText("pisell-discount-card-title"), ": "), /* @__PURE__ */ React.createElement("div", { className: "pisell-card-amount-item-value" }, ((_props$metadata = props.metadata) === null || _props$metadata === void 0 ? void 0 : _props$metadata.discount_card_type) === "fixed_amount" ? /* @__PURE__ */ React.createElement(React.Fragment, null, getText("pisell-discount-card-fixed-amount-prefix"), " ", /* @__PURE__ */ React.createElement(Amount, {
			className: "pisell-card-amount-item-value test1",
			useThousandsSeparator: true,
			value: discount,
			precision: 2,
			hideDecimalForWholeNumbers: false
		})) : /* @__PURE__ */ React.createElement(React.Fragment, null, discount, "% ", getText("pisell-discount-card-unit"))))), /* @__PURE__ */ React.createElement("div", {
			className: "pisell-card-code-wrap",
			style: { marginRight: showQrCode && !isMini ? 60 : 0 }
		}, /* @__PURE__ */ React.createElement("div", { className: "pisell-card-code" }, showCode && !isMini && /* @__PURE__ */ React.createElement("div", null, code), showValidDate && (!isMini || !_showHolderName) && /* @__PURE__ */ React.createElement("div", null, formatValidDate))));
	};
	const getInputItem = (name) => {
		if ("validDate" === name) return /* @__PURE__ */ React.createElement(DatePicker, { style: { width: "100%" } });
		if ("balance" === name || "redeem" === name) return /* @__PURE__ */ React.createElement(InputNumber, {
			formatter: (value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ","),
			parser: (value) => value === null || value === void 0 ? void 0 : value.replace(/\$\s?|(,*)/g, ""),
			style: { width: "100%" },
			max: "redeem" === name ? originData === null || originData === void 0 ? void 0 : originData.available_max_amount : void 0
		});
		return /* @__PURE__ */ React.createElement(Input, { style: { width: "100%" } });
	};
	const renderEditModal = () => {
		var _actions$edit5, _actions$edit6;
		return /* @__PURE__ */ React.createElement(PisellModal, {
			title: (actions === null || actions === void 0 || (_actions$edit5 = actions.edit) === null || _actions$edit5 === void 0 ? void 0 : _actions$edit5.dialogTitle) || getText("pisell-wallet-pass-card-edit"),
			open: isShowEdit,
			className: "pisell-wallet-pass-card-edit-modal",
			onCancel: () => setIsShowEdit(false),
			width: 480,
			onOk: _onConfirmEdit,
			okText: getText("pisell-wallet-pass-card-confirm"),
			cancelText: getText("pisell-wallet-pass-card-cancel"),
			platform: "pc"
		}, /* @__PURE__ */ React.createElement(Form, {
			form,
			layout: "vertical",
			style: { padding: "16px 0" }
		}, Array.isArray(actions === null || actions === void 0 || (_actions$edit6 = actions.edit) === null || _actions$edit6 === void 0 ? void 0 : _actions$edit6.fields) && actions.edit.fields.map((item) => {
			return /* @__PURE__ */ React.createElement(Form.Item, {
				key: item.name,
				name: item.name,
				label: item.label,
				rules: [{
					required: true,
					message: getText("pisell-wallet-pass-card-required")
				}]
			}, getInputItem(item.name));
		})));
	};
	const renderDetailModal = () => {
		return /* @__PURE__ */ React.createElement(PisellModal, {
			title: 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__ */ React.createElement(Form, {
			form: form2,
			disabled: true,
			layout: "vertical",
			style: { padding: "16px 0" }
		}, /* @__PURE__ */ React.createElement(Form.Item, {
			name: "name",
			label: getText("pisell-wallet-pass-card-name")
		}, /* @__PURE__ */ React.createElement(Input, null)), /* @__PURE__ */ React.createElement(Form.Item, {
			name: "storeName",
			label: getText("pisell-wallet-pass-card-store-name")
		}, /* @__PURE__ */ React.createElement(Input, null)), /* @__PURE__ */ React.createElement(Form.Item, {
			name: "balance",
			label: getText("pisell-wallet-pass-card-balance")
		}, /* @__PURE__ */ React.createElement(InputNumber, {
			formatter: (value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ","),
			style: { width: "100%" }
		})), /* @__PURE__ */ React.createElement(Form.Item, {
			name: "redeem",
			label: getText("pisell-wallet-pass-card-redeem")
		}, /* @__PURE__ */ React.createElement(InputNumber, {
			formatter: (value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ","),
			style: { width: "100%" }
		})), /* @__PURE__ */ React.createElement(Form.Item, {
			name: "code",
			label: getText("pisell-wallet-pass-card-code")
		}, /* @__PURE__ */ React.createElement(Input, null)), /* @__PURE__ */ React.createElement(Form.Item, {
			name: "validDate",
			label: getText("pisell-wallet-pass-card-valid-to")
		}, /* @__PURE__ */ React.createElement(Input, null))));
	};
	const checkedDom = useMemo(() => {
		if (!isMini || disabled) return null;
		if (showActiveIcon && !active) return /* @__PURE__ */ React.createElement("div", { className: "pisell-card-checked-icon" }, /* @__PURE__ */ React.createElement(Radio, { checked: false }));
		return active && /* @__PURE__ */ React.createElement("div", { className: "pisell-card-checked-icon" }, mode === "multiple" ? /* @__PURE__ */ React.createElement(CheckCircleFilled, { style: {
			fontSize: 20,
			color: "var(--Primary-600, #7F56D9)",
			display: "block"
		} }) : /* @__PURE__ */ React.createElement(Radio, { checked: true }));
	}, [
		showActiveIcon,
		isMini,
		active,
		disabled
	]);
	const handleKeyboardClose = () => {
		setIsKeyboardOpen(false);
		setTempAmount("");
	};
	const handleKeyboardChange = (value) => {
		setTempAmount(value.toString() || "");
	};
	const handleKeyboardEnter = () => {
		setIsKeyboardOpen(false);
		onConfirmEditAmount === null || onConfirmEditAmount === void 0 || onConfirmEditAmount(Math.min(Number(tempAmount), maxRedeem || 0));
	};
	const wrapperStyle = useMemo(() => {
		return showCover && !isMini ? _objectSpread2(_objectSpread2({}, style), {}, {
			paddingBottom: dynamicPaddingBottom,
			backgroundImage: showCover ? `url('${cover || "data:image/jpeg;base64, "}')` : ""
		}) : _objectSpread2(_objectSpread2({}, style), {}, { paddingBottom: dynamicPaddingBottom });
	}, [
		style,
		showCover,
		isMini,
		cover,
		dynamicPaddingBottom
	]);
	const _renderMask = () => {
		if (typeof onSetHolder !== "function") return null;
		if ((holder === null || holder === void 0 ? void 0 : holder.holder_type) === "form" && !(holder === null || holder === void 0 ? void 0 : holder.holder_id)) return /* @__PURE__ */ React.createElement("div", {
			className: "pisell-wallet-add-holder-mask",
			onClick: (e) => e.stopPropagation()
		}, /* @__PURE__ */ React.createElement("div", { className: "pisell-wallet-add-holder-mask-text" }, getText("pisell2.wallet-card.add-holder-tip")), /* @__PURE__ */ React.createElement(Button, {
			type: "primary",
			className: "pisell-wallet-add-holder-mask-button",
			onClick: (e) => {
				e.stopPropagation();
				onSetHolder === null || onSetHolder === void 0 || onSetHolder();
			}
		}, getText("pisell2.wallet-card.add-holder-button-text"), /* @__PURE__ */ React.createElement(IconFont, {
			type: "pisell2-user-edit",
			style: { fontSize: 16 }
		})));
		return null;
	};
	return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", null, renderDetailModal(), renderEditModal()), /* @__PURE__ */ React.createElement("div", {
		className: classNames("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__ */ React.createElement("div", {
		className: "pisell-wallet-pass-card-body",
		onClick: handleEditAmount
	}, renderNameInfo(), renderRedeemInfo(), renderBalanceInfo(), showQrCode && !isMini && /* @__PURE__ */ React.createElement("div", { className: "pisell-card-qr-code" }, /* @__PURE__ */ React.createElement(PisellQrcode, {
		value: qrCode,
		size: 60
	}))), checkedDom, disabled && disabledReason && showDisabledReason && /* @__PURE__ */ React.createElement("div", {
		className: "pisell-card-warn-message",
		ref: warnMessageRef
	}, /* @__PURE__ */ React.createElement(IconFont, {
		className: "pisell-card-icon",
		type: "pisell2-alert-circle"
	}), /* @__PURE__ */ React.createElement("span", null, disabledReason)), /* @__PURE__ */ React.createElement("div", { onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React.createElement(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__ */ React.createElement(Amount$1, {
		key: isKeyboardOpen ? "open" : "close",
		defaultSelect: true,
		value: tempAmount,
		onChange: handleKeyboardChange,
		onEnter: handleKeyboardEnter,
		allowDecimal: true,
		decimalPlaces: 2,
		min: 0,
		selectType: "dark",
		resetText: getText("pisell-wallet-pass-card-reset"),
		doneText: getText("pisell-wallet-pass-card-done"),
		amountProps: {
			showCurrencySymbol: true,
			useThousandsSeparator: true
		}
	})))));
};
//#endregion
export { PisellWalletPassCard as default };
