import { n as uuid_default } from "./uuid.js";
import { c as ZIndex, n as AnalyticsId, o as KeyboardEventKey, s as LanguageLocales } from "./constants2.js";
import { n as useLanguage } from "./useLanguage.js";
import { t as useIsMobileBreakpoint } from "./useIsMobileBreakpoint.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 useKeyboardEvent } from "./useKeyboardEvent.js";
import { t as useOutsideEvent } from "./useOutsideEvent.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 { t as Title_default } from "./Title2.js";
import classNames from "classnames";
import React, { useEffect, useRef } from "react";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { AnimatePresence, useAnimate, usePresence } from "motion/react";
import styles from "./components/Drawer/styles.module.scss";
var HN_Designsystem_Drawer_en_GB_default = {
	ariaLabelCloseBtn: "Close",
	ariaLabelBackButton: "Go back"
};
var HN_Designsystem_Drawer_nb_NO_default = {
	ariaLabelCloseBtn: "Lukk",
	ariaLabelBackButton: "Gå tilbake"
};
const getResources = (language) => {
	switch (language) {
		case LanguageLocales.ENGLISH: return HN_Designsystem_Drawer_en_GB_default;
		case LanguageLocales.NORWEGIAN:
		default: return HN_Designsystem_Drawer_nb_NO_default;
	}
};
var Drawer = (props) => {
	const { isOpen, ...rest } = props;
	const isMobile = useIsMobileBreakpoint();
	return /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsx(InnerDrawer, {
		...rest,
		isMobile
	}) });
};
var InnerDrawer = (props) => {
	const { ariaLabel, ariaLabelledBy, children, closeColor = "blueberry", desktopDirection = "left", footerContent, headerClasses, noCloseButton = false, onPrimaryAction, onRequestClose, onSecondaryAction, primaryActionText, secondaryActionText, title, titleHtmlMarkup = "h3", titleId = uuid_default(), zIndex = ZIndex.OverlayScreen, resources, isMobile } = props;
	const ariaLabelAttributes = getAriaLabelAttributes({
		label: ariaLabel,
		id: ariaLabelledBy,
		fallbackId: titleId
	});
	const overlayRef = useRef(null);
	const containerRef = useRef(null);
	const contentRef = useRef(null);
	const topContent = useRef(null);
	const bottomContent = useRef(null);
	const headerRef = useRef(null);
	const footerRef = useRef(null);
	const [scope, animate] = useAnimate();
	const [isPresent, safeToRemove] = usePresence();
	const [headerHeight, setHeaderHeight] = React.useState(0);
	const [footerHeight, setFooterHeight] = React.useState(0);
	const topContentVisible = useIsVisible(topContent);
	const bottomContentVisible = useIsVisible(bottomContent, 0);
	const { language } = useLanguage(LanguageLocales.NORWEGIAN);
	const mergedResources = {
		...getResources(language),
		...resources
	};
	const contentIsScrollable = contentRef.current && contentRef.current.scrollHeight > contentRef.current.clientHeight;
	const headerStyling = classNames(styles.drawer__header, headerClasses);
	const hasFooterContent = typeof footerContent !== "undefined" && footerContent || onPrimaryAction || onSecondaryAction;
	useFocusTrap_default(containerRef, true);
	useReturnFocusOnUnmount(containerRef);
	useOutsideEvent(containerRef, () => {
		if (onRequestClose) onRequestClose();
	});
	useKeyboardEvent(containerRef, () => onRequestClose && onRequestClose(), [KeyboardEventKey.Escape]);
	const closeDrawer = () => {
		if (!overlayRef.current || !containerRef.current) return;
		animate(overlayRef.current, {
			opacity: 0,
			pointerEvents: "none"
		}, {
			duration: .3,
			ease: "easeInOut"
		});
		if (isMobile) animate(containerRef.current, { y: "100%" }, {
			duration: .3,
			ease: "easeInOut",
			onComplete: () => {
				if (safeToRemove) safeToRemove();
			}
		});
		else animate(containerRef.current, { x: desktopDirection === "left" ? "-100%" : "100%" }, {
			duration: .3,
			ease: "easeInOut",
			onComplete: () => {
				if (safeToRemove) safeToRemove();
			}
		});
	};
	useEffect(() => {
		containerRef.current?.focus();
		disableBodyScroll();
		return () => {
			enableBodyScroll();
		};
	}, []);
	useEffect(() => {
		const updateHeights = () => {
			if (headerRef.current) setHeaderHeight(headerRef.current.offsetHeight);
			if (footerRef.current) setFooterHeight(footerRef.current.offsetHeight);
		};
		updateHeights();
		const resizeObserver = new ResizeObserver(updateHeights);
		if (headerRef.current) resizeObserver.observe(headerRef.current);
		if (footerRef.current) resizeObserver.observe(footerRef.current);
		return () => {
			resizeObserver.disconnect();
		};
	}, [hasFooterContent]);
	useEffect(() => {
		if (!overlayRef.current || !containerRef.current) return;
		if (!isPresent) {
			closeDrawer();
			return;
		}
		if (isMobile) animate(containerRef.current, { y: "0" }, {
			duration: .3,
			ease: "easeInOut"
		});
		else animate(containerRef.current, { x: "0" }, {
			duration: .3,
			ease: "easeInOut"
		});
		animate(overlayRef.current, {
			opacity: 1,
			pointerEvents: "auto"
		}, {
			duration: .3,
			ease: "easeInOut"
		});
	}, [isPresent]);
	const handleCTA = (callback) => {
		if (callback) callback();
	};
	return /* @__PURE__ */ jsxs("div", {
		className: styles.drawer,
		ref: scope,
		style: { zIndex },
		"data-analyticsid": AnalyticsId.Drawer,
		children: [/* @__PURE__ */ jsx("div", {
			className: styles.drawer__overlay,
			ref: overlayRef,
			"aria-hidden": "true"
		}), /* @__PURE__ */ jsxs("div", {
			className: classNames(styles.drawer__container, { [styles["drawer__container--right"]]: desktopDirection === "right" }),
			ref: containerRef,
			role: "dialog",
			"aria-modal": "true",
			tabIndex: -1,
			...ariaLabelAttributes,
			children: [/* @__PURE__ */ jsxs("div", {
				className: styles.drawer__container__inner,
				children: [
					/* @__PURE__ */ jsxs("div", {
						className: headerStyling,
						ref: headerRef,
						children: [/* @__PURE__ */ jsx(Title_default, {
							id: ariaLabelAttributes?.["aria-labelledby"],
							className: styles["drawer__header__title"],
							htmlMarkup: titleHtmlMarkup,
							appearance: "title3",
							children: title
						}), !noCloseButton && onRequestClose != void 0 && /* @__PURE__ */ jsx(Close_default, {
							ariaLabel: mergedResources.ariaLabelCloseBtn,
							color: closeColor,
							onClick: onRequestClose,
							className: styles["drawer__header__close-button"]
						})]
					}),
					/* @__PURE__ */ jsx("div", {
						className: classNames(styles["drawer__content__shadow"], styles["drawer__content__shadow--top"]),
						style: {
							opacity: !topContentVisible && contentIsScrollable ? 1 : 0,
							top: headerHeight
						}
					}),
					/* @__PURE__ */ jsxs("div", {
						className: styles.drawer__content,
						tabIndex: contentIsScrollable ? 0 : void 0,
						role: contentIsScrollable ? "region" : void 0,
						...contentIsScrollable ? ariaLabelAttributes : {},
						ref: contentRef,
						children: [
							/* @__PURE__ */ jsx("div", { ref: topContent }),
							/* @__PURE__ */ jsx("div", {
								className: styles["drawer__content__children"],
								children
							}),
							/* @__PURE__ */ jsx("div", {
								ref: bottomContent,
								style: { height: "1px" }
							})
						]
					}),
					/* @__PURE__ */ jsx("div", {
						className: classNames(styles["drawer__content__shadow"], styles["drawer__content__shadow--bottom"]),
						style: {
							opacity: !bottomContentVisible && contentIsScrollable ? 1 : 0,
							bottom: hasFooterContent ? footerHeight : 0
						}
					})
				]
			}), hasFooterContent && /* @__PURE__ */ jsx("div", {
				className: styles.drawer__footer,
				ref: footerRef,
				children: footerContent ? footerContent : /* @__PURE__ */ jsxs(Fragment, { children: [onPrimaryAction && /* @__PURE__ */ jsx(Button_default, {
					onClick: () => handleCTA(onPrimaryAction),
					children: primaryActionText
				}), onSecondaryAction && /* @__PURE__ */ jsx(Button_default, {
					variant: "borderless",
					onClick: () => handleCTA(onSecondaryAction),
					children: secondaryActionText
				})] })
			})]
		})]
	});
};
var Drawer_default$1 = Drawer;
export { Drawer_default$1 as t };

//# sourceMappingURL=Drawer.js.map