const require_runtime = require("../../../../_virtual/_rolldown/runtime.js");
const require_objectSpread2 = require("../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js");
const require_objectWithoutProperties = require("../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectWithoutProperties.js");
const require_useEngineContext = require("../../../../hooks/useEngineContext.js");
const require_rightItems = require("../../hooks/rightItems.js");
const require_keyActions = require("../../hooks/keyActions.js");
const require_utils = require("../../utils.js");
const require_locales = require("./locales.js");
let react = require("react");
react = require_runtime.__toESM(react);
let antd = require("antd");
let _pisell_utils = require("@pisell/utils");
let decimal_js = require("decimal.js");
decimal_js = require_runtime.__toESM(decimal_js);
let lodash = require("lodash");
let _pisell_materials = require("@pisell/materials");
let ahooks = require("ahooks");
require("./index.less");
//#region src/pro/priceKeyboard/components/paymentKeyboard/index.tsx
const _excluded = ["containerProps", "children"], _excluded2 = ["renderType", "open"];
const KEYS = {
	PAYMENT: "payment",
	SURCHARGE: "surcharge",
	PERCENT: "percent",
	FIXED: "fixed"
};
const defaultConfig = {
	payment: { enable: true },
	surcharge: { enable: true }
};
const PaymentKeyboardBase = (props) => {
	var _context$appHelper$ut, _context$appHelper$ut2, _context$appHelper$ut3, _context$appHelper$ut4, _mergedConfig$surchar2;
	const context = require_useEngineContext.default();
	const { getData } = context.appHelper.utils;
	const amountSymbol = props.amountSymbol || (getData === null || getData === void 0 ? void 0 : getData("shop_symbol")) || "$";
	_pisell_utils.locales.init(require_locales.default, ((_context$appHelper$ut = context.appHelper.utils) === null || _context$appHelper$ut === void 0 || (_context$appHelper$ut2 = _context$appHelper$ut.getApp) === null || _context$appHelper$ut2 === void 0 || (_context$appHelper$ut2 = _context$appHelper$ut2.call(_context$appHelper$ut)) === null || _context$appHelper$ut2 === void 0 || (_context$appHelper$ut2 = _context$appHelper$ut2.locales) === null || _context$appHelper$ut2 === void 0 || (_context$appHelper$ut3 = _context$appHelper$ut2.getLocale) === null || _context$appHelper$ut3 === void 0 ? void 0 : _context$appHelper$ut3.call(_context$appHelper$ut2)) || ((_context$appHelper$ut4 = context.appHelper.utils) === null || _context$appHelper$ut4 === void 0 || (_context$appHelper$ut4 = _context$appHelper$ut4.storage) === null || _context$appHelper$ut4 === void 0 ? void 0 : _context$appHelper$ut4.get("umi_locale")) || "en");
	const { enableExceedMaxAmount = false, paymentOriginalValue, surchargeDefaultValue, doneText, resetText, onReset, onPay, selectType = "light" } = props;
	const uniqueKeyboardId = `virtual-keyboard-${(0, react.useId)().replace(/:/g, "-")}`;
	(0, react.useEffect)(() => {
		require_utils.setKeyboardTheme(selectType);
	}, [selectType]);
	const [activeKey, setActiveKey] = (0, react.useState)(() => {
		var _props$payment, _props$surcharge;
		if ((_props$payment = props.payment) === null || _props$payment === void 0 ? void 0 : _props$payment.enable) return KEYS.PAYMENT;
		if ((_props$surcharge = props.surcharge) === null || _props$surcharge === void 0 ? void 0 : _props$surcharge.enable) return KEYS.SURCHARGE;
		return KEYS.PAYMENT;
	});
	const [focusedInput, setFocusedInput] = (0, react.useState)(KEYS.PERCENT);
	const [internalPaymentValue, setInternalPaymentValue] = (0, ahooks.useControllableValue)(props, {
		defaultValuePropName: "paymentDefaultValue",
		valuePropName: "paymentValue"
	});
	const [internalSurchargeValue, setInternalSurchargeValue] = (0, ahooks.useControllableValue)(props, {
		defaultValue: surchargeDefaultValue || {
			percent: "",
			fixed: ""
		},
		valuePropName: "surchargeValue"
	});
	const [firstInputStatus, setFirstInputStatus] = (0, react.useState)({
		[KEYS.PAYMENT]: true,
		[KEYS.PERCENT]: true,
		[KEYS.FIXED]: true
	});
	const _onReset = (0, react.useCallback)(() => {
		if (activeKey === KEYS.PAYMENT) {
			setInternalPaymentValue(paymentOriginalValue || "");
			setFirstInputStatus((prev) => require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, prev), {}, { [KEYS.PAYMENT]: true }));
		} else if (activeKey === KEYS.SURCHARGE) if (focusedInput === KEYS.PERCENT) {
			setInternalSurchargeValue(require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, internalSurchargeValue || {}), {}, { percent: (surchargeDefaultValue === null || surchargeDefaultValue === void 0 ? void 0 : surchargeDefaultValue.percent) || "" }));
			setFirstInputStatus((prev) => require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, prev), {}, { [KEYS.PERCENT]: true }));
		} else {
			setInternalSurchargeValue(require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, internalSurchargeValue || {}), {}, { fixed: (surchargeDefaultValue === null || surchargeDefaultValue === void 0 ? void 0 : surchargeDefaultValue.fixed) || "" }));
			setFirstInputStatus((prev) => require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, prev), {}, { [KEYS.FIXED]: true }));
		}
		onReset === null || onReset === void 0 || onReset();
	}, [
		activeKey,
		onReset,
		focusedInput,
		paymentOriginalValue,
		surchargeDefaultValue
	]);
	const currentValue = (0, react.useMemo)(() => {
		if (activeKey === KEYS.PAYMENT) return internalPaymentValue;
		if (activeKey === KEYS.SURCHARGE) {
			if (focusedInput === KEYS.FIXED) return (internalSurchargeValue || {}).fixed || "";
			return (internalSurchargeValue || {}).percent || "";
		}
		return "";
	}, [
		activeKey,
		focusedInput,
		internalPaymentValue,
		internalSurchargeValue
	]);
	const { handleChange } = require_keyActions.default({
		onEnter: () => {
			if (!enableExceedMaxAmount && new decimal_js.default(internalPaymentValue).greaterThan(maxAmount)) return;
			onPay === null || onPay === void 0 || onPay({
				surcharge: internalSurchargeValue,
				amount: internalPaymentValue
			});
		},
		onReset: _onReset,
		onChange: (v) => {
			if (activeKey === KEYS.PAYMENT) {
				setInternalPaymentValue(v);
				setFirstInputStatus((prev) => require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, prev), {}, { [KEYS.PAYMENT]: false }));
			} else if (activeKey === KEYS.SURCHARGE) if (focusedInput === KEYS.FIXED) {
				setInternalSurchargeValue(require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, internalSurchargeValue || {}), {}, { fixed: v }));
				setFirstInputStatus((prev) => require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, prev), {}, { [KEYS.FIXED]: false }));
			} else {
				setInternalSurchargeValue(require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, internalSurchargeValue || {}), {}, { percent: v }));
				setFirstInputStatus((prev) => require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, prev), {}, { [KEYS.PERCENT]: false }));
			}
		},
		max: (0, react.useMemo)(() => {
			if (activeKey === KEYS.SURCHARGE && focusedInput === KEYS.PERCENT) return 100;
		}, [activeKey, focusedInput]),
		value: currentValue,
		scale: 2,
		mode: (0, react.useMemo)(() => {
			if (activeKey === KEYS.PAYMENT) return firstInputStatus.payment ? "replace" : "append";
			else return firstInputStatus[focusedInput] ? "replace" : "append";
		}, [
			firstInputStatus,
			activeKey,
			focusedInput
		])
	});
	const rightItems = require_rightItems.default({
		rightItemsStyle: {},
		doneText: doneText || _pisell_utils.locales.getText("payment-keyboard-pay"),
		resetText: resetText || _pisell_utils.locales.getText("payment-keyboard-reset")
	});
	const mergedConfig = (0, react.useMemo)(() => {
		return (0, lodash.merge)({}, defaultConfig, (0, lodash.pick)(props, ["payment", "surcharge"]));
	}, [props]);
	const options = (0, react.useMemo)(() => {
		var _mergedConfig$payment, _mergedConfig$surchar;
		const opts = [];
		if ((_mergedConfig$payment = mergedConfig.payment) === null || _mergedConfig$payment === void 0 ? void 0 : _mergedConfig$payment.enable) opts.push({
			label: _pisell_utils.locales.getText("payment-keyboard-payment"),
			value: KEYS.PAYMENT
		});
		if ((_mergedConfig$surchar = mergedConfig.surcharge) === null || _mergedConfig$surchar === void 0 ? void 0 : _mergedConfig$surchar.enable) opts.push({
			label: _pisell_utils.locales.getText("payment-keyboard-surcharge"),
			value: KEYS.SURCHARGE
		});
		return opts;
	}, [mergedConfig]);
	const amountFormatter = (amount) => {
		if (amount === "" || amount === void 0) return "";
		return `${amountSymbol}${amount}`;
	};
	const maxAmount = props.paymentOriginalValue || 0;
	const surchargeFee = (0, react.useMemo)(() => {
		return new decimal_js.default(internalPaymentValue || 0).mul(new decimal_js.default((internalSurchargeValue === null || internalSurchargeValue === void 0 ? void 0 : internalSurchargeValue.percent) || 0).div(100)).plus(new decimal_js.default((internalSurchargeValue === null || internalSurchargeValue === void 0 ? void 0 : internalSurchargeValue.fixed) || 0)).toNumber();
	}, [internalPaymentValue, internalSurchargeValue]);
	const totalAmountDue = (0, react.useMemo)(() => {
		return new decimal_js.default(internalPaymentValue || 0).plus(new decimal_js.default(surchargeFee || 0)).toNumber();
	}, [internalPaymentValue, surchargeFee]);
	const remainingAmount = (0, react.useMemo)(() => {
		return new decimal_js.default(maxAmount || 0).minus(new decimal_js.default(internalPaymentValue || 0)).toNumber();
	}, [maxAmount, internalPaymentValue]);
	const renderBottomContent = () => {
		if (enableExceedMaxAmount) if (new decimal_js.default(remainingAmount).lessThan(0)) return /* @__PURE__ */ react.default.createElement("div", { className: "pisell-pro-price-keyboard-input-tip ellipsis" }, _pisell_utils.locales.getText("payment-keyboard-change-due"), ":", " ", /* @__PURE__ */ react.default.createElement(_pisell_materials.PisellText.Amount, {
			hideDecimalForWholeNumbers: false,
			precision: 2,
			value: Math.abs(remainingAmount)
		}));
		else return /* @__PURE__ */ react.default.createElement("div", { className: "pisell-pro-price-keyboard-input-tip ellipsis" }, _pisell_utils.locales.getText("payment-keyboard-remaining"), ":", " ", /* @__PURE__ */ react.default.createElement(_pisell_materials.PisellText.Amount, {
			hideDecimalForWholeNumbers: false,
			precision: 2,
			value: remainingAmount
		}));
		else return /* @__PURE__ */ react.default.createElement("div", { className: "pisell-pro-price-keyboard-input-tip" }, /* @__PURE__ */ react.default.createElement("span", { style: { color: remainingAmount < 0 ? "#F04438" : "#475467" } }, _pisell_utils.locales.getText("payment-keyboard-max"), ":", " ", /* @__PURE__ */ react.default.createElement(_pisell_materials.PisellText.Amount, {
			hideDecimalForWholeNumbers: false,
			precision: 2,
			value: maxAmount
		})), " ", "( ", _pisell_utils.locales.getText("payment-keyboard-remaining"), ":", " ", /* @__PURE__ */ react.default.createElement(_pisell_materials.PisellText.Amount, {
			hideDecimalForWholeNumbers: false,
			precision: 2,
			value: Math.max(remainingAmount, 0)
		}), " ", ")");
	};
	const renderPaymentDisplay = () => {
		return /* @__PURE__ */ react.default.createElement(_pisell_materials.VirtualInput, {
			focused: true,
			value: amountFormatter(internalPaymentValue),
			wrapperStyle: {
				width: "100%",
				backgroundColor: "#ffffff",
				borderRadius: 8,
				padding: 16
			},
			bottomContent: renderBottomContent(),
			preventBlurElements: [uniqueKeyboardId],
			selected: firstInputStatus.payment && !!internalPaymentValue
		});
	};
	const renderSurchargeDisplay = () => {
		var _internalSurchargeVal;
		return /* @__PURE__ */ react.default.createElement("div", { style: {
			display: "grid",
			gridTemplateColumns: "1fr auto 1fr",
			gap: 8,
			alignItems: "center"
		} }, /* @__PURE__ */ react.default.createElement(_pisell_materials.VirtualInput, {
			focused: focusedInput !== KEYS.FIXED,
			value: (internalSurchargeValue === null || internalSurchargeValue === void 0 ? void 0 : internalSurchargeValue.percent) ? `${internalSurchargeValue === null || internalSurchargeValue === void 0 ? void 0 : internalSurchargeValue.percent}%` : "",
			wrapperStyle: {
				backgroundColor: "#ffffff",
				borderRadius: 8,
				padding: 20
			},
			placeholder: _pisell_utils.locales.getText("payment-keyboard-percent"),
			style: { justifyContent: "center" },
			onFocus: () => setFocusedInput(KEYS.PERCENT),
			preventBlurElements: [uniqueKeyboardId],
			selected: firstInputStatus.percent && !!(internalSurchargeValue === null || internalSurchargeValue === void 0 ? void 0 : internalSurchargeValue.percent) && focusedInput !== KEYS.FIXED
		}), /* @__PURE__ */ react.default.createElement("div", { style: {
			color: "#667085",
			fontSize: 36,
			fontWeight: 600
		} }, "+"), /* @__PURE__ */ react.default.createElement(_pisell_materials.VirtualInput, {
			focused: focusedInput === KEYS.FIXED,
			value: amountFormatter((_internalSurchargeVal = internalSurchargeValue === null || internalSurchargeValue === void 0 ? void 0 : internalSurchargeValue.fixed) !== null && _internalSurchargeVal !== void 0 ? _internalSurchargeVal : ""),
			wrapperStyle: {
				backgroundColor: "#ffffff",
				borderRadius: 8,
				padding: 20
			},
			placeholder: _pisell_utils.locales.getText("payment-keyboard-fixed"),
			style: { justifyContent: "center" },
			onFocus: () => setFocusedInput(KEYS.FIXED),
			preventBlurElements: [uniqueKeyboardId],
			selected: firstInputStatus.fixed && !!(internalSurchargeValue === null || internalSurchargeValue === void 0 ? void 0 : internalSurchargeValue.fixed) && focusedInput === KEYS.FIXED
		}));
	};
	const customDisplay = () => {
		if (activeKey === KEYS.PAYMENT) return renderPaymentDisplay();
		if (activeKey === KEYS.SURCHARGE) return renderSurchargeDisplay();
		return null;
	};
	return /* @__PURE__ */ react.default.createElement("div", { className: "pisell-pro-price-keyboard-payment-container" }, (options === null || options === void 0 ? void 0 : options.length) > 1 ? /* @__PURE__ */ react.default.createElement(antd.Segmented, {
		size: "large",
		style: { padding: 6 },
		block: true,
		options,
		value: activeKey,
		onChange: (value) => setActiveKey(value.toString())
	}) : null, /* @__PURE__ */ react.default.createElement("div", null, /* @__PURE__ */ react.default.createElement("div", { className: "pisell-pro-price-keyboard-title ellipsis" }, _pisell_utils.locales.getText("payment-keyboard-total-amount-due"), ":", " ", /* @__PURE__ */ react.default.createElement(_pisell_materials.PisellText.Amount, {
		hideDecimalForWholeNumbers: false,
		precision: 2,
		value: totalAmountDue
	})), ((_mergedConfig$surchar2 = mergedConfig.surcharge) === null || _mergedConfig$surchar2 === void 0 ? void 0 : _mergedConfig$surchar2.enable) ? /* @__PURE__ */ react.default.createElement("div", { className: "pisell-pro-price-keyboard-subtitle ellipsis" }, _pisell_utils.locales.getText("payment-keyboard-inc-surcharge"), ":", " ", /* @__PURE__ */ react.default.createElement(_pisell_materials.PisellText.Amount, {
		hideDecimalForWholeNumbers: false,
		precision: 2,
		value: surchargeFee
	}), " ", "(", (internalSurchargeValue === null || internalSurchargeValue === void 0 ? void 0 : internalSurchargeValue.percent) || "0", "% +", " ", /* @__PURE__ */ react.default.createElement(_pisell_materials.PisellText.Amount, {
		hideDecimalForWholeNumbers: false,
		precision: 2,
		value: (internalSurchargeValue === null || internalSurchargeValue === void 0 ? void 0 : internalSurchargeValue.fixed) || 0
	}), ")") : null), /* @__PURE__ */ react.default.createElement("div", { className: "pisell-pro-price-keyboard-payment" }, activeKey && customDisplay(), /* @__PURE__ */ react.default.createElement(_pisell_materials.Keyboard, {
		rightItems,
		onChange: handleChange,
		id: uniqueKeyboardId
	})));
};
const PaymentKeyboard = (props) => {
	const { containerProps, children } = props, keyboardProps = require_objectWithoutProperties._objectWithoutProperties(props, _excluded);
	const _ref = containerProps || {}, { renderType, open } = _ref, restProps = require_objectWithoutProperties._objectWithoutProperties(_ref, _excluded2);
	if (!containerProps) return /* @__PURE__ */ react.default.createElement(PaymentKeyboardBase, keyboardProps);
	if (renderType === "popover") return /* @__PURE__ */ react.default.createElement(antd.Popover, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({
		key: `${open}`,
		open,
		trigger: "click",
		className: "pisell-payment-keyboard-container pisell-payment-keyboard-popover"
	}, restProps), {}, { content: /* @__PURE__ */ react.default.createElement(PaymentKeyboardBase, keyboardProps) }), children);
	if (renderType === "modal") return open ? /* @__PURE__ */ react.default.createElement(_pisell_materials.PisellModal, require_objectSpread2._objectSpread2({
		platform: "pc",
		open: true,
		width: "unset",
		header: null,
		footer: false,
		mask: false,
		maskClosable: true,
		bodyStyle: {
			padding: "0px",
			backgroundColor: "transparent"
		},
		closeIcon: null,
		className: "pisell-payment-keyboard-container pisell-payment-keyboard-modal",
		destroyOnHidden: true
	}, restProps), /* @__PURE__ */ react.default.createElement(PaymentKeyboardBase, keyboardProps)) : null;
	return /* @__PURE__ */ react.default.createElement(PaymentKeyboardBase, keyboardProps);
};
//#endregion
exports.default = PaymentKeyboard;
