import { resetComponent } from "../../style/index.js";
import { genStyleHooks, genSubStyleComponent } from "../../theme/util/genStyleUtils.js";
import { mergeToken } from "../../theme/internal.js";
import { CONTAINER_MAX_OFFSET } from "../../_util/hooks/useZIndex.js";
import notification_default, { genPurePanelStyle } from "./notification.js";
import placement_default from "./placement.js";
import { unit } from "@antdv-next/cssinjs";

//#region src/notification/style/index.ts
const DEFAULT_COLLAPSED_STACK_VISIBLE_COUNT = 3;
/** Provide default public ComponentToken values for Notification. */
function prepareComponentToken(token) {
	return {
		zIndexPopup: token.zIndexPopupBase + CONTAINER_MAX_OFFSET + 50,
		width: 384,
		progressBg: `linear-gradient(90deg, ${token.colorPrimaryBorderHover}, ${token.colorPrimary})`,
		colorSuccessBg: void 0,
		colorErrorBg: void 0,
		colorInfoBg: void 0,
		colorWarningBg: void 0
	};
}
/** Derive internal Notification style tokens from alias and component tokens. */
const prepareNotificationToken = (token) => {
	const notificationPaddingVertical = token.paddingMD;
	const notificationPaddingHorizontal = token.paddingLG;
	return mergeToken(token, {
		notificationBg: token.colorBgElevated,
		notificationPaddingVertical,
		notificationPaddingHorizontal,
		notificationIconSize: token.calc(token.fontSizeLG).mul(token.lineHeightLG).equal(),
		notificationCloseButtonSize: token.calc(token.controlHeightLG).mul(.55).equal(),
		notificationMarginBottom: token.margin,
		notificationPadding: `${unit(token.paddingMD)} ${unit(token.paddingContentHorizontalLG)}`,
		notificationMarginEdge: token.marginLG,
		notificationProgressHeight: 2,
		notificationMotionOffset: 64
	});
};
/** Build a clip-path inset that keeps stack shadows visible. */
function getStackNoticeClipPath(offset) {
	return `inset(${offset} ${offset} ${offset} ${offset})`;
}
/** Generate shared list content and motion base styles. */
const genNotificationListContentStyle = (token) => {
	const { componentCls, motionDurationMid, motionDurationSlow, motionEaseInOut } = token;
	const listContentCls = `${`${componentCls}-list`}-content`;
	return {
		[listContentCls]: {
			position: "relative",
			display: "flex",
			flexShrink: 0,
			flexDirection: "column",
			gap: token.notificationMarginBottom,
			width: "100%",
			willChange: "height, transform",
			transition: "none",
			[`&${listContentCls}-decrease`]: { transition: `height calc(${motionDurationSlow} * 2) ${motionEaseInOut} ${motionDurationMid}` }
		},
		[`${componentCls}-fade`]: {
			backfaceVisibility: "hidden",
			willChange: "transform, opacity"
		}
	};
};
/** Generate the root holder, list, stack, and RTL styles for notifications. */
function genNotificationListStyle(token, config) {
	const { componentCls, notificationMarginEdge } = token;
	const notificationMarginEdgeVar = "--notification-margin-edge";
	const noticeCls = `${componentCls}-notice`;
	const listCls = `${componentCls}-list`;
	const listWidth = config.listWidthKey ? token.calc(token[config.listWidthKey]).add(token.calc(notificationMarginEdge).mul(2)).equal() : "100%";
	const noticeBeyondStackVisibleCountCls = `${noticeCls}:nth-last-child(n + ${(config.stackVisibleCount ?? DEFAULT_COLLAPSED_STACK_VISIBLE_COUNT) + 1})`;
	const stackNoticeClipPath = getStackNoticeClipPath(unit(token.calc(token.marginXXL).mul(-1).equal()));
	return { [componentCls]: {
		...resetComponent(token),
		[notificationMarginEdgeVar]: unit(notificationMarginEdge),
		position: "fixed",
		zIndex: token.zIndexPopup,
		width: listWidth,
		maxWidth: "100vw",
		height: "100vh",
		overflow: "hidden",
		overscrollBehavior: "contain",
		[`${componentCls}-hook-holder`]: { position: "relative" },
		[`&${listCls}`]: {
			maxHeight: "100vh",
			padding: `var(${notificationMarginEdgeVar})`,
			overflowX: "hidden",
			overflowY: "auto",
			overscrollBehavior: "contain",
			scrollbarWidth: "none",
			msOverflowStyle: "none",
			pointerEvents: "none",
			"&::-webkit-scrollbar": {
				display: "none",
				width: 0,
				height: 0
			}
		},
		...genNotificationListContentStyle(token),
		[`&${componentCls}-stack`]: {
			[noticeCls]: { clipPath: stackNoticeClipPath },
			[`&:not(${componentCls}-stack-expanded)`]: {
				[noticeCls]: { "--notification-scale": "calc(1 - min(var(--notification-index, 0), 2) * 0.06)" },
				[`${noticeCls}:not(${noticeCls}-stack-in-threshold)`]: {
					opacity: 0,
					pointerEvents: "none"
				},
				[noticeBeyondStackVisibleCountCls]: {
					opacity: 0,
					pointerEvents: "none"
				}
			}
		},
		"&-rtl": {
			direction: "rtl",
			[`${noticeCls}-actions`]: { float: "left" }
		}
	} };
}
/** Register the PurePanel sub-style component for Notification. */
const PurePanelStyle = genSubStyleComponent(["Notification", "PurePanel"], (token) => genPurePanelStyle(prepareNotificationToken(token)), prepareComponentToken);
/** Compose the shared list, item, and placement styles. */
function sharedGenerateStyle(token, config) {
	const itemStyle = config.itemStyle ?? notification_default;
	return [
		genNotificationListStyle(token, config),
		itemStyle(token),
		placement_default(token)
	];
}
/** Register the main style hook for Notification. */
var style_default = genStyleHooks("Notification", (token) => {
	return sharedGenerateStyle(prepareNotificationToken(token), { listWidthKey: "width" });
}, prepareComponentToken);

//#endregion
export { PurePanelStyle, style_default as default, prepareNotificationToken, sharedGenerateStyle };