import { t as uuid } from "../../uuid.js";
import { a as IconSize, c as ZIndex, n as AnalyticsId } from "../../constants2.js";
import { t as palette } from "../../palette.js";
import { t as Icon_default } from "../../Icon.js";
import { t as isComponent } from "../../component.js";
import { t as Button_default } from "../../Button.js";
import { n as getAriaLabelAttributes } from "../../accessibility.js";
import { n as useFocusTrap_default } from "../../useFocusTrap.js";
import { t as useIsVisible } from "../../useIsVisible.js";
import { t as Close_default } from "../../Close.js";
import { t as useReturnFocusOnUnmount } from "../../useReturnFocusOnUnmount.js";
import { n as enableBodyScroll, t as disableBodyScroll } from "../../scroll.js";
import { n as Title_default } from "../../Title.js";
import { t as AlertSignFill_default } from "../../AlertSignFill.js";
import { t as AlertSignStroke_default } from "../../AlertSignStroke.js";
import { t as CheckOutline_default } from "../../CheckOutline.js";
import { t as Portal } from "../../Portal.js";
import classNames from "classnames";
import React, { useEffect } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import styles from "./styles.module.scss";
let ModalVariants = /* @__PURE__ */ function(ModalVariants$1) {
	ModalVariants$1["normal"] = "normal";
	ModalVariants$1["warning"] = "warning";
	ModalVariants$1["error"] = "error";
	ModalVariants$1["success"] = "success";
	return ModalVariants$1;
}({});
let ModalSize = /* @__PURE__ */ function(ModalSize$1) {
	ModalSize$1["large"] = "large";
	ModalSize$1["medium"] = "medium";
	return ModalSize$1;
}({});
var getVariantIcon = (variant) => {
	if (variant === ModalVariants.error) return /* @__PURE__ */ jsx(Icon_default, {
		size: IconSize.Small,
		svgIcon: AlertSignFill_default,
		color: palette.cherry500
	});
	else if (variant === ModalVariants.warning) return /* @__PURE__ */ jsx(Icon_default, {
		size: IconSize.Small,
		svgIcon: AlertSignStroke_default,
		color: palette.black
	});
	else if (variant === ModalVariants.success) return /* @__PURE__ */ jsx(Icon_default, {
		size: IconSize.Small,
		svgIcon: CheckOutline_default,
		color: palette.kiwi900
	});
	return null;
};
var getIcon = (variant, icon) => {
	const variantIcon = getVariantIcon(variant);
	if (variantIcon) return /* @__PURE__ */ jsx("div", {
		className: styles.modal__iconWrapper,
		children: variantIcon
	});
	if (icon) return /* @__PURE__ */ jsx("div", {
		className: styles.modal__iconWrapper,
		children: isComponent(icon, Icon_default) && React.cloneElement(icon, { size: IconSize.Small })
	});
	return null;
};
var Modal = (props) => {
	const { footerContent, variant = ModalVariants.normal, primaryButtonText = "OK", titleId = uuid(), className = "", size = ModalSize.large, zIndex = ZIndex.OverlayScreen, role = "dialog" } = props;
	const topContent = React.useRef(null);
	const modalContentRef = React.useRef(null);
	const dialogRef = React.useRef(null);
	useFocusTrap_default(dialogRef, true);
	const topContentVisible = useIsVisible(topContent);
	const bottomContent = React.useRef(null);
	const bottomContentVisible = useIsVisible(bottomContent);
	const contentIsScrollable = modalContentRef.current && modalContentRef.current.scrollHeight > modalContentRef.current.clientHeight;
	useReturnFocusOnUnmount(dialogRef);
	function handleKeyboardEvent(e) {
		if (e.key === "Escape" && props.onClose) {
			e.stopPropagation();
			props.onClose();
		}
	}
	function handleClickEvent(event) {
		if (event.target && overlayRef.current === event.target && props.onClose) {
			event.stopPropagation();
			props.onClose();
		}
	}
	const overlayRef = React.useRef(null);
	const showActions = props.secondaryButtonText && props.secondaryButtonText?.length > 0 || props.onSuccess || footerContent;
	const ariaLabelAttributes = getAriaLabelAttributes({
		label: props.ariaLabel,
		id: props.ariaLabelledBy,
		fallbackId: titleId
	});
	useEffect(() => {
		const overlayElement = overlayRef.current;
		disableBodyScroll();
		if (!props.disableCloseEvents && overlayElement) {
			overlayElement.addEventListener("keydown", handleKeyboardEvent);
			overlayElement.addEventListener("click", handleClickEvent);
		}
		return () => {
			enableBodyScroll();
			if (!props.disableCloseEvents && overlayElement) {
				overlayElement.removeEventListener("keydown", handleKeyboardEvent);
				overlayElement.removeEventListener("click", handleClickEvent);
			}
		};
	}, [props.disableCloseEvents]);
	useEffect(() => {
		dialogRef.current?.focus();
	}, []);
	const dialogClasses = classNames(className, styles.modal, variant && styles[`modal--${variant}`], size && styles[`modal--${size}`], contentIsScrollable && !showActions && styles["modal--no-actions"]);
	const titleClasses = classNames({
		[styles["modal__title--error"]]: variant === ModalVariants.error,
		[styles["modal__title--success"]]: variant === ModalVariants.success
	});
	const Component = /* @__PURE__ */ jsx("div", {
		"data-testid": "dialog-container",
		children: /* @__PURE__ */ jsx("div", {
			ref: overlayRef,
			className: styles["modal-overlay"],
			"data-testid": props.testId,
			"data-analyticsid": AnalyticsId.Modal,
			style: { zIndex },
			children: /* @__PURE__ */ jsx("div", {
				className: styles.align,
				children: /* @__PURE__ */ jsxs("div", {
					className: dialogClasses,
					role,
					"aria-modal": "true",
					tabIndex: -1,
					...ariaLabelAttributes,
					ref: dialogRef,
					children: [
						/* @__PURE__ */ jsx("div", { className: classNames(styles["modal__shadow"], styles["modal__shadow--top"], { [styles["modal__shadow--show"]]: !topContentVisible && contentIsScrollable }) }),
						/* @__PURE__ */ jsxs("div", {
							className: classNames(styles.modal__contentWrapper),
							tabIndex: contentIsScrollable ? 0 : void 0,
							role: contentIsScrollable ? "region" : void 0,
							...contentIsScrollable ? ariaLabelAttributes : {},
							ref: modalContentRef,
							children: [!props.noCloseButton && /* @__PURE__ */ jsx("div", {
								className: styles.modal__closeWrapper,
								children: /* @__PURE__ */ jsx("div", {
									className: classNames(styles.modal__closeWrapper__close),
									children: /* @__PURE__ */ jsx(Close_default, {
										onClick: props.onClose,
										ariaLabel: props.ariaLabelCloseBtn
									})
								})
							}), /* @__PURE__ */ jsxs("div", {
								className: classNames(size && styles[`modal__contentWrapper__scroll--${size}`]),
								children: [
									/* @__PURE__ */ jsx("div", { ref: topContent }),
									/* @__PURE__ */ jsxs("div", {
										className: styles.modal__contentWrapper__title,
										children: [
											getIcon(variant, props.icon),
											/* @__PURE__ */ jsx(Title_default, {
												id: ariaLabelAttributes?.["aria-labelledby"],
												htmlMarkup: "h3",
												appearance: "title3",
												className: titleClasses,
												children: props.title
											}),
											props.afterTitleChildren && /* @__PURE__ */ jsx("div", {
												className: styles["modal__afterTitleChildren"],
												children: props.afterTitleChildren
											})
										]
									}),
									props.children && /* @__PURE__ */ jsx("div", { children: props.children }),
									!props.children && /* @__PURE__ */ jsx("p", {
										className: styles.modal__description,
										children: props.description
									}),
									/* @__PURE__ */ jsx("div", { ref: bottomContent })
								]
							})]
						}),
						/* @__PURE__ */ jsx("div", { className: classNames(styles["modal__shadow"], styles["modal__shadow--bottom"], { [styles["modal__shadow--show"]]: !bottomContentVisible && contentIsScrollable }) }),
						showActions && /* @__PURE__ */ jsxs("div", {
							className: classNames(styles["modal__call-to-action"], size && styles[`modal__call-to-action--${size}`]),
							children: [
								props.onSuccess && primaryButtonText && /* @__PURE__ */ jsx(Button_default, {
									onClick: props.onSuccess,
									children: primaryButtonText
								}),
								props.secondaryButtonText && props.secondaryButtonText?.length > 0 && /* @__PURE__ */ jsx(Button_default, {
									variant: "borderless",
									onClick: props.onClose,
									children: props.secondaryButtonText
								}),
								footerContent
							]
						})
					]
				})
			})
		})
	});
	if (props.printable) {
		const printModal = "print-modal";
		return /* @__PURE__ */ jsxs(Portal, {
			className: printModal,
			testId: "print-modal",
			children: [/* @__PURE__ */ jsx("style", {
				media: "print",
				children: `body > *:not(.${printModal}) {display: none;}`
			}), Component]
		});
	}
	return Component;
};
var Modal_default = Modal;
export { ModalSize, ModalVariants, Modal_default as default };

//# sourceMappingURL=index.js.map