import { a as IconSize, s as LanguageLocales } from "../../constants2.js";
import { t as Icon_default } from "../../Icon.js";
import { n as useLanguage } from "../../useLanguage.js";
import { t as isComponent } from "../../component.js";
import { t as Button_default } from "../../Button.js";
import { t as ChevronDown_default } from "../../ChevronDown.js";
import { t as ChevronUp_default } from "../../ChevronUp.js";
import { t as Highlighter_default } from "../../Highlighter.js";
import { t as useExpand } from "../../useExpand.js";
import { t as ChevronRight_default } from "../../ChevronRight.js";
import { a as PanelVariant, i as PanelStatus, n as PanelLayout, r as PanelStacking, t as PanelListContext } from "../../utils5.js";
import { t as PanelTitle_default } from "../../PanelTitle.js";
import classNames from "classnames";
import React from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import styles from "./styles.module.scss";
var HN_Designsystem_Panel_en_GB_default = {
	expandButtonOpen: "See details",
	expandButtonClose: "Hide details"
};
var HN_Designsystem_Panel_nb_NO_default = {
	expandButtonOpen: "Se detaljer",
	expandButtonClose: "Skjul detaljer"
};
const getResources = (language) => {
	switch (language) {
		case LanguageLocales.ENGLISH: return HN_Designsystem_Panel_en_GB_default;
		case LanguageLocales.NORWEGIAN:
		default: return HN_Designsystem_Panel_nb_NO_default;
	}
};
var ExpandButton = ({ onClick, isExpanded, resources }) => {
	const buttonClassName = classNames(styles["expander__button"], isExpanded && styles["expander__button--expanded"]);
	return /* @__PURE__ */ jsxs(Button_default, {
		variant: "borderless",
		textClassName: styles["expander__button__text"],
		wrapperClassName: buttonClassName,
		"aria-expanded": isExpanded,
		onClick,
		children: [/* @__PURE__ */ jsx(Icon_default, {
			svgIcon: isExpanded ? ChevronUp_default : ChevronDown_default,
			size: IconSize.XSmall
		}), /* @__PURE__ */ jsx("span", { children: isExpanded ? resources.expandButtonClose : resources.expandButtonOpen })]
	});
};
var PanelRoot = ({ layout = PanelLayout.vertical, variant = PanelVariant.fill, color = "neutral", stacking = PanelStacking.default, testId, children, expanded = false, focusable, status = PanelStatus.none, buttonBottomAriaLabel, buttonBottomOnClick, buttonBottomText, className, resources, onExpand, highlightText, ref }) => {
	const panelListContext = React.useContext(PanelListContext);
	const [preContainer, setPreContainer] = React.useState([]);
	const [title, setTitle] = React.useState([]);
	const [content, setContent] = React.useState([]);
	const [expandableContent, setExpandableContent] = React.useState([]);
	const [hasIcon, setHasIcon] = React.useState(false);
	const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);
	const localRef = React.useRef(null);
	const panelRef = ref ?? localRef;
	const expandedContentRef = React.useRef(null);
	const defaultScroll = 100;
	const effectiveVariant = panelListContext?.variant ?? variant;
	const effectiveHighlightText = panelListContext?.highlightText ?? highlightText;
	const effectiveClassName = panelListContext?.applyPanelClassName(className) ?? className;
	const { language } = useLanguage(LanguageLocales.NORWEGIAN);
	const mergedResources = {
		...getResources(language),
		...resources
	};
	React.useEffect(() => {
		let index = 0;
		let localHasIcon = false;
		const newPreContainer = [];
		const newTitle = [];
		const newContent = [];
		const newExpandableContent = [];
		React.Children.forEach(children, (child) => {
			if (React.isValidElement(child)) {
				const key = child.key ?? `panel-child-${index++}`;
				if (child.type === PreContainer) newPreContainer.push(React.cloneElement(child, { key }));
				else if (isComponent(child, PanelTitle_default)) {
					newTitle.push(React.cloneElement(child, {
						key,
						highlightText: child.props.highlightText || effectiveHighlightText
					}));
					if (child.props.icon) localHasIcon = true;
				} else if (child.type === A || child.type === B || child.type === C) newContent.push(React.cloneElement(child, { key }));
				else if (child.type === ExpandedContent) newExpandableContent.push(React.cloneElement(child, { key }));
			}
		});
		setPreContainer(newPreContainer);
		setTitle(newTitle);
		setContent(newContent);
		setExpandableContent(newExpandableContent);
		setHasIcon(localHasIcon);
	}, [children]);
	React.useEffect(() => {
		if (expanded) return;
		if (isExpanded) {
			if ("current" in panelRef && panelRef.current && expandedContentRef.current) {
				const panelRect = panelRef.current.getBoundingClientRect();
				const expandedContentRect = expandedContentRef.current.getBoundingClientRect();
				const scrollAmount = Math.min(defaultScroll, panelRect.top - 20);
				if (scrollAmount > 0 && expandedContentRect.bottom > window.innerHeight) {
					if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
					window.scrollBy({
						top: scrollAmount,
						behavior: "smooth"
					});
				}
			}
		}
	}, [isExpanded]);
	const colorScheme = effectiveVariant === PanelVariant.fill ? color : "white";
	const outerClassnames = classNames(effectiveClassName, {
		[styles["panel__border--outline--outer"]]: effectiveVariant === PanelVariant.outline,
		[styles["panel__border--line"]]: effectiveVariant === PanelVariant.line,
		[styles["panel__border--fill--neutral"]]: effectiveVariant === PanelVariant.fill && colorScheme === "neutral",
		[styles["panel__border--fill--new"]]: effectiveVariant === PanelVariant.fill && status === PanelStatus.new,
		[styles["panel__border--fill--status"]]: effectiveVariant === PanelVariant.fill && status !== PanelStatus.none
	});
	const panelClassnames = classNames(styles["panel"], styles[`panel--${colorScheme}`], styles["panel--status"], {
		[styles["panel--line"]]: effectiveVariant === PanelVariant.line,
		[styles["panel--new"]]: status === PanelStatus.new,
		[styles["panel--draft"]]: status === PanelStatus.draft,
		[styles["panel--error"]]: status === PanelStatus.error,
		[styles["panel--icon"]]: hasIcon
	});
	const contentContainerLayout = classNames(styles["panel__content"], styles[`panel__content--${layout}`], { [styles[`panel__content--b-first`]]: stacking === PanelStacking.bFirst });
	const expanderBorderLayout = classNames({
		[styles["panel__expander__border--expanded"]]: isExpanded && status === PanelStatus.none,
		[styles[`panel__expander__border--not-expanded--${colorScheme}`]]: !isExpanded && status === PanelStatus.none,
		[styles[`panel__expander__border--not-expanded--line`]]: !isExpanded && status === PanelStatus.none && effectiveVariant === PanelVariant.line
	});
	const handleExpandClick = () => {
		setIsExpanded(!isExpanded);
	};
	return expandableContent.length > 0 ? /* @__PURE__ */ jsx("div", {
		className: outerClassnames,
		children: /* @__PURE__ */ jsx("div", {
			className: classNames({ [styles["panel__border--outline--inner"]]: effectiveVariant === PanelVariant.outline }),
			children: /* @__PURE__ */ jsx("div", {
				className: expanderBorderLayout,
				children: /* @__PURE__ */ jsxs("div", {
					className: panelClassnames,
					"data-testid": testId,
					ref: panelRef,
					tabIndex: focusable ? -1 : void 0,
					children: [
						/* @__PURE__ */ jsxs(Highlighter_default, {
							searchText: effectiveHighlightText,
							children: [preContainer, title]
						}),
						/* @__PURE__ */ jsx("div", {
							className: contentContainerLayout,
							children: /* @__PURE__ */ jsx(Highlighter_default, {
								searchText: effectiveHighlightText,
								children: content
							})
						}),
						/* @__PURE__ */ jsx(ExpandButton, {
							onClick: handleExpandClick,
							isExpanded,
							resources: mergedResources
						}),
						isExpanded && /* @__PURE__ */ jsxs("div", {
							ref: expandedContentRef,
							"data-testid": testId + "-details",
							children: [/* @__PURE__ */ jsx("div", { className: styles["panel__expander__separator"] }), /* @__PURE__ */ jsx(Highlighter_default, {
								searchText: effectiveHighlightText,
								children: expandableContent
							})]
						})
					]
				})
			})
		})
	}) : /* @__PURE__ */ jsx("div", {
		className: outerClassnames,
		children: /* @__PURE__ */ jsx("div", {
			className: classNames({ [styles["panel__border--outline--inner"]]: effectiveVariant === PanelVariant.outline }),
			children: /* @__PURE__ */ jsxs("div", {
				className: panelClassnames,
				"data-testid": testId,
				ref: panelRef,
				tabIndex: focusable ? -1 : void 0,
				children: [
					/* @__PURE__ */ jsxs(Highlighter_default, {
						searchText: effectiveHighlightText,
						children: [preContainer, title]
					}),
					/* @__PURE__ */ jsx("div", {
						className: contentContainerLayout,
						children: /* @__PURE__ */ jsx(Highlighter_default, {
							searchText: effectiveHighlightText,
							children: content
						})
					}),
					buttonBottomText && buttonBottomOnClick && /* @__PURE__ */ jsx("div", {
						className: styles["panel__button-bottom"],
						children: /* @__PURE__ */ jsxs(Button_default, {
							variant: "borderless",
							type: "button",
							size: "medium",
							onClick: buttonBottomOnClick,
							"aria-label": buttonBottomAriaLabel,
							children: [buttonBottomText, /* @__PURE__ */ jsx(Icon_default, {
								svgIcon: ChevronRight_default,
								size: IconSize.XSmall
							})]
						})
					})
				]
			})
		})
	});
};
const PreContainer = ({ children }) => {
	return /* @__PURE__ */ jsx("div", {
		className: styles["panel__pre-container"],
		children
	});
};
const A = ({ children }) => {
	return /* @__PURE__ */ jsx("div", {
		className: classNames(styles["panel__content__item"], styles["panel__content__item--a"]),
		children
	});
};
const B = ({ children }) => {
	return /* @__PURE__ */ jsx("div", {
		className: classNames(styles["panel__content__item"], styles["panel__content__item--b"]),
		children
	});
};
const C = ({ children }) => {
	return /* @__PURE__ */ jsx("div", {
		className: classNames(styles["panel__content__item"], styles["panel__content__item--c"]),
		children
	});
};
const ExpandedContent = ({ children }) => {
	return /* @__PURE__ */ jsx("div", {
		className: classNames(styles["panel__expander__content"]),
		children
	});
};
PanelRoot.displayName = "Panel";
var Panel = PanelRoot;
Panel.PreContainer = PreContainer;
Panel.Title = PanelTitle_default;
Panel.A = A;
Panel.B = B;
Panel.C = C;
Panel.ExpandedContent = ExpandedContent;
var Panel_default = Panel;
export { A, B, C, ExpandedContent, PanelLayout, PanelStacking, PanelStatus, PanelVariant, PreContainer, Panel_default as default };

//# sourceMappingURL=index.js.map