import usePrefix from "../../../hooks/usePrefix.js";
import dayjs from "dayjs";
import React, { useEffect, useMemo, useRef, useState } from "react";
import { locales } from "@pisell/utils";
import { Button, PisellModal, QRCode } from "@pisell/materials";
import "./index.less";
//#region src/components/eftposPay/adyenScan/Action.tsx
const AdyenScanQrcode = ({ loading, qrCode, payMethodType, isPay, message, onCancelPay }) => {
	const prefix = usePrefix();
	const [cancelModalOpen, setCancelModalOpen] = useState(false);
	const countdownDuration = 300;
	const [remainingSeconds, setRemainingSeconds] = useState(countdownDuration);
	const timerRef = useRef(null);
	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 = useMemo(() => {
		return dayjs().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.createElement("div", { className: "pisell-eftpos-pay-adyen-scan-qrcode-container" }, loading ? /* @__PURE__ */ React.createElement("div", { className: "pisell-eftpos-pay-adyen-scan-methods-loading-container" }, /* @__PURE__ */ React.createElement("div", {
		style: { backgroundImage: `url(${prefix}/loading.png)` },
		className: "pisell-lowcode__eft-pay-img pisell-lowcode__eft-pay-load"
	}), /* @__PURE__ */ React.createElement("span", null, isPay ? locales.getText("page.eftpos-pay.adyen.scan.qrcode.processing") : message || "")) : null, qrCode ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { className: "pisell-eftpos-pay-adyen-scan-qrcode-title" }, locales.getText("page.eftpos-pay.adyen.scan.qrcode.title")(payMethodType)), /* @__PURE__ */ React.createElement(QRCode, {
		value: qrCode,
		size: 240
	}), /* @__PURE__ */ React.createElement("div", { className: "pisell-eftpos-pay-adyen-scan-qrcode-timeout" }, locales.getText("page.eftpos-pay.adyen.scan.qrcode.timeout")(formattedCountdown))) : null, isPay ? /* @__PURE__ */ React.createElement("div", { style: { width: "100%" } }, /* @__PURE__ */ React.createElement(Button, {
		className: "pisell-lowcode__eft-pay-step-item-btn",
		block: true,
		onClick: onCancel
	}, locales.getText("page.eftpos-pay.adyen.scan.cancel-btn"))) : null, cancelModalOpen && /* @__PURE__ */ React.createElement(PisellModal.Information, {
		open: cancelModalOpen,
		title: locales.getText("page.eftpos-pay.adyen.scan.cancel-confirm.title"),
		describe: locales.getText("page.eftpos-pay.adyen.scan.cancel-confirm.content"),
		okText: locales.getText("page.eftpos-pay.adyen.scan.cancel-confirm.ok"),
		cancelText: locales.getText("page.eftpos-pay.adyen.scan.cancel-confirm.cancel"),
		okButtonProps: { danger: true },
		onOk: onModalOk,
		onCancel: onModalCancel
	}));
};
//#endregion
export { AdyenScanQrcode };
