import { a as IconSize, n as AnalyticsId } from "../../constants2.js";
import { t as NotificationBadge_default } from "../../NotificationBadge.js";
import { t as useIsMobileBreakpoint } from "../../useIsMobileBreakpoint.js";
import { t as useIdWithFallback } from "../../useIdWithFallback.js";
import { n as getAriaLabelAttributes } from "../../accessibility.js";
import { t as Close_default } from "../../Close.js";
import { t as Expander_default } from "../../Expander.js";
import classNames from "classnames";
import React from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import styles from "./styles.module.scss";
var FluidWrapper = ({ fluid, children }) => {
	if (fluid) return /* @__PURE__ */ jsx("div", {
		className: classNames(styles["fluid-wrapper"]),
		children
	});
	return children;
};
var NotificationPanel = (props) => {
	const { children, variant = "info", dismissable = false, onClick, expanderChildren, expanderButtonText, expanderButtonClosedText, expanderOpenFromStart = false, compactVariant, label, labelId: labelIdProp, labelHtmlMarkup = "h1", fluid = false, size, className, role, testId, ref } = props;
	const labelId = useIdWithFallback(labelIdProp);
	const [expanderOpen, setExpanderOpen] = React.useState(expanderOpenFromStart);
	const isMobile = useIsMobileBreakpoint();
	const renderContent = () => {
		const outlineVariant = compactVariant === "outline";
		const contentClasses = classNames(styles["notification-panel__content"]);
		const labelClasses = classNames(styles["notification-panel__label"], {
			[styles["notification-panel__label--no-content"]]: !children && !expanderChildren,
			[styles["notification-panel__label--compact"]]: !!compactVariant,
			[styles["notification-panel__label--outline"]]: outlineVariant
		});
		const childrenClasses = classNames(styles["notification-panel__children"], {
			[styles["notification-panel__children--with-label"]]: label,
			[styles["notification-panel__children--expander-no-label"]]: expanderChildren && !label,
			[styles["notification-panel__children--outline"]]: outlineVariant
		});
		return /* @__PURE__ */ jsxs("div", {
			className: contentClasses,
			id: !label ? labelId : void 0,
			children: [
				label && /* @__PURE__ */ jsx(labelHtmlMarkup, {
					className: labelClasses,
					id: labelId,
					children: label
				}),
				children && /* @__PURE__ */ jsx("div", {
					className: childrenClasses,
					children
				}),
				expanderChildren && expanderButtonText && expanderButtonClosedText && !compactVariant && /* @__PURE__ */ jsx(Expander_default, {
					title: expanderOpen ? expanderButtonText : expanderButtonClosedText,
					onExpand: setExpanderOpen,
					expanded: expanderOpen,
					testId: "expand",
					children: expanderChildren
				})
			]
		});
	};
	const notificationPanelClasses = classNames(styles["notification-panel"], styles[`notification-panel--${variant}`], size && styles[`notification-panel--${size}`], {
		[styles["notification-panel--compact"]]: !!compactVariant,
		[styles["notification-panel--compact--basic"]]: compactVariant === "basic",
		[styles["notification-panel--compact--outline"]]: compactVariant === "outline",
		[styles["notification-panel--with-content"]]: expanderChildren || label && children,
		[styles["notification-panel--dismissable"]]: dismissable
	}, className);
	const ariaRole = role || variant === "error" && "alert" || void 0;
	const ariaLabelAttributes = ariaRole ? getAriaLabelAttributes({
		label,
		id: labelId
	}) : void 0;
	return /* @__PURE__ */ jsx(FluidWrapper, {
		fluid,
		children: /* @__PURE__ */ jsxs("div", {
			ref,
			role: ariaRole,
			"data-testid": testId,
			"data-analyticsid": AnalyticsId.NotificationPanel,
			className: notificationPanelClasses,
			...ariaLabelAttributes,
			children: [
				/* @__PURE__ */ jsx(NotificationBadge_default, {
					variant,
					size: compactVariant || isMobile ? IconSize.XSmall : IconSize.Small,
					className: styles["notification-panel__icon"]
				}),
				dismissable && /* @__PURE__ */ jsx("span", {
					className: styles["notification-panel__close"],
					children: /* @__PURE__ */ jsx(Close_default, {
						ariaLabel: props.ariaLabelCloseBtn,
						onClick,
						color: "black"
					})
				}),
				renderContent()
			]
		})
	});
};
var NotificationPanel_default = NotificationPanel;
export { NotificationPanel_default as default };

//# sourceMappingURL=index.js.map