/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
import { cx, getStyles } from "../../styles/styler.js";
import { Pressable } from "../client/Pressable.js";
import { IconSlot } from "../IconSlot.js";
import { Text } from "../Text.js";
import { BANNER_TO_BUTTON_VARIANT, hasDisplayName, separateChildren } from "./utils.js";
import { Cross } from "@yahoo/uds-icons";
import { cloneElement, forwardRef, isValidElement } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/components/Banner/Banner.tsx
const BASE_CLASS = "uds-banner";
/**
* Inject button variants on Button children that don't have an explicit
* variant set. The last unset Button gets the banner-mapped "primary"
* variant; any preceding unset Buttons get "secondary". Leaves Link,
* other elements, and Buttons with an explicit variant untouched.
*/
function bindActionVariants(actions, bannerVariant) {
	const primaryVariant = BANNER_TO_BUTTON_VARIANT[bannerVariant];
	const unsetIndices = [];
	actions.forEach((child, i) => {
		if (hasDisplayName(child, "Button") && isValidElement(child) && child.props.variant === void 0) unsetIndices.push(i);
	});
	return actions.map((child, i) => {
		if (!unsetIndices.includes(i)) return child;
		const variant = i === unsetIndices[unsetIndices.length - 1] ? primaryVariant : "secondary";
		return cloneElement(child, {
			key: child.key ?? i,
			variant
		});
	});
}
/**
* **An inline notification banner for contextual messages with optional actions.**
*
* @componentType Server component
*
* @description
* Banner is an inline, non-floating notification component that sits in normal document flow.
* It supports 12 color variants, an optional icon, title, description (truncated to 3 lines),
* composable actions via children, and an optional dismiss button.
*
* Use `title` and `description` props for simple text content, or pass `BannerContent`
* with `BannerTitle` and `BannerDescription` subcomponents for rich ReactNode content.
* Any non-BannerContent children are rendered in the actions area.
*
* @see
* Check out the {@link https://uds.build/docs/components/banner Banner Docs} for more info
*
* @example
* ```tsx
* // Simple — props-based
* <Banner variant="info" startIcon={Info} title="Update available" />
*
* // With actions as children
* <Banner variant="brand-secondary" startIcon={Megaphone} title="Notification"
*   description="Description text." onDismiss={() => {}}>
*   <Link href="/docs">Learn more</Link>
*   <Button variant="secondary" size="sm">Edit</Button>
*   <Button variant="brand" size="sm">Send</Button>
* </Banner>
*
* // Rich content via subcomponents
* <Banner variant="alert" startIcon={Error} onDismiss={() => {}}>
*   <BannerContent>
*     <BannerTitle>Error <strong>occurred</strong></BannerTitle>
*     <BannerDescription>Something went wrong.</BannerDescription>
*   </BannerContent>
*   <Button variant="alert" size="sm">Retry</Button>
* </Banner>
* ```
*
* @related [Badge](https://uds.build/docs/components/badge), [Toast](https://uds.build/docs/components/toast)
**/
const Banner = forwardRef(function Banner({ variant = "primary", size = "default", startIcon, title, description, onDismiss, dismissAriaLabel = "Dismiss", className, children, slotProps, ...rest }, ref) {
	const hasTitle = !!(typeof title === "string" ? title.trim() : title);
	const hasDescription = !!(typeof description === "string" ? description.trim() : description);
	const rootStyles = getStyles({
		bannerVariantRoot: variant,
		bannerSizeRoot: size,
		className: cx(BASE_CLASS, "flex flex-row", hasTitle !== hasDescription ? "items-center" : "items-start", "min-w-[300px]", className)
	});
	const iconStyles = getStyles({
		bannerVariantIcon: variant,
		bannerSizeIcon: size
	});
	const titleStyles = getStyles({
		bannerVariantTitle: variant,
		bannerSizeTitle: size,
		className: "truncate"
	});
	const descriptionStyles = getStyles({
		bannerVariantDescription: variant,
		bannerSizeDescription: size,
		className: "line-clamp-3"
	});
	const dismissStyles = getStyles({ bannerSizeClose: size });
	const { content: bannerContent, actions: rawActions } = separateChildren(children);
	const actions = bindActionVariants(rawActions, variant);
	const hasActions = actions.length > 0;
	const contentArea = bannerContent ?? (hasTitle || hasDescription ? /* @__PURE__ */ jsxs("div", {
		className: "flex flex-col self-stretch flex-1 min-w-0 gap-0.5",
		"data-testid": "banner-content",
		children: [hasTitle && (typeof title === "string" ? /* @__PURE__ */ jsx(Text, {
			className: titleStyles,
			"data-testid": "banner-title",
			children: title
		}) : /* @__PURE__ */ jsx("span", {
			className: "w-full truncate leading-none",
			"data-testid": "banner-title",
			children: title
		})), hasDescription && (typeof description === "string" ? /* @__PURE__ */ jsx(Text, {
			className: descriptionStyles,
			"data-testid": "banner-description",
			children: description
		}) : /* @__PURE__ */ jsx("span", {
			className: "w-full line-clamp-3",
			"data-testid": "banner-description",
			children: description
		}))]
	}) : null);
	const dismissContainerStyles = getStyles({
		spacing: "2",
		borderRadius: "full",
		color: "primary",
		className: cx("transition-[background-color] motion-safe:duration-120", "bg-carbon-15/0 hover:bg-carbon-15/10 active:bg-carbon-15/15", "uds-ring", "shrink-0 self-start")
	});
	const dismissButton = onDismiss ? /* @__PURE__ */ jsx(Pressable, {
		"aria-label": dismissAriaLabel,
		onClick: onDismiss,
		className: dismissContainerStyles,
		"data-testid": "banner-dismiss",
		...slotProps?.dismiss,
		children: /* @__PURE__ */ jsx(IconSlot, {
			icon: Cross,
			iconProps: {
				color: "inherit",
				className: dismissStyles
			}
		})
	}) : null;
	return /* @__PURE__ */ jsxs("div", {
		ref,
		className: rootStyles,
		...rest,
		children: [
			startIcon && /* @__PURE__ */ jsx(IconSlot, {
				icon: startIcon,
				iconProps: { color: "inherit" },
				className: cx(iconStyles, "shrink-0"),
				"data-testid": "banner-start-icon",
				...slotProps?.startIcon
			}),
			/* @__PURE__ */ jsxs("div", {
				className: cx("flex flex-1 min-w-0 flex-col items-start gap-[inherit] uds-sm:flex-row", hasTitle !== hasDescription && "uds-sm:items-center"),
				children: [contentArea, hasActions && /* @__PURE__ */ jsx("div", {
					className: "flex self-stretch flex-row items-center gap-1.5 uds-sm:self-center uds-sm:shrink-0",
					"data-testid": "banner-actions",
					...slotProps?.actions,
					children: actions
				})]
			}),
			dismissButton
		]
	});
});
Banner.displayName = "Banner";
//#endregion
export { Banner };
