import useEngineContext from "../../../../hooks/useEngineContext.js";
import locales_default from "../../locales.js";
import React, { useState } from "react";
import { formatAmountWithOptions, locales } from "@pisell/utils";
import Decimal from "decimal.js";
import classNames from "classnames";
import { ChevronUp } from "@pisell/icon";
import "./index.less";
//#region src/components/checkout/components/PaymentDetailModal/index.tsx
function PaymentDetailModal({ amountSymbol, orderInfo, cartData, onClose, summaryData = [], labelMaps, paymentItems = [], customAmount, voidPayment, walletPassData, clientInfo }) {
	console.log("🔄 PaymentDetailModal: orderInfo", orderInfo, cartData);
	const [orderTotalExpanded, setOrderTotalExpanded] = useState(true);
	const [orderPaidExpanded, setOrderPaidExpanded] = useState(true);
	const [balanceToPayExpanded, setBalanceToPayExpanded] = useState(true);
	const context = useEngineContext();
	const getText = (key, fallback) => {
		var _context$appHelper$ut, _context$appHelper$ut2, _context$appHelper$ut3, _context$appHelper$ut4, _checkoutLocales;
		const checkoutText = (_checkoutLocales = 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"]) === null || _checkoutLocales === void 0 ? void 0 : _checkoutLocales[key];
		if (checkoutText) return checkoutText;
		return locales.getText(key) || fallback;
	};
	const getCustomerInfo = () => {
		var _client$contacts;
		const client = clientInfo || {};
		const getValidName = (value) => {
			return value !== void 0 && value !== null && String(value).trim() !== "" ? String(value).trim() : null;
		};
		const displayName = getValidName(client === null || client === void 0 ? void 0 : client.display_name) || getValidName(client === null || client === void 0 ? void 0 : client.name) || getText("pisell2.checkout.customer.default-name") || "Customer";
		return {
			nickname: (client === null || client === void 0 ? void 0 : client.nickname) && (client === null || client === void 0 ? void 0 : client.nickname) !== "Select a customer" ? client === null || client === void 0 ? void 0 : client.nickname : locales.getText("pisell2.checkout.customer.default-name"),
			display_name: displayName,
			email: (client === null || client === void 0 ? void 0 : client.email) || (client === null || client === void 0 || (_client$contacts = client.contacts) === null || _client$contacts === void 0 ? void 0 : _client$contacts.email) || ""
		};
	};
	const CollapseIcon = ({ expanded, color = "black" }) => /* @__PURE__ */ React.createElement("div", { className: classNames("collapse-icon", { expanded }) }, /* @__PURE__ */ React.createElement(ChevronUp, { style: {
		color,
		fontSize: "24px"
	} }));
	const shouldShowVoidButton = (item) => {
		return (item.code === "cash" || item.type === "custom") && !item.isSynced;
	};
	const getTotalPaidAmount = () => {
		return paymentItems.filter((item) => !item.voucher_id || item.isSynced).reduce((total, item) => {
			const amount = new Decimal(Math.abs(item.amount));
			const roundingAmount = new Decimal(Number(item.rounding_amount) > 0 ? 0 : item.rounding_amount || 0);
			return new Decimal(total).plus(amount).plus(roundingAmount).toNumber();
		}, 0);
	};
	const getBalanceDueAmount = () => {
		return new Decimal(orderInfo.totalAmount || 0).sub(new Decimal(getTotalPaidAmount())).toNumber().toFixed(2);
	};
	const handleVoidPayment = (paymentItem) => {
		console.log("Void payment:", paymentItem);
		if (voidPayment) voidPayment(paymentItem);
	};
	const renderPaymentItems = () => {
		const depositPayments = paymentItems.filter((item) => item.order_payment_type === "deposit" && item.isSynced);
		const regularPayments = paymentItems.filter((item) => item.isSynced && item.order_payment_type !== "deposit");
		if (!paymentItems || paymentItems.length === 0 || regularPayments.length === 0 && depositPayments.length === 0) return /* @__PURE__ */ React.createElement("div", { className: classNames("section-content") }, /* @__PURE__ */ React.createElement("div", { className: classNames("no-payment-text") }, getText("no.payments.recorded") || "No payments recorded"));
		const depositPaymentSummary = depositPayments.reduce((acc, item) => {
			return new Decimal(acc).plus(new Decimal(item.amount)).plus(new Decimal(Number(item.rounding_amount) > 0 ? 0 : item.rounding_amount || 0)).toNumber();
		}, 0);
		const regularPaymentSummary = regularPayments.reduce((acc, item) => {
			return new Decimal(acc).plus(new Decimal(item.amount)).plus(new Decimal(Number(item.rounding_amount) > 0 ? 0 : item.rounding_amount || 0)).toNumber();
		}, 0);
		return /* @__PURE__ */ React.createElement("div", { className: classNames("section-content") }, /* @__PURE__ */ React.createElement("div", { className: classNames("payment-record-container") }, depositPayments.length > 0 && /* @__PURE__ */ React.createElement("div", { className: classNames("payment-item-header") }, /* @__PURE__ */ React.createElement("div", null, getText("pisell2.subtotal.deposit") || "Deposit"), /* @__PURE__ */ React.createElement("div", null, formatAmountWithOptions(depositPaymentSummary, amountSymbol, {
			precision: 2,
			hideDecimalForWholeNumbers: false,
			useThousandsSeparator: true,
			showCurrencySymbol: true
		}))), depositPayments.map((item) => /* @__PURE__ */ React.createElement("div", {
			key: item.uuid,
			className: classNames("payment-item")
		}, /* @__PURE__ */ React.createElement("div", { className: classNames("payment-item-bullet") }), /* @__PURE__ */ React.createElement("div", { className: classNames("payment-item-content") }, /* @__PURE__ */ React.createElement("div", { className: classNames("payment-item-text") }, item.name, " - ", (/* @__PURE__ */ new Date()).toLocaleDateString(), " ", getText("pisell2.checkout.payment-detail.by") || "by", " ", getCustomerInfo().nickname), /* @__PURE__ */ React.createElement("div", { className: classNames("payment-item-actions") }, /* @__PURE__ */ React.createElement("div", { className: classNames("payment-item-amount") }, "-", formatAmountWithOptions(new Decimal(Math.abs(item.amount)).plus(new Decimal(Number(item.rounding_amount) > 0 ? 0 : item.rounding_amount || 0)).toNumber(), amountSymbol, {
			precision: 2,
			hideDecimalForWholeNumbers: false,
			useThousandsSeparator: true,
			showCurrencySymbol: true
		})), shouldShowVoidButton(item) && /* @__PURE__ */ React.createElement("button", {
			className: classNames("void-button"),
			onClick: () => handleVoidPayment(item),
			type: "button"
		}, getText("void") || "Void"))))), regularPayments.length > 0 && /* @__PURE__ */ React.createElement("div", { className: classNames("payment-item-header") }, /* @__PURE__ */ React.createElement("div", null, getText("payment.text") || "Payment"), /* @__PURE__ */ React.createElement("div", null, formatAmountWithOptions(regularPaymentSummary, amountSymbol, {
			precision: 2,
			hideDecimalForWholeNumbers: false,
			useThousandsSeparator: true,
			showCurrencySymbol: true
		}))), regularPayments.map((item) => /* @__PURE__ */ React.createElement("div", {
			key: item.uuid,
			className: classNames("payment-item")
		}, /* @__PURE__ */ React.createElement("div", { className: classNames("payment-item-bullet") }), /* @__PURE__ */ React.createElement("div", { className: classNames("payment-item-content") }, /* @__PURE__ */ React.createElement("div", { className: classNames("payment-item-text") }, item.name, " - ", (/* @__PURE__ */ new Date()).toLocaleDateString(), " ", getText("pisell2.checkout.payment-detail.by") || "by", " ", getCustomerInfo().nickname), /* @__PURE__ */ React.createElement("div", { className: classNames("payment-item-actions") }, /* @__PURE__ */ React.createElement("div", { className: classNames("payment-item-amount") }, "-", formatAmountWithOptions(new Decimal(Math.abs(item.amount)).plus(new Decimal(Number(item.rounding_amount) > 0 ? 0 : item.rounding_amount || 0)).toNumber(), amountSymbol, {
			precision: 2,
			hideDecimalForWholeNumbers: false,
			useThousandsSeparator: true,
			showCurrencySymbol: true
		})), shouldShowVoidButton(item) && /* @__PURE__ */ React.createElement("button", {
			className: classNames("void-button"),
			onClick: () => handleVoidPayment(item),
			type: "button"
		}, getText("void") || "Void")))))));
	};
	const renderVoucherItems = () => {
		var _walletPassData$selec;
		const items = [];
		if (walletPassData === null || walletPassData === void 0 || (_walletPassData$selec = walletPassData.selectedWallet) === null || _walletPassData$selec === void 0 ? void 0 : _walletPassData$selec.length) walletPassData.selectedWallet.forEach((wallet) => {
			items.push(/* @__PURE__ */ React.createElement("div", {
				key: `wallet-${wallet.id}`,
				className: classNames("balance-item-row")
			}, /* @__PURE__ */ React.createElement("div", { className: classNames("balance-item-text") }, wallet.name || wallet.product_name || getText("wallet.pass") || "Wallet Pass"), /* @__PURE__ */ React.createElement("div", { className: classNames("balance-item-amount") }, "-", wallet.redeem || formatAmountWithOptions(Math.abs(wallet.savedAmount || 0), amountSymbol, {
				precision: 2,
				hideDecimalForWholeNumbers: false,
				useThousandsSeparator: true,
				showCurrencySymbol: true
			}))));
		});
		if (items.length === 0) return /* @__PURE__ */ React.createElement("div", { className: classNames("balance-item-row", "empty-state") }, /* @__PURE__ */ React.createElement("div", { className: classNames("balance-item-text", "empty-text") }, getText("pisell2.checkout.payment-detail.no-wallet-pass-items") || "No WalletPass payment items"));
		return /* @__PURE__ */ React.createElement(React.Fragment, null, items);
	};
	const getDisplayLabel = (item) => {
		return item.label || labelMaps && labelMaps[item.key] || item.key;
	};
	const getTotalAmount = () => {
		const totalItem = summaryData.find((item) => item.key === "sub_total");
		if (totalItem) return totalItem.value;
		return 0;
	};
	const renderSummaryItems = () => {
		if (!summaryData || summaryData.length === 0) return /* @__PURE__ */ React.createElement("div", { className: classNames("order-details-grid") }, /* @__PURE__ */ React.createElement("div", { className: classNames("order-details-column") }, /* @__PURE__ */ React.createElement("div", { className: classNames("order-row") }, /* @__PURE__ */ React.createElement("div", { className: classNames("order-row-text") }, getText("no.items.found") || "No items found"), /* @__PURE__ */ React.createElement("div", { className: classNames("order-row-amount") }, formatAmountWithOptions(0, amountSymbol, {
			precision: 2,
			hideDecimalForWholeNumbers: false,
			useThousandsSeparator: true,
			showCurrencySymbol: true
		})))));
		const leftItems = summaryData.slice(0, Math.ceil(summaryData.length / 2));
		const rightItems = summaryData.slice(Math.ceil(summaryData.length / 2));
		return /* @__PURE__ */ React.createElement("div", { className: classNames("order-details-grid") }, /* @__PURE__ */ React.createElement("div", { className: classNames("order-details-column") }, leftItems.map((item) => {
			let prefix = "";
			if ((item === null || item === void 0 ? void 0 : item.key) !== "discount") prefix = item.value >= 0 ? "+" : "";
			return /* @__PURE__ */ React.createElement("div", {
				key: item.key,
				className: classNames("order-row")
			}, /* @__PURE__ */ React.createElement("div", { className: classNames("order-row-label") }, getDisplayLabel(item)), /* @__PURE__ */ React.createElement("div", { className: classNames("order-row-amount") }, prefix, formatAmountWithOptions(item.value, amountSymbol, {
				precision: 2,
				hideDecimalForWholeNumbers: false,
				useThousandsSeparator: true,
				showCurrencySymbol: true
			})));
		})), rightItems.length > 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: classNames("divider-vertical") }), /* @__PURE__ */ React.createElement("div", { className: classNames("order-details-column") }, rightItems.map((item) => {
			let prefix = "";
			if ((item === null || item === void 0 ? void 0 : item.key) !== "discount") prefix = item.value >= 0 ? "+" : "";
			return /* @__PURE__ */ React.createElement("div", {
				key: item.key,
				className: classNames("order-row")
			}, /* @__PURE__ */ React.createElement("div", { className: classNames("order-row-label") }, getDisplayLabel(item)), /* @__PURE__ */ React.createElement("div", { className: classNames("order-row-amount") }, prefix, formatAmountWithOptions(item.value, amountSymbol, {
				precision: 2,
				hideDecimalForWholeNumbers: false,
				useThousandsSeparator: true,
				showCurrencySymbol: true
			})));
		}))));
	};
	return /* @__PURE__ */ React.createElement("div", { className: classNames("payment-detail-modal") }, /* @__PURE__ */ React.createElement("div", { className: classNames("main-content") }, /* @__PURE__ */ React.createElement("div", { className: classNames("section-container") }, /* @__PURE__ */ React.createElement("div", {
		className: classNames("section-header"),
		onClick: () => setOrderTotalExpanded(!orderTotalExpanded)
	}, /* @__PURE__ */ React.createElement("div", { className: classNames("section-title-container") }, /* @__PURE__ */ React.createElement("div", { className: classNames("section-title") }, getText("order.total") || "Order Total")), /* @__PURE__ */ React.createElement("div", { className: classNames("section-right") }, /* @__PURE__ */ React.createElement("div", { className: classNames("section-amount") }, formatAmountWithOptions(getTotalAmount(), amountSymbol, {
		precision: 2,
		hideDecimalForWholeNumbers: false,
		useThousandsSeparator: true,
		showCurrencySymbol: true
	})), /* @__PURE__ */ React.createElement(CollapseIcon, { expanded: orderTotalExpanded }))), orderTotalExpanded && /* @__PURE__ */ React.createElement("div", { className: classNames("section-content") }, renderSummaryItems())), /* @__PURE__ */ React.createElement("div", { className: classNames("divider-horizontal") }), /* @__PURE__ */ React.createElement("div", { className: classNames("section-container") }, /* @__PURE__ */ React.createElement("div", {
		className: classNames("section-header"),
		onClick: () => setOrderPaidExpanded(!orderPaidExpanded),
		role: "button",
		tabIndex: 0
	}, /* @__PURE__ */ React.createElement("div", { className: classNames("section-title-container") }, /* @__PURE__ */ React.createElement("div", { className: classNames("section-title") }, getText("order.paid") || "Order Paid")), /* @__PURE__ */ React.createElement("div", { className: classNames("section-right") }, /* @__PURE__ */ React.createElement("div", { className: classNames("section-amount") }, "-", formatAmountWithOptions(getTotalPaidAmount(), amountSymbol, {
		precision: 2,
		hideDecimalForWholeNumbers: false,
		useThousandsSeparator: true,
		showCurrencySymbol: true
	})), /* @__PURE__ */ React.createElement(CollapseIcon, { expanded: orderPaidExpanded }))), orderPaidExpanded && renderPaymentItems())), /* @__PURE__ */ React.createElement("div", { className: classNames("balance-to-pay-section") }, /* @__PURE__ */ React.createElement("div", {
		className: classNames("balance-to-pay-header"),
		onClick: () => setBalanceToPayExpanded(!balanceToPayExpanded),
		role: "button",
		tabIndex: 0
	}, /* @__PURE__ */ React.createElement("div", { className: classNames("section-title-container") }, /* @__PURE__ */ React.createElement("div", { className: classNames("balance-to-pay-title") }, getText("balance.to.pay") || "Balance to Pay")), /* @__PURE__ */ React.createElement("div", { className: classNames("balance-to-pay-right") }, /* @__PURE__ */ React.createElement("div", { className: classNames("balance-to-pay-amount") }, formatAmountWithOptions(getBalanceDueAmount(), amountSymbol, {
		precision: 2,
		hideDecimalForWholeNumbers: false,
		useThousandsSeparator: true,
		showCurrencySymbol: true
	})), /* @__PURE__ */ React.createElement(CollapseIcon, {
		expanded: balanceToPayExpanded,
		color: "#7F56DA"
	}))), balanceToPayExpanded && /* @__PURE__ */ React.createElement("div", { className: classNames("balance-to-pay-content") }, renderVoucherItems()), /* @__PURE__ */ React.createElement("div", { className: classNames("balance-due-section") }, /* @__PURE__ */ React.createElement("div", { className: classNames("balance-due-header") }, /* @__PURE__ */ React.createElement("div", { className: classNames("balance-due-title") }, getText("balance.due") || "Balance Due"), /* @__PURE__ */ React.createElement("div", { className: classNames("balance-due-amount") }, formatAmountWithOptions(customAmount || 0, amountSymbol, {
		precision: 2,
		hideDecimalForWholeNumbers: false,
		useThousandsSeparator: true,
		showCurrencySymbol: true
	}))))));
}
//#endregion
export { PaymentDetailModal as default };
