import useEngineContext from "../../../hooks/useEngineContext.js";
import usePrefix from "../../../hooks/usePrefix.js";
import Action from "./Action.js";
import { EButtonKeyType, ESettlementStatus } from "./types.js";
import { parseMX51Params, settlementQuery } from "./utils.js";
import React, { useEffect, useState } from "react";
import { PisellModal } from "@pisell/materials";
import { useMemoizedFn } from "ahooks";
import "./index.less";
//#region src/components/eftpos/SettlementModal/index.tsx
const SettlementModal = ({ open, onClose, data }) => {
	var _context$appHelper;
	const context = useEngineContext();
	const prefix = usePrefix();
	const { isTerminal, interaction } = (context === null || context === void 0 || (_context$appHelper = context.appHelper) === null || _context$appHelper === void 0 ? void 0 : _context$appHelper.utils) || {};
	const [receiptModalShow, setReceiptModalShow] = useState(false);
	const [receiptModalData, setReceiptModalData] = useState(null);
	const [action, setAction] = useState(null);
	const [status, setStatus] = useState(ESettlementStatus.Processing);
	const runSettlementQuery = useMemoizedFn(() => {
		setAction(null);
		setStatus(ESettlementStatus.Processing);
		console.log("settlementQuery_start");
		settlementQuery(data, (status, res) => {
			console.log("settlementQuery_callback", status, res);
			const parsedData = parseMX51Params(res === null || res === void 0 ? void 0 : res.data, status, res);
			console.log("settlementQuery_parsedData", parsedData);
			if (parsedData) setAction(parsedData);
			setStatus(status);
		});
	});
	const onCloseReceiptModal = () => {
		setReceiptModalData(null);
		setReceiptModalShow(false);
	};
	const onElementClick = (element) => {
		console.log("onElementClick", element);
		switch (element.key) {
			case EButtonKeyType.SettlementComplete:
				onClose();
				break;
			case EButtonKeyType.RetrySettlement:
				runSettlementQuery();
				break;
			case EButtonKeyType.PrintMerchantReceipt:
				if (typeof isTerminal === "function" ? isTerminal() : false) {
					var _interaction$utils, _interaction$utils$po;
					const receipt = (element === null || element === void 0 ? void 0 : element.receipt) ? Array.isArray(element === null || element === void 0 ? void 0 : element.receipt) ? element === null || element === void 0 ? void 0 : element.receipt : [element === null || element === void 0 ? void 0 : element.receipt] : [];
					interaction === null || interaction === void 0 || (_interaction$utils = interaction.utils) === null || _interaction$utils === void 0 || (_interaction$utils$po = _interaction$utils.postMessageToApp) === null || _interaction$utils$po === void 0 || _interaction$utils$po.call(_interaction$utils, {
						module: "pos",
						key: "print",
						data: receipt
					});
				} else {
					setReceiptModalShow(true);
					setReceiptModalData(element === null || element === void 0 ? void 0 : element.receipt);
				}
				break;
		}
	};
	useEffect(() => {
		if (open && data) runSettlementQuery();
	}, [
		open,
		data,
		runSettlementQuery
	]);
	return /* @__PURE__ */ React.createElement(PisellModal, {
		open,
		closable: false,
		header: false,
		footer: null,
		width: 600
	}, /* @__PURE__ */ React.createElement("div", { className: "pisell-eftpos-settlement-modal" }, status === ESettlementStatus.Processing && /* @__PURE__ */ React.createElement("div", {
		style: {
			backgroundImage: `url(${prefix}/loading.png)`,
			marginBottom: "24px"
		},
		className: "pisell-lowcode__eft-pay-img pisell-lowcode__eft-pay-load"
	}), status === ESettlementStatus.Failed && /* @__PURE__ */ React.createElement("div", {
		style: {
			backgroundImage: `url(${prefix}/warn.png)`,
			marginBottom: "24px"
		},
		className: "pisell-lowcode__eft-pay-img pisell-lowcode__eft-pay-warn"
	}), /* @__PURE__ */ React.createElement(Action, {
		data: action,
		onClick: onElementClick
	})), receiptModalShow ? /* @__PURE__ */ React.createElement(PisellModal, {
		open: receiptModalShow,
		onCancel: onCloseReceiptModal,
		maskClosable: true,
		footer: null
	}, /* @__PURE__ */ React.createElement("div", { style: {
		padding: "16px",
		display: "flex",
		alignItems: "center",
		justifyContent: "center"
	} }, /* @__PURE__ */ React.createElement("span", { style: {
		display: "inline-block",
		whiteSpace: "pre-wrap",
		fontFamily: "monospace",
		backgroundColor: "#fff"
	} }, receiptModalData))) : null);
};
//#endregion
export { SettlementModal as default };
