import { _objectSpread2 } from "../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
import useEngineContext from "../../../../hooks/useEngineContext.js";
import NumericStepper from "../../../../pro/NumericStepper/index.js";
import { getDenominationId, normalizeAmount } from "../../utils.js";
import { useResponsive } from "../../../../hooks/useResponsive.js";
import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from "react";
import { locales } from "@pisell/utils";
import { Button, Iconfont, PisellModal, Tag } from "@pisell/materials";
import { ExclamationCircleOutlined } from "@ant-design/icons";
import "./index.less";
//#region src/components/pisellCashCounting/components/CashCountingModal/index.tsx
const PREFIX = "pisell-private-cash-counting-modal";
const formatAmount$1 = (value, symbol, precision) => {
	return `${symbol}${new Intl.NumberFormat(void 0, {
		minimumFractionDigits: precision,
		maximumFractionDigits: precision
	}).format(value)}`;
};
const CashCountingModal = forwardRef((props, ref) => {
	var _context$appHelper;
	const { currencyCode, currencyDenominations, decimalPlaces, symbol, modalWidth, onCancel, onConfirm } = props;
	const { isTerminal } = ((_context$appHelper = useEngineContext().appHelper) === null || _context$appHelper === void 0 ? void 0 : _context$appHelper.utils) || {};
	const [open, setOpen] = useState(false);
	const [draftQuantities, setDraftQuantities] = useState({});
	const isIpad = useResponsive(1200);
	const isMobile = useResponsive(450);
	useImperativeHandle(ref, () => ({
		open: ({ initialQuantities }) => {
			setDraftQuantities(initialQuantities);
			setOpen(true);
		},
		close: () => setOpen(false)
	}));
	const groupedDenominations = useMemo(() => {
		return currencyDenominations.reduce((acc, item) => {
			acc[item.denomination_type].push(item);
			return acc;
		}, {
			bill: [],
			coin: []
		});
	}, [currencyDenominations]);
	const calculatedDetails = useMemo(() => {
		return currencyDenominations.map((d) => {
			var _draftQuantities$getD;
			const qty = (_draftQuantities$getD = draftQuantities[getDenominationId(d)]) !== null && _draftQuantities$getD !== void 0 ? _draftQuantities$getD : 0;
			return {
				denomination: d,
				quantity: qty,
				amount: normalizeAmount(d.denomination_value * qty, decimalPlaces)
			};
		});
	}, [
		currencyDenominations,
		draftQuantities,
		decimalPlaces,
		getDenominationId,
		normalizeAmount
	]);
	const billSubtotal = useMemo(() => calculatedDetails.filter((i) => i.denomination.denomination_type === "bill").reduce((s, i) => s + i.amount, 0), [calculatedDetails]);
	const coinSubtotal = useMemo(() => calculatedDetails.filter((i) => i.denomination.denomination_type === "coin").reduce((s, i) => s + i.amount, 0), [calculatedDetails]);
	const totalAmount = useMemo(() => billSubtotal + coinSubtotal, [billSubtotal, coinSubtotal]);
	const handleClose = () => {
		setOpen(false);
		if (typeof onCancel === "function") onCancel();
	};
	const handleClear = () => {
		const reset = {};
		currencyDenominations.forEach((d) => reset[getDenominationId(d)] = 0);
		setDraftQuantities(reset);
	};
	const handleConfirm = () => {
		const payload = {
			amount: totalAmount,
			currencyCode,
			decimalPlaces,
			billSubtotal,
			coinSubtotal,
			details: calculatedDetails,
			quantities: draftQuantities
		};
		if (typeof onConfirm === "function") onConfirm(payload);
		setOpen(false);
	};
	const renderSection = (type, title, subtotal) => {
		const items = groupedDenominations[type];
		if (!items.length) return null;
		return /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}__section` }, /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}__section-header` }, /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}__section-title` }, /* @__PURE__ */ React.createElement("span", { className: `${PREFIX}__dot ${PREFIX}__dot--${type}` }), /* @__PURE__ */ React.createElement("span", null, title)), /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}__section-subtotal` }, /* @__PURE__ */ React.createElement("span", null, locales.getText("pisell-cash-counting.subtotal")), /* @__PURE__ */ React.createElement("strong", null, formatAmount$1(subtotal, symbol, decimalPlaces)))), /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}__denomination-list` }, items.map((item) => {
			var _draftQuantities$id;
			const id = getDenominationId(item);
			const qty = (_draftQuantities$id = draftQuantities[id]) !== null && _draftQuantities$id !== void 0 ? _draftQuantities$id : 0;
			const amt = normalizeAmount(item.denomination_value * qty, decimalPlaces);
			return /* @__PURE__ */ React.createElement("div", {
				className: `${PREFIX}__denomination-row`,
				key: id
			}, /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}__denomination-left` }, /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}__denomination-label ${PREFIX}__denomination-label--${type}` }, item.denomination_label), /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}__stepper-wrap` }, /* @__PURE__ */ React.createElement(NumericStepper, {
				className: `${PREFIX}__stepper`,
				min: 0,
				max: 9999,
				value: qty,
				plusOnlyAtZero: false,
				shape: "square",
				onChange: (val) => setDraftQuantities((prev) => _objectSpread2(_objectSpread2({}, prev), {}, { [id]: val }))
			}))), /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}__row-amount` }, formatAmount$1(amt, symbol, decimalPlaces)));
		})));
	};
	const renderHeader = useCallback(() => {
		return /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}__modal-header` }, /* @__PURE__ */ React.createElement(Iconfont, {
			type: "pisell2-cash",
			className: `${PREFIX}__modal-header-icon`
		}), /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}__modal-header-title` }, locales.getText("pisell-cash-counting.countCash")), /* @__PURE__ */ React.createElement(Tag, {
			color: "blue",
			style: { border: "none" }
		}, currencyCode));
	}, [currencyCode]);
	const renderFooter = useCallback(() => {
		return /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}__footer` }, /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}__summary` }, /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}__summary-row` }, /* @__PURE__ */ React.createElement("span", null, locales.getText("pisell-cash-counting.billsSubtotal")), /* @__PURE__ */ React.createElement("strong", null, formatAmount$1(billSubtotal, symbol, decimalPlaces))), /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}__summary-row` }, /* @__PURE__ */ React.createElement("span", null, locales.getText("pisell-cash-counting.coinsSubtotal")), /* @__PURE__ */ React.createElement("strong", null, formatAmount$1(coinSubtotal, symbol, decimalPlaces))), /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}__total-row` }, /* @__PURE__ */ React.createElement("span", null, locales.getText("pisell-cash-counting.total")), /* @__PURE__ */ React.createElement("strong", null, formatAmount$1(totalAmount, symbol, decimalPlaces)))), /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}__actions` }, /* @__PURE__ */ React.createElement(Button, {
			type: "text",
			size: "large",
			onClick: handleClear
		}, locales.getText("pisell-cash-counting.clearAll")), /* @__PURE__ */ React.createElement(Button, {
			size: "large",
			onClick: handleClose
		}, locales.getText("pisell-cash-counting.cancel")), /* @__PURE__ */ React.createElement(Button, {
			type: "primary",
			size: "large",
			disabled: !currencyDenominations.length,
			onClick: handleConfirm
		}, locales.getText("pisell-cash-counting.confirm"))));
	}, [
		coinSubtotal,
		billSubtotal,
		totalAmount,
		currencyDenominations,
		handleClear,
		handleClose,
		handleConfirm
	]);
	return /* @__PURE__ */ React.createElement(PisellModal, {
		destroyOnClose: true,
		maskClosable: false,
		footer: renderFooter(),
		open,
		title: renderHeader(),
		className: `${PREFIX}__modal-wrap`,
		bodyStyle: { padding: 0 },
		width: modalWidth ? modalWidth : (isTerminal === null || isTerminal === void 0 ? void 0 : isTerminal()) ? "80%" : "880px",
		onCancel: handleClose
	}, /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}__modal` }, /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}__modal-intro` }, /* @__PURE__ */ React.createElement(ExclamationCircleOutlined, { style: {
		fontSize: 18,
		color: "#F2A63A"
	} }), locales.getText("pisell-cash-counting.subtitle")), /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}__scroll ${isIpad || isMobile ? `${PREFIX}__scroll-column` : ""} ${isMobile ? `${PREFIX}__scroll-mobile` : ""}` }, currencyDenominations.length === 0 ? /* @__PURE__ */ React.createElement("div", { className: `${PREFIX}__empty` }, locales.getText("pisell-cash-counting.empty")) : /* @__PURE__ */ React.createElement(React.Fragment, null, renderSection("bill", locales.getText("pisell-cash-counting.bills"), billSubtotal), renderSection("coin", locales.getText("pisell-cash-counting.coins"), coinSubtotal)))));
});
//#endregion
export { CashCountingModal as default };
