const require_runtime = require("../../../../../_virtual/_rolldown/runtime.js");
const require_objectSpread2 = require("../../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js");
const require_hooks = require("../../hooks.js");
const require_utils = require("../../store/utils.js");
const require_hooks$1 = require("../../store/hooks.js");
let react = require("react");
react = require_runtime.__toESM(react);
let antd = require("antd");
let _pisell_utils = require("@pisell/utils");
let _pisell_materials = require("@pisell/materials");
require("./index.less");
//#region src/components/pay/toB/components/Custom/index.tsx
const ToBPayCustom = (props) => {
	const { open, title, uuid, expect_amount = "", onCancel, onOk } = props;
	require_hooks$1.useOSPayment();
	const symbol = require_hooks.useSymbol();
	const [inputAmount, setInputAmount] = (0, react.useState)(expect_amount);
	const [showFeeEdit, setShowFeeEdit] = (0, react.useState)(false);
	const [feeConfig, setFeeConfig] = (0, react.useState)({
		percentage: "0.00",
		fixedAmount: "0.00"
	});
	const [calculatedFee, setCalculatedFee] = (0, react.useState)("0.00");
	const [actualPayment, setActualPayment] = (0, react.useState)("0.00");
	const [stillNeedPay, setStillNeedPay] = (0, react.useState)("0.00");
	(0, react.useEffect)(() => {
		setInputAmount(expect_amount);
	}, [expect_amount]);
	(0, react.useEffect)(() => {
		const amount = Number(inputAmount) || 0;
		const percentage = Number(feeConfig.percentage) || 0;
		const fixed = Number(feeConfig.fixedAmount) || 0;
		const totalFee = amount * percentage / 100 + fixed;
		const actual = amount + totalFee;
		setCalculatedFee(totalFee.toFixed(2));
		setActualPayment(actual.toFixed(2));
	}, [inputAmount, feeConfig]);
	(0, react.useEffect)(() => {
		const remaining = (Number(expect_amount) || 0) - (Number(actualPayment) || 0);
		setStillNeedPay(remaining > 0 ? remaining.toFixed(2) : "0.00");
	}, [expect_amount, actualPayment]);
	const handleConfirm = () => {
		onOk(inputAmount, {
			percentage: (Number(feeConfig.percentage) / 100).toString(),
			fixedAmount: feeConfig.fixedAmount
		});
	};
	const handleEditFee = () => {
		setShowFeeEdit(true);
	};
	const handleFeeCancel = () => {
		setShowFeeEdit(false);
	};
	const handleFeeConfirm = () => {
		setShowFeeEdit(false);
	};
	if (showFeeEdit) return /* @__PURE__ */ react.default.createElement(_pisell_materials.PisellModal, {
		title: /* @__PURE__ */ react.default.createElement("div", { style: {
			display: "flex",
			alignItems: "center",
			gap: "8px"
		} }, /* @__PURE__ */ react.default.createElement(antd.Button, {
			type: "text",
			onClick: handleFeeCancel,
			style: {
				padding: 0,
				border: "none",
				background: "none",
				fontSize: "18px"
			}
		}, "←"), _pisell_utils.locales.getText("tobPay.text.custom.fee.modal.title")),
		open,
		onCancel: handleFeeCancel,
		okText: _pisell_utils.locales.getText("tobPay.text.custom.modal.ok"),
		onOk: handleFeeConfirm,
		destroyOnClose: true
	}, /* @__PURE__ */ react.default.createElement("div", { className: "tob-pay-custom-fee" }, /* @__PURE__ */ react.default.createElement("div", { className: "tob-pay-custom-fee-info" }, /* @__PURE__ */ react.default.createElement("div", { className: "tob-pay-custom-fee-info-icon" }, "ⓘ"), /* @__PURE__ */ react.default.createElement("div", { className: "tob-pay-custom-fee-info-text" }, _pisell_utils.locales.getText("tobPay.text.custom.fee.modal.formula"))), /* @__PURE__ */ react.default.createElement("div", { className: "tob-pay-custom-fee-row" }, /* @__PURE__ */ react.default.createElement("div", { className: "tob-pay-custom-fee-section" }, /* @__PURE__ */ react.default.createElement("div", { className: "tob-pay-custom-fee-label" }, _pisell_utils.locales.getText("tobPay.text.custom.fee.modal.percentage")), /* @__PURE__ */ react.default.createElement("div", { className: "tob-pay-custom-fee-input-group" }, /* @__PURE__ */ react.default.createElement(antd.InputNumber, {
		precision: 2,
		value: feeConfig.percentage,
		min: 0,
		formatter: require_utils.limitDecimals,
		parser: require_utils.limitDecimals,
		onChange: (value) => {
			setFeeConfig(require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, feeConfig), {}, { percentage: (value === null || value === void 0 ? void 0 : value.toString()) || "0" }));
		},
		style: { flex: 1 }
	}), /* @__PURE__ */ react.default.createElement("span", { className: "tob-pay-custom-fee-unit" }, "%"))), /* @__PURE__ */ react.default.createElement("div", { className: "tob-pay-custom-fee-plus" }, "+"), /* @__PURE__ */ react.default.createElement("div", { className: "tob-pay-custom-fee-section" }, /* @__PURE__ */ react.default.createElement("div", { className: "tob-pay-custom-fee-label" }, _pisell_utils.locales.getText("tobPay.text.custom.fee.modal.fixed.amount")), /* @__PURE__ */ react.default.createElement("div", { className: "tob-pay-custom-fee-input-group" }, /* @__PURE__ */ react.default.createElement("span", { className: "tob-pay-custom-fee-unit" }, symbol), /* @__PURE__ */ react.default.createElement(antd.InputNumber, {
		precision: 2,
		value: feeConfig.fixedAmount,
		min: 0,
		formatter: require_utils.limitDecimals,
		parser: require_utils.limitDecimals,
		onChange: (value) => {
			setFeeConfig(require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, feeConfig), {}, { fixedAmount: (value === null || value === void 0 ? void 0 : value.toString()) || "0" }));
		},
		style: { flex: 1 }
	}))))));
	return /* @__PURE__ */ react.default.createElement(_pisell_materials.PisellModal, {
		title,
		open,
		onCancel,
		okButtonProps: { disabled: Number(inputAmount) <= 0 },
		okText: _pisell_utils.locales.getText("tobPay.text.custom.modal.ok"),
		onOk: handleConfirm,
		destroyOnClose: true
	}, /* @__PURE__ */ react.default.createElement("div", { className: "tob-pay-custom" }, /* @__PURE__ */ react.default.createElement("div", { className: "tob-pay-custom-row" }, /* @__PURE__ */ react.default.createElement("div", { className: "tob-pay-custom-label" }, _pisell_utils.locales.getText("tobPay.text.custom.modal.remaining.amount")), /* @__PURE__ */ react.default.createElement("div", { className: "tob-pay-custom-value" }, symbol, Number(expect_amount).toFixed(2))), /* @__PURE__ */ react.default.createElement("div", { className: "tob-pay-custom-input-section" }, /* @__PURE__ */ react.default.createElement("div", { className: "tob-pay-custom-label" }, _pisell_utils.locales.getText("tobPay.text.custom.modal.using.custom.amount")), /* @__PURE__ */ react.default.createElement("div", { className: "tob-pay-custom-input-group" }, /* @__PURE__ */ react.default.createElement("span", { className: "tob-pay-custom-currency" }, symbol), /* @__PURE__ */ react.default.createElement(antd.InputNumber, {
		precision: 2,
		value: inputAmount,
		min: 0,
		formatter: require_utils.limitDecimals,
		parser: require_utils.limitDecimals,
		onChange: (value) => {
			if (value !== null && value !== void 0) setInputAmount(value.toString());
			else setInputAmount("0");
		},
		style: { flex: 1 }
	}))), /* @__PURE__ */ react.default.createElement("div", { className: "tob-pay-custom-row" }, /* @__PURE__ */ react.default.createElement("div", { className: "tob-pay-custom-label" }, _pisell_utils.locales.getText("tobPay.text.custom.modal.still.need.pay")), /* @__PURE__ */ react.default.createElement("div", { className: "tob-pay-custom-value" }, symbol, stillNeedPay)), /* @__PURE__ */ react.default.createElement("div", { className: "tob-pay-custom-row" }, /* @__PURE__ */ react.default.createElement("div", { className: "tob-pay-custom-label" }, _pisell_utils.locales.getText("tobPay.text.custom.modal.actual.pay"), "："), /* @__PURE__ */ react.default.createElement("div", { className: "tob-pay-custom-value" }, symbol, actualPayment)), /* @__PURE__ */ react.default.createElement("div", { className: "tob-pay-custom-fee-row" }, /* @__PURE__ */ react.default.createElement("div", { className: "tob-pay-custom-fee-text" }, _pisell_utils.locales.getText("tobPay.text.payment.with.surcharge"), "：", symbol, calculatedFee, " (", _pisell_utils.locales.getText("tobPay.text.custom.modal.fee.rate"), "：", feeConfig.percentage, "% + ", symbol, feeConfig.fixedAmount, ")"), /* @__PURE__ */ react.default.createElement(antd.Button, {
		type: "link",
		onClick: handleEditFee,
		className: "tob-pay-custom-edit-fee"
	}, _pisell_utils.locales.getText("tobPay.text.custom.modal.edit.fee")))));
};
//#endregion
exports.default = ToBPayCustom;
