import { _asyncToGenerator } from "../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/asyncToGenerator.js";
import { useCheckPairRequest, useUnPairRequest } from "./hooks.js";
import React, { useMemo, useState } from "react";
import { locales } from "@pisell/utils";
import { Icon, PisellModal } from "@pisell/materials";
import "./index.less";
//#region src/components/eftpos/PairModal/index.tsx
const PairModal = ({ visible, data, onCancel, onCheck, onConfirm }) => {
	const { pairResponse, type } = data || {};
	const [cancelLoading, setCancelLoading] = useState(false);
	const [okLoading, setOkLoading] = useState(false);
	const [status, setStatus] = useState("pairing");
	const checkPairRequest = useCheckPairRequest();
	const unPairRequest = useUnPairRequest();
	const textInfo = useMemo(() => {
		return locales.getText("page.eftpos.text.pair.modal.content.text-info")(status);
	}, [status]);
	const styleInfo = useMemo(() => {
		switch (status) {
			case "pairing": return {
				border: "1px solid #FEC84B",
				backgroundColor: "#FFFCF5",
				iconColor: "#DC6803",
				color: "#B54708",
				circle1Border: "2px solid rgba(220, 104, 3, 0.1)",
				circle2Border: "2px solid rgba(220, 104, 3, 0.5)"
			};
			case "success": return {
				border: "1px solid #75E0A7",
				backgroundColor: "#F6FEF9",
				iconColor: "#079455",
				color: "#067647",
				circle1Border: "2px solid rgba(7, 148, 85, 0.1)",
				circle2Border: "2px solid rgba(7, 148, 85, 0.5)"
			};
			case "failed": return {
				border: "1px solid #FDA29B",
				backgroundColor: "#FFFBFA",
				iconColor: "#D92D20",
				color: "#B42318",
				circle1Border: "2px solid rgba(217, 45, 32, 0.1)",
				circle2Border: "2px solid rgba(217, 45, 32, 0.5)"
			};
		}
	}, [status]);
	const _onCancel = function() {
		var _ref = _asyncToGenerator(function* () {
			if (cancelLoading || okLoading) return;
			try {
				setCancelLoading(true);
				yield unPairRequest.run({
					type,
					pair_response: pairResponse
				});
			} catch (error) {
				console.error("onCancel error =>", error);
			} finally {
				setCancelLoading(false);
			}
			onCancel === null || onCancel === void 0 || onCancel();
		});
		return function _onCancel() {
			return _ref.apply(this, arguments);
		};
	}();
	const _onCheck = function() {
		var _ref2 = _asyncToGenerator(function* () {
			try {
				setOkLoading(true);
				const response = yield checkPairRequest.run({
					type,
					pair_response: pairResponse
				});
				if ((response === null || response === void 0 ? void 0 : response.code) == 200) setStatus("success");
				else setStatus("failed");
			} catch (error) {
				console.error("onCheck error =>", error);
				setStatus("failed");
			} finally {
				setOkLoading(false);
			}
		});
		return function _onCheck() {
			return _ref2.apply(this, arguments);
		};
	}();
	const _onOk = function() {
		var _ref3 = _asyncToGenerator(function* () {
			if (cancelLoading || okLoading) return;
			if (status === "pairing" || status === "failed") {
				yield _onCheck();
				onCheck === null || onCheck === void 0 || onCheck();
			} else if (status === "success") onConfirm === null || onConfirm === void 0 || onConfirm();
		});
		return function _onOk() {
			return _ref3.apply(this, arguments);
		};
	}();
	return /* @__PURE__ */ React.createElement(PisellModal, {
		open: visible,
		header: false,
		maskClosable: false,
		closable: false,
		zIndex: 9999,
		onCancel: _onCancel,
		onOk: _onOk,
		okText: textInfo.okButtonText,
		cancelText: textInfo.cancenButtonText,
		okButtonProps: { loading: okLoading },
		cancelButtonProps: { loading: cancelLoading }
	}, /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__pos-device-pair-modal-content" }, /* @__PURE__ */ React.createElement("div", {
		className: "pisell-lowcode__pos-device-pair-modal-content-top",
		style: {
			border: styleInfo.border,
			backgroundColor: styleInfo.backgroundColor,
			color: styleInfo.color
		}
	}, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", {
		className: "pisell-lowcode__pos-device-pair-modal-content-top-circle-1",
		style: { border: styleInfo.circle1Border }
	}, /* @__PURE__ */ React.createElement("div", {
		className: "pisell-lowcode__pos-device-pair-modal-content-top-circle-2",
		style: { border: styleInfo.circle2Border }
	}, /* @__PURE__ */ React.createElement(Icon, {
		type: "pisell2-alert-circle",
		size: 20,
		style: {
			color: styleInfo.iconColor,
			opacity: 1
		}
	})))), /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__pos-device-pair-modal-content-top-right" }, /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__pos-device-pair-modal-content-top-right-title" }, textInfo.title), /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__pos-device-pair-modal-content-top-right-description" }, textInfo.description))), status !== "success" && /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__pos-device-pair-modal-content-code" }, /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__pos-device-pair-modal-content-code-title" }, textInfo.codeTitle), /* @__PURE__ */ React.createElement("div", { className: "pisell-lowcode__pos-device-pair-modal-content-code-value" }, (pairResponse === null || pairResponse === void 0 ? void 0 : pairResponse.confirmation_code) || "-"))));
};
//#endregion
export { PairModal as default };
