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