import { useSymbol } from "../../hooks.js";
import { limitDecimals } from "../../store/utils.js";
import { useOSPayment } from "../../store/hooks.js";
import React, { useEffect, useState } from "react";
import { InputNumber } from "antd";
import { locales } from "@pisell/utils";
import { PisellModal } from "@pisell/materials";
import "./index.less";
//#region src/components/pay/toB/components/Cache/index.tsx
const ToBPayCache = (props) => {
	const { open, title, uuid, expect_amount = "", onCancel, onOk } = props;
	const osPayment = useOSPayment();
	const symbol = useSymbol();
	const [inputAmount, setInputAmount] = useState(expect_amount);
	const [payDesc, setPayDesc] = useState("");
	useEffect(() => {
		setInputAmount(expect_amount);
	}, [expect_amount]);
	useEffect(() => {
		osPayment.getRemainingOrderAmountWithInputAsync(inputAmount, uuid).then((res) => {
			if (Number(res) === 0) setPayDesc(locales.getText("tobPay.text.cash.modal.no.change.given"));
			if (Number(res) < 0) setPayDesc(locales.getText("tobPay.text.cash.modal.amount.pay.change")(`${symbol}${Math.abs(Number(res))}`));
			if (Number(res) > 0) setPayDesc(locales.getText("tobPay.text.cash.modal.amount.left.pay.paid")(`${symbol}${res}`));
		});
	}, [inputAmount]);
	return /* @__PURE__ */ React.createElement(PisellModal, {
		title,
		open,
		onCancel,
		okButtonProps: { disabled: Number(inputAmount) <= 0 },
		okText: locales.getText("tobPay.text.cash.modal.ok"),
		onOk: () => {
			onOk(inputAmount);
		},
		destroyOnClose: true
	}, /* @__PURE__ */ React.createElement("div", { className: "tob-pay-cache" }, /* @__PURE__ */ React.createElement("div", { className: "tob-pay-cache-money" }, /* @__PURE__ */ React.createElement("div", { className: "tob-pay-cache-text" }, locales.getText("tobPay.text.cash.modal.amount.toPay")), /* @__PURE__ */ React.createElement("div", { className: "tob-pay-cache-num" }, symbol, Number(expect_amount).toFixed(2))), /* @__PURE__ */ React.createElement("div", { className: "tob-pay-cache-title" }, locales.getText("tobPay.text.cash.modal.input.title")), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(InputNumber, {
		precision: 2,
		value: inputAmount,
		min: 0,
		formatter: limitDecimals,
		parser: limitDecimals,
		onChange: (event) => {
			if (event !== null && event !== void 0) setInputAmount(event);
			else setInputAmount("0");
		},
		style: { width: "100%" }
	})), /* @__PURE__ */ React.createElement("div", { className: "tob-pay-cache-desc" }, payDesc)));
};
//#endregion
export { ToBPayCache as default };
