import { _objectSpread2 } from "../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
import { getDefaultModalConfig } from "./utils.js";
import "./PaymentResultToastProvider.js";
import React, { memo, useCallback, useEffect, useRef, useState } from "react";
import { Button, ButtonGroupPreview, PisellModal } from "@pisell/materials";
import classNames from "classnames";
import XClose from "@pisell/icon/es/XClose";
import "./index.less";
//#region src/components/checkout/components/PaymentResultToast/index.tsx
const COMPONENT_PREFIX = "payment-result-toast";
const getClassName = (...classNames$1) => {
	return classNames(classNames$1.filter(Boolean).map((className) => typeof className === "string" && !className.startsWith(COMPONENT_PREFIX) ? `${COMPONENT_PREFIX}-${className}` : className));
};
const getBaseClassName = (extraClassName) => {
	return classNames(COMPONENT_PREFIX, extraClassName);
};
const PaymentResultToast = 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] = useState(false);
	const countdownTimeoutRef = useRef(null);
	const modalContentRef = useRef(null);
	useRef(null);
	const onCloseRef = useRef(onClose);
	const onCountdownCompleteRef = useRef(onCountdownComplete);
	onCloseRef.current = onClose;
	onCountdownCompleteRef.current = onCountdownComplete;
	const modalConfig = getDefaultModalConfig();
	const clearCountdown = useCallback(() => {
		if (countdownTimeoutRef.current) {
			clearTimeout(countdownTimeoutRef.current);
			countdownTimeoutRef.current = null;
		}
		setIsAnimating(false);
	}, []);
	const startCountdown = 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
	]);
	useEffect(() => {
		if (visible) {
			setIsAnimating(false);
			if (autoClose) startCountdown();
		} else clearCountdown();
		return clearCountdown;
	}, [
		visible,
		autoClose,
		startCountdown,
		clearCountdown
	]);
	useEffect(() => {
		return clearCountdown;
	}, [clearCountdown]);
	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 = 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.createElement("div", { style: {
			display: "flex",
			justifyContent: "space-between",
			alignItems: "center",
			gap: "16px"
		} }, subtitle, /* @__PURE__ */ React.createElement(Button, {
			style: {
				display: "flex",
				alignItems: "center",
				justifyContent: "center"
			},
			type: "text",
			icon: /* @__PURE__ */ React.createElement(XClose, { style: {
				fontSize: "40px",
				color: "white"
			} }),
			onClick: handleClose
		}));
		return subtitle;
	};
	const renderChangeDueInfo = () => {
		if (!changeDueText) return null;
		return /* @__PURE__ */ React.createElement("div", { className: getClassName("subtitle") }, /* @__PURE__ */ React.createElement("div", { className: getClassName("subtitle-text change-due") }, changeDueText));
	};
	const renderCountdownProgress = () => {
		if (!autoClose || !showCountdownProgress || !visible) return null;
		const progressBarClassName = classNames(getClassName("countdown-progress-bar"), { "animating": isAnimating });
		const animationStyle = isAnimating ? { animationDuration: `${autoCloseDelay}s` } : {};
		return /* @__PURE__ */ React.createElement("div", { className: getClassName("countdown") }, /* @__PURE__ */ React.createElement("div", { className: getClassName("countdown-text") }), /* @__PURE__ */ React.createElement("div", { className: getClassName("countdown-progress") }, /* @__PURE__ */ React.createElement("div", {
			className: progressBarClassName,
			style: animationStyle
		})));
	};
	const handleButtonClick = useCallback(() => {
		if (autoClose && countdownTimeoutRef.current) clearCountdown();
	}, [autoClose, clearCountdown]);
	const renderActionButtons = () => {
		if (!actionButtons || actionButtons.length === 0) return null;
		return /* @__PURE__ */ React.createElement("div", { onClick: handleButtonClick }, /* @__PURE__ */ React.createElement(ButtonGroupPreview, { buttonGroupList: actionButtons }));
	};
	return /* @__PURE__ */ React.createElement(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: _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.createElement("div", {
		ref: modalContentRef,
		className: getClassName("content", statusClassName),
		style: {
			position: "relative",
			zIndex: 1
		}
	}, renderTitle(), renderChangeDueInfo(), renderActionButtons(), renderCountdownProgress()));
});
PaymentResultToast.displayName = "PaymentResultToast";
//#endregion
export { PaymentResultToast as default };
