const require_runtime = require("../../../../_virtual/_rolldown/runtime.js");
const require_objectSpread2 = require("../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js");
const require_utils = require("./utils.js");
require("./PaymentResultToastProvider.js");
let react = require("react");
react = require_runtime.__toESM(react);
let _pisell_materials = require("@pisell/materials");
let classnames = require("classnames");
classnames = require_runtime.__toESM(classnames);
let _pisell_icon_es_XClose = require("@pisell/icon/es/XClose");
_pisell_icon_es_XClose = require_runtime.__toESM(_pisell_icon_es_XClose);
require("./index.less");
//#region src/components/checkout/components/PaymentResultToast/index.tsx
const COMPONENT_PREFIX = "payment-result-toast";
const getClassName = (...classNames) => {
	return (0, classnames.default)(classNames.filter(Boolean).map((className) => typeof className === "string" && !className.startsWith(COMPONENT_PREFIX) ? `${COMPONENT_PREFIX}-${className}` : className));
};
const getBaseClassName = (extraClassName) => {
	return (0, classnames.default)(COMPONENT_PREFIX, extraClassName);
};
const PaymentResultToast = (0, react.memo)((props) => {
	const { visible = false, onClose, className, statusClassName = "success", title, subtitle, changeDueText, actionButtons = [], autoClose = false, autoCloseDelay = 30, showCountdownProgress = true, onCountdownComplete, width, height, mask = false, maskClosable = false, closable = true, zIndex, clickOutsideToClose = true } = props;
	const [isAnimating, setIsAnimating] = (0, react.useState)(false);
	const countdownTimeoutRef = (0, react.useRef)(null);
	const modalContentRef = (0, react.useRef)(null);
	(0, react.useRef)(null);
	const onCloseRef = (0, react.useRef)(onClose);
	const onCountdownCompleteRef = (0, react.useRef)(onCountdownComplete);
	onCloseRef.current = onClose;
	onCountdownCompleteRef.current = onCountdownComplete;
	const modalConfig = require_utils.getDefaultModalConfig();
	const clearCountdown = (0, react.useCallback)(() => {
		if (countdownTimeoutRef.current) {
			clearTimeout(countdownTimeoutRef.current);
			countdownTimeoutRef.current = null;
		}
		setIsAnimating(false);
	}, []);
	const startCountdown = (0, react.useCallback)(() => {
		if (!autoClose || !visible) return;
		clearCountdown();
		setIsAnimating(true);
		countdownTimeoutRef.current = setTimeout(() => {
			var _onCountdownCompleteR, _onCloseRef$current;
			countdownTimeoutRef.current = null;
			(_onCountdownCompleteR = onCountdownCompleteRef.current) === null || _onCountdownCompleteR === void 0 || _onCountdownCompleteR.call(onCountdownCompleteRef);
			(_onCloseRef$current = onCloseRef.current) === null || _onCloseRef$current === void 0 || _onCloseRef$current.call(onCloseRef);
		}, autoCloseDelay * 1e3);
	}, [
		autoClose,
		autoCloseDelay,
		visible,
		clearCountdown
	]);
	(0, react.useEffect)(() => {
		if (visible) {
			setIsAnimating(false);
			if (autoClose) startCountdown();
		} else clearCountdown();
		return clearCountdown;
	}, [
		visible,
		autoClose,
		startCountdown,
		clearCountdown
	]);
	(0, react.useEffect)(() => {
		return clearCountdown;
	}, [clearCountdown]);
	(0, react.useEffect)(() => {
		if (!clickOutsideToClose || !visible) return;
		const handleClickOutside = (event) => {
			const target = event.target;
			const modalContent = modalContentRef.current;
			if (!modalContent) return;
			if (!modalContent.contains(target)) {
				var _onCloseRef$current2;
				clearCountdown();
				(_onCloseRef$current2 = onCloseRef.current) === null || _onCloseRef$current2 === void 0 || _onCloseRef$current2.call(onCloseRef);
			}
		};
		document.addEventListener("mousedown", handleClickOutside);
		return () => {
			document.removeEventListener("mousedown", handleClickOutside);
		};
	}, [
		clickOutsideToClose,
		visible,
		clearCountdown
	]);
	const handleClose = (0, react.useCallback)(() => {
		var _onCloseRef$current3;
		clearCountdown();
		(_onCloseRef$current3 = onCloseRef.current) === null || _onCloseRef$current3 === void 0 || _onCloseRef$current3.call(onCloseRef);
	}, [clearCountdown]);
	const renderTitle = () => {
		if (!subtitle) return null;
		if (closable) return /* @__PURE__ */ react.default.createElement("div", { style: {
			display: "flex",
			justifyContent: "space-between",
			alignItems: "center",
			gap: "16px"
		} }, subtitle, /* @__PURE__ */ react.default.createElement(_pisell_materials.Button, {
			style: {
				display: "flex",
				alignItems: "center",
				justifyContent: "center"
			},
			type: "text",
			icon: /* @__PURE__ */ react.default.createElement(_pisell_icon_es_XClose.default, { style: {
				fontSize: "40px",
				color: "white"
			} }),
			onClick: handleClose
		}));
		return subtitle;
	};
	const renderChangeDueInfo = () => {
		if (!changeDueText) return null;
		return /* @__PURE__ */ react.default.createElement("div", { className: getClassName("subtitle") }, /* @__PURE__ */ react.default.createElement("div", { className: getClassName("subtitle-text change-due") }, changeDueText));
	};
	const renderCountdownProgress = () => {
		if (!autoClose || !showCountdownProgress || !visible) return null;
		const progressBarClassName = (0, classnames.default)(getClassName("countdown-progress-bar"), { "animating": isAnimating });
		const animationStyle = isAnimating ? { animationDuration: `${autoCloseDelay}s` } : {};
		return /* @__PURE__ */ react.default.createElement("div", { className: getClassName("countdown") }, /* @__PURE__ */ react.default.createElement("div", { className: getClassName("countdown-text") }), /* @__PURE__ */ react.default.createElement("div", { className: getClassName("countdown-progress") }, /* @__PURE__ */ react.default.createElement("div", {
			className: progressBarClassName,
			style: animationStyle
		})));
	};
	const handleButtonClick = (0, react.useCallback)(() => {
		if (autoClose && countdownTimeoutRef.current) clearCountdown();
	}, [autoClose, clearCountdown]);
	const renderActionButtons = () => {
		if (!actionButtons || actionButtons.length === 0) return null;
		return /* @__PURE__ */ react.default.createElement("div", { onClick: handleButtonClick }, /* @__PURE__ */ react.default.createElement(_pisell_materials.ButtonGroupPreview, { buttonGroupList: actionButtons }));
	};
	return /* @__PURE__ */ react.default.createElement(_pisell_materials.PisellModal, {
		open: visible,
		onCancel: handleClose,
		footer: null,
		width: width || modalConfig.width,
		mask,
		maskClosable,
		closable: false,
		className: getBaseClassName(`${className} ${statusClassName} ${mask ? "payment-result-toast-with-mask" : ""}`),
		wrapClassName: `toast-modal-wrap ${mask ? "toast-modal-wrap-with-mask" : ""}`,
		style: require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, height ? { height: `${height}px` } : {}), {}, {
			position: "static",
			top: "auto",
			left: "auto",
			right: "auto",
			bottom: "auto",
			transform: "none",
			margin: 0,
			padding: 0,
			width: "100%",
			maxWidth: "none"
		}),
		destroyOnClose: false,
		forceRender: true,
		focusTriggerAfterClose: false,
		transitionName: "",
		maskTransitionName: "",
		centered: mask,
		getContainer: mask ? void 0 : false
	}, /* @__PURE__ */ react.default.createElement("div", {
		ref: modalContentRef,
		className: getClassName("content", statusClassName),
		style: {
			position: "relative",
			zIndex: 1
		}
	}, renderTitle(), renderChangeDueInfo(), renderActionButtons(), renderCountdownProgress()));
});
PaymentResultToast.displayName = "PaymentResultToast";
//#endregion
exports.default = PaymentResultToast;
