import { a as IconSize } from "../../constants2.js";
import { t as usePseudoClasses } from "../../usePseudoClasses.js";
import { t as breakpoints } from "../../grid.js";
import { t as getColor } from "../../color.js";
import { t as Icon_default } from "../../Icon.js";
import { t as NotificationBadge_default } from "../../NotificationBadge.js";
import { n as useBreakpoint } from "../../useBreakpoint.js";
import { n as getAriaLabelAttributes } from "../../accessibility.js";
import { t as X_default } from "../../X.js";
import { t as Close_default } from "../../Close.js";
import { t as ChevronDown_default } from "../../ChevronDown.js";
import { t as ChevronUp_default } from "../../ChevronUp.js";
import { i as renderElementHeader } from "../../ElementHeader.js";
import { t as Forward_default } from "../../Forward.js";
import classNames from "classnames";
import { useId, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import styles from "./styles.module.scss";
var Label = ({ label, variant, id, hasExpander, isExpanded, dismissable, onExpand, onDismiss, closeBtnText }) => {
	const breakpoint = useBreakpoint();
	const { isHovered, refObject } = usePseudoClasses();
	const iconSize = breakpoint < breakpoints.lg ? IconSize.XSmall : IconSize.Small;
	const labelContainerClasses = classNames(styles["service-message__label-container"], styles[`service-message__label-container--${variant}`], hasExpander && styles[`service-message__label-container--has-expander`]);
	const elementHeader = renderElementHeader(label, {
		titleHtmlMarkup: "span",
		isHovered,
		size: "compact",
		parentType: "expanderlist",
		chevronIcon: hasExpander ? isExpanded ? ChevronUp_default : ChevronDown_default : void 0,
		icon: /* @__PURE__ */ jsx(NotificationBadge_default, {
			variant,
			size: iconSize,
			isHovered: hasExpander && isHovered
		}),
		closeButton: !hasExpander && dismissable ? /* @__PURE__ */ jsx(Close_default, {
			onClick: onDismiss,
			ariaLabel: closeBtnText,
			className: styles["service-message__close"]
		}) : void 0
	});
	return /* @__PURE__ */ jsx("div", {
		className: labelContainerClasses,
		ref: refObject,
		children: /* @__PURE__ */ jsx("div", {
			className: styles["service-message__container"],
			children: /* @__PURE__ */ jsx("div", {
				className: styles["service-message__row"],
				children: /* @__PURE__ */ jsx("div", {
					className: styles["service-message__col"],
					children: /* @__PURE__ */ jsx("div", {
						className: styles["service-message__label"],
						children: hasExpander ? /* @__PURE__ */ jsx("h1", {
							className: styles["service-message__title"],
							id,
							children: /* @__PURE__ */ jsx("button", {
								type: "button",
								className: styles["service-message__toggle"],
								onClick: onExpand,
								"aria-expanded": isExpanded,
								children: elementHeader
							})
						}) : /* @__PURE__ */ jsx("h1", {
							className: styles["service-message__title"],
							id,
							children: elementHeader
						})
					})
				})
			})
		})
	});
};
var Content = ({ info, extraInfo, urlTitle, url, target, dismissable, closeBtnText, onDismiss }) => {
	const { refObject: readMoreRef, isHovered: readMoreHoverRefIsHovered } = usePseudoClasses();
	const { refObject: closeButtonRef, isHovered: closeButtonIsHovered } = usePseudoClasses();
	const hasUrl = url && urlTitle;
	return /* @__PURE__ */ jsx("div", {
		className: styles["service-message__container"],
		children: /* @__PURE__ */ jsx("div", {
			className: styles["service-message__row"],
			children: /* @__PURE__ */ jsx("div", {
				className: styles["service-message__col"],
				children: /* @__PURE__ */ jsxs("div", {
					className: styles["service-message__content"],
					children: [
						info && /* @__PURE__ */ jsx("p", {
							className: styles["service-message__info"],
							children: info
						}),
						extraInfo && /* @__PURE__ */ jsx("p", {
							className: classNames(styles["service-message__info"], styles["service-message__info--extra"]),
							children: extraInfo
						}),
						/* @__PURE__ */ jsxs("div", {
							className: styles["service-message__actions"],
							children: [hasUrl && /* @__PURE__ */ jsxs("a", {
								className: styles["service-message__action"],
								href: url,
								ref: readMoreRef,
								target,
								children: [urlTitle, /* @__PURE__ */ jsx(Icon_default, {
									size: IconSize.XSmall,
									svgIcon: Forward_default,
									color: getColor("blueberry", 700),
									isHovered: readMoreHoverRefIsHovered
								})]
							}), dismissable && /* @__PURE__ */ jsxs("button", {
								ref: closeButtonRef,
								className: classNames(styles["service-message__action"], styles["service-message__action--close"]),
								"aria-label": closeBtnText,
								onClick: onDismiss,
								children: [closeBtnText, /* @__PURE__ */ jsx(Icon_default, {
									size: IconSize.XSmall,
									svgIcon: X_default,
									color: getColor("blueberry", 700),
									isHovered: closeButtonIsHovered
								})]
							})]
						})
					]
				})
			})
		})
	});
};
var ServiceMessage = ({ label, dismissable = true, onDismiss, info, extraInfo, urlTitle, url, target = "_self", closeBtnText = "fjern melding", expanderOpenFromStart = false, variant = "error", messageRole = "auto", testId }) => {
	const [isExpanded, setIsExpanded] = useState(expanderOpenFromStart);
	const labelId = useId();
	const hasExpander = !!info || !!extraInfo;
	const ariaRole = messageRole === "auto" ? variant === "error" ? "alert" : "region" : messageRole === "none" ? void 0 : messageRole;
	const ariaLabelAttributes = getAriaLabelAttributes({
		label,
		id: labelId
	});
	const handleClick = () => {
		if (hasExpander) setIsExpanded(!isExpanded);
	};
	return /* @__PURE__ */ jsxs("div", {
		className: classNames(styles["service-message"], styles[`service-message--${variant}`]),
		role: ariaRole,
		...ariaLabelAttributes,
		"data-testid": testId,
		children: [/* @__PURE__ */ jsx(Label, {
			label,
			variant,
			id: labelId,
			hasExpander,
			isExpanded,
			dismissable,
			onExpand: handleClick,
			onDismiss,
			closeBtnText
		}), hasExpander && isExpanded && /* @__PURE__ */ jsx(Content, {
			info,
			extraInfo,
			urlTitle,
			url,
			target,
			dismissable,
			onDismiss,
			closeBtnText
		})]
	});
};
var ServiceMessage_default = ServiceMessage;
export { ServiceMessage_default as default };

//# sourceMappingURL=index.js.map