const require_runtime = require("../../../_virtual/_rolldown/runtime.js");
const require_usePrefix = require("../../../hooks/usePrefix.js");
let dayjs = require("dayjs");
dayjs = require_runtime.__toESM(dayjs);
let react = require("react");
react = require_runtime.__toESM(react);
let _pisell_utils = require("@pisell/utils");
let _pisell_materials = require("@pisell/materials");
require("./index.less");
//#region src/components/eftposPay/adyenScan/Action.tsx
const AdyenScanQrcode = ({ loading, qrCode, payMethodType, isPay, message, onCancelPay }) => {
	const prefix = require_usePrefix.default();
	const [cancelModalOpen, setCancelModalOpen] = (0, react.useState)(false);
	const countdownDuration = 300;
	const [remainingSeconds, setRemainingSeconds] = (0, react.useState)(countdownDuration);
	const timerRef = (0, react.useRef)(null);
	(0, react.useEffect)(() => {
		if (!qrCode) {
			setRemainingSeconds(countdownDuration);
			return;
		}
		setRemainingSeconds(countdownDuration);
		timerRef.current = setInterval(() => {
			setRemainingSeconds((prev) => {
				if (prev <= 1) {
					timerRef.current && clearInterval(timerRef.current);
					return 0;
				}
				return prev - 1;
			});
		}, 1e3);
		return () => {
			timerRef.current && clearInterval(timerRef.current);
		};
	}, [qrCode]);
	const formattedCountdown = (0, react.useMemo)(() => {
		return (0, dayjs.default)().startOf("day").add(remainingSeconds, "second").format("mm:ss");
	}, [remainingSeconds]);
	const onCancel = () => {
		setCancelModalOpen(true);
	};
	const onModalCancel = () => {
		setCancelModalOpen(false);
	};
	const onModalOk = () => {
		onCancelPay();
		timerRef.current && clearInterval(timerRef.current);
		setCancelModalOpen(false);
	};
	return /* @__PURE__ */ react.default.createElement("div", { className: "pisell-eftpos-pay-adyen-scan-qrcode-container" }, loading ? /* @__PURE__ */ react.default.createElement("div", { className: "pisell-eftpos-pay-adyen-scan-methods-loading-container" }, /* @__PURE__ */ react.default.createElement("div", {
		style: { backgroundImage: `url(${prefix}/loading.png)` },
		className: "pisell-lowcode__eft-pay-img pisell-lowcode__eft-pay-load"
	}), /* @__PURE__ */ react.default.createElement("span", null, isPay ? _pisell_utils.locales.getText("page.eftpos-pay.adyen.scan.qrcode.processing") : message || "")) : null, qrCode ? /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement("span", { className: "pisell-eftpos-pay-adyen-scan-qrcode-title" }, _pisell_utils.locales.getText("page.eftpos-pay.adyen.scan.qrcode.title")(payMethodType)), /* @__PURE__ */ react.default.createElement(_pisell_materials.QRCode, {
		value: qrCode,
		size: 240
	}), /* @__PURE__ */ react.default.createElement("div", { className: "pisell-eftpos-pay-adyen-scan-qrcode-timeout" }, _pisell_utils.locales.getText("page.eftpos-pay.adyen.scan.qrcode.timeout")(formattedCountdown))) : null, isPay ? /* @__PURE__ */ react.default.createElement("div", { style: { width: "100%" } }, /* @__PURE__ */ react.default.createElement(_pisell_materials.Button, {
		className: "pisell-lowcode__eft-pay-step-item-btn",
		block: true,
		onClick: onCancel
	}, _pisell_utils.locales.getText("page.eftpos-pay.adyen.scan.cancel-btn"))) : null, cancelModalOpen && /* @__PURE__ */ react.default.createElement(_pisell_materials.PisellModal.Information, {
		open: cancelModalOpen,
		title: _pisell_utils.locales.getText("page.eftpos-pay.adyen.scan.cancel-confirm.title"),
		describe: _pisell_utils.locales.getText("page.eftpos-pay.adyen.scan.cancel-confirm.content"),
		okText: _pisell_utils.locales.getText("page.eftpos-pay.adyen.scan.cancel-confirm.ok"),
		cancelText: _pisell_utils.locales.getText("page.eftpos-pay.adyen.scan.cancel-confirm.cancel"),
		okButtonProps: { danger: true },
		onOk: onModalOk,
		onCancel: onModalCancel
	}));
};
//#endregion
exports.AdyenScanQrcode = AdyenScanQrcode;
