import { genStyleHooks, genSubStyleComponent } from "../../theme/util/genStyleUtils.js";
import { mergeToken } from "../../theme/internal.js";
import { CONTAINER_MAX_OFFSET } from "../../_util/hooks/useZIndex.js";
import { genListItemSharedStyle } from "../../notification/style/notification.js";
import { prepareNotificationToken, sharedGenerateStyle } from "../../notification/style/index.js";
import { unit } from "@antdv-next/cssinjs";

//#region src/message/style/index.ts
/** Map Message component tokens onto the shared Notification token shape. */
const prepareMessageToken = (token) => {
	const messagePaddingVertical = token.calc(token.controlHeightLG).sub(token.calc(token.fontSize).mul(token.lineHeight)).div(2).equal();
	const messagePaddingHorizontal = token.paddingSM;
	return mergeToken(prepareNotificationToken(token), {
		notificationBg: token.contentBg,
		notificationPadding: token.contentPadding,
		notificationPaddingVertical: messagePaddingVertical,
		notificationPaddingHorizontal: messagePaddingHorizontal
	});
};
/** Provide default public ComponentToken values for Message. */
const prepareComponentToken = (token) => ({
	zIndexPopup: token.zIndexPopupBase + CONTAINER_MAX_OFFSET + 10,
	contentBg: token.colorBgElevated,
	contentPadding: `${(token.controlHeightLG - token.fontSize * token.lineHeight) / 2}px ${token.paddingSM}px`
});
/** Generate the shared item card styles for Message notices. */
function genMessageItemStyle(token) {
	const { fontSize, fontSizeLG, lineHeight } = token;
	return genListItemSharedStyle(token, {
		width: "max-content",
		iconFontSize: fontSizeLG,
		titleFontSize: fontSize,
		titleLineHeight: lineHeight,
		contentStyle: {
			alignItems: "center",
			gap: token.marginXS
		},
		noticeStyle: { zIndex: 1 }
	});
}
/** Generate the collapsed stack placeholder styles for Message notices. */
const generateMessageStackStyle = (token) => {
	const { componentCls } = token;
	const noticeCls = `${componentCls}-notice`;
	const listContentCls = `${componentCls}-list-content`;
	const { "&::after": _hoverAfterStyle, ...messageNoticeStyle } = genMessageItemStyle(token)[noticeCls];
	const placeholderStyle = {
		...messageNoticeStyle,
		position: "absolute",
		zIndex: -1,
		left: "50%",
		height: token.calc(token.marginXS).mul(2).equal(),
		padding: 0,
		boxShadow: token.boxShadowTertiary,
		opacity: 0,
		pointerEvents: "none",
		transform: "translateX(-50%) translateY(100%)",
		transition: [
			`opacity ${token.motionDurationFast} ${token.motionEaseInOut}`,
			`transform ${token.motionDurationFast} ${token.motionEaseInOut}`,
			`width ${token.motionDurationSlow} ${token.motionEaseInOut}`
		].join(", "),
		content: "\"\""
	};
	return { [componentCls]: { [`&${componentCls}-stack`]: {
		[listContentCls]: {
			isolation: "isolate",
			"&::before": {
				...placeholderStyle,
				top: `calc(var(--top-notificiation-height) - ${unit(token.marginXS)})`,
				width: `calc(var(--top-notificiation-width) - ${unit(token.margin)})`
			},
			"&::after": {
				...placeholderStyle,
				zIndex: -2,
				top: "var(--top-notificiation-height)",
				width: `calc(var(--top-notificiation-width) - ${unit(token.calc(token.margin).mul(2).equal())})`
			}
		},
		[`&:not(${componentCls}-stack-expanded)`]: { [listContentCls]: { "&::before, &::after": {
			opacity: 1,
			transform: "translateX(-50%) translateY(0)"
		} } }
	} } };
};
/** Generate standalone PurePanel styles for Message. */
const generateMessagePurePanelStyle = (token) => {
	const { componentCls } = token;
	const noticeCls = `${componentCls}-notice`;
	const messageItemStyle = genMessageItemStyle(token);
	return { [`${noticeCls}-pure-panel`]: {
		width: "max-content",
		maxWidth: "100%",
		...messageItemStyle,
		[noticeCls]: {
			...messageItemStyle[noticeCls],
			position: "relative",
			width: "max-content",
			maxWidth: "100%"
		}
	} };
};
/** Register the PurePanel sub-style component for Message. */
const PurePanelStyle = genSubStyleComponent(["Message", "PurePanel"], (token) => generateMessagePurePanelStyle(prepareMessageToken(token)), prepareComponentToken);
/** Wrap Message item styles under the component root selector. */
const generateMessageStyle = (token) => ({ [token.componentCls]: genMessageItemStyle(token) });
/** Register the main style hook for Message. */
var style_default = genStyleHooks("Message", (token) => {
	const messageToken = prepareMessageToken(token);
	return [sharedGenerateStyle(messageToken, {
		stackVisibleCount: 1,
		itemStyle: generateMessageStyle
	}), generateMessageStackStyle(messageToken)];
}, prepareComponentToken);

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