import { genFocusOutline, genFocusStyle, resetComponent } from "../../style/index.js";
import { genStyleHooks } from "../../theme/util/genStyleUtils.js";
import { mergeToken } from "../../theme/internal.js";
import { initFadeMotion } from "../../style/motion/fade.js";
import { initZoomMotion } from "../../style/motion/zoom.js";
import { getMediaSize } from "../../grid/style/index.js";
import { unit } from "@antdv-next/cssinjs";

//#region src/modal/style/index.ts
function box(position) {
	return {
		position,
		inset: 0
	};
}
const genModalMaskStyle = (token) => {
	const { componentCls, antCls } = token;
	return [{ [`${componentCls}-root`]: {
		[`${componentCls}${antCls}-zoom-enter, ${componentCls}${antCls}-zoom-appear`]: {
			transform: "none",
			opacity: 0,
			animationDuration: token.motionDurationSlow,
			userSelect: "none"
		},
		[`${componentCls}${antCls}-zoom-leave ${componentCls}-container`]: { pointerEvents: "none" },
		[`${componentCls}-mask`]: {
			...box("fixed"),
			zIndex: token.zIndexPopupBase,
			height: "100%",
			backgroundColor: token.colorBgMask,
			pointerEvents: "none",
			[`&${componentCls}-mask-blur`]: { backdropFilter: "blur(4px)" },
			[`${componentCls}-hidden`]: { display: "none" }
		},
		[`${componentCls}-wrap`]: {
			...box("fixed"),
			zIndex: token.zIndexPopupBase,
			overflow: "auto",
			outline: 0,
			WebkitOverflowScrolling: "touch"
		}
	} }, { [`${componentCls}-root`]: initFadeMotion(token) }];
};
const genModalStyle = (token) => {
	const { componentCls, motionDurationMid } = token;
	return [
		{ [`${componentCls}-root`]: {
			[`${componentCls}-wrap-rtl`]: { direction: "rtl" },
			[`${componentCls}-centered`]: {
				textAlign: "center",
				"&::before": {
					display: "inline-block",
					width: 0,
					height: "100%",
					verticalAlign: "middle",
					content: "\"\""
				},
				[componentCls]: {
					top: 0,
					display: "inline-block",
					paddingBottom: 0,
					textAlign: "start",
					verticalAlign: "middle"
				}
			},
			[`@media (max-width: ${token.screenSMMax}px)`]: {
				[componentCls]: {
					maxWidth: "calc(100vw - 16px)",
					margin: `${unit(token.marginXS)} auto`
				},
				[`${componentCls}-centered`]: { [componentCls]: { flex: 1 } }
			}
		} },
		{ [componentCls]: {
			...resetComponent(token),
			pointerEvents: "none",
			position: "relative",
			top: 100,
			width: "auto",
			maxWidth: `calc(100vw - ${unit(token.calc(token.margin).mul(2).equal())})`,
			margin: "0 auto",
			"&:focus-visible": {
				borderRadius: token.borderRadiusLG,
				...genFocusOutline(token)
			},
			[`${componentCls}-title`]: {
				margin: 0,
				color: token.titleColor,
				fontWeight: token.fontWeightStrong,
				fontSize: token.titleFontSize,
				lineHeight: token.titleLineHeight,
				wordWrap: "break-word"
			},
			[`${componentCls}-container`]: {
				position: "relative",
				backgroundColor: token.contentBg,
				backgroundClip: "padding-box",
				border: 0,
				borderRadius: token.borderRadiusLG,
				boxShadow: token.boxShadow,
				pointerEvents: "auto",
				padding: token.contentPadding
			},
			[`${componentCls}-close`]: {
				position: "absolute",
				top: token.calc(token.modalHeaderHeight).sub(token.modalCloseBtnSize).div(2).equal(),
				insetInlineEnd: token.calc(token.modalHeaderHeight).sub(token.modalCloseBtnSize).div(2).equal(),
				zIndex: token.calc(token.zIndexPopupBase).add(10).equal(),
				padding: 0,
				color: token.modalCloseIconColor,
				fontWeight: token.fontWeightStrong,
				lineHeight: 1,
				textDecoration: "none",
				background: "transparent",
				borderRadius: token.borderRadiusSM,
				width: token.modalCloseBtnSize,
				height: token.modalCloseBtnSize,
				border: 0,
				outline: 0,
				cursor: "pointer",
				transition: ["color", "background-color"].map((prop) => `${prop} ${motionDurationMid}`).join(", "),
				"&-x": {
					display: "flex",
					fontSize: token.fontSizeLG,
					fontStyle: "normal",
					lineHeight: unit(token.modalCloseBtnSize),
					justifyContent: "center",
					textTransform: "none",
					textRendering: "auto"
				},
				"&:disabled": { pointerEvents: "none" },
				"&:hover": {
					color: token.modalCloseIconHoverColor,
					backgroundColor: token.colorBgTextHover,
					textDecoration: "none"
				},
				"&:active": { backgroundColor: token.colorBgTextActive },
				...genFocusStyle(token)
			},
			[`${componentCls}-header`]: {
				color: token.colorText,
				background: token.headerBg,
				borderRadius: `${unit(token.borderRadiusLG)} ${unit(token.borderRadiusLG)} 0 0`,
				marginBottom: token.headerMarginBottom,
				padding: token.headerPadding,
				borderBottom: token.headerBorderBottom
			},
			[`${componentCls}-body`]: {
				fontSize: token.fontSize,
				lineHeight: token.lineHeight,
				wordWrap: "break-word",
				padding: token.bodyPadding,
				[`${componentCls}-body-skeleton`]: {
					width: "100%",
					height: "100%",
					display: "flex",
					justifyContent: "center",
					alignItems: "center",
					margin: `${unit(token.margin)} auto`
				}
			},
			[`${componentCls}-footer`]: {
				display: "flex",
				justifyContent: "end",
				alignItems: "center",
				textAlign: "end",
				background: token.footerBg,
				marginTop: token.footerMarginTop,
				padding: token.footerPadding,
				borderTop: token.footerBorderTop,
				borderRadius: token.footerBorderRadius,
				[`> ${token.antCls}-btn + ${token.antCls}-btn`]: { marginInlineStart: token.marginXS }
			},
			[`${componentCls}-open`]: { overflow: "hidden" }
		} },
		{ [`${componentCls}-pure-panel`]: {
			top: "auto",
			padding: 0,
			display: "flex",
			flexDirection: "column",
			[`${componentCls}-container,
          ${componentCls}-body,
          ${componentCls}-confirm-body-wrapper`]: {
				display: "flex",
				flexDirection: "column",
				flex: "auto"
			},
			[`${componentCls}-confirm-body`]: { marginBottom: "auto" }
		} }
	];
};
const genRTLStyle = (token) => {
	const { componentCls } = token;
	return { [`${componentCls}-root`]: { [`${componentCls}-wrap-rtl`]: {
		direction: "rtl",
		[`${componentCls}-confirm-body`]: { direction: "rtl" }
	} } };
};
const genResponsiveWidthStyle = (token) => {
	const { componentCls } = token;
	const oriGridMediaSizesMap = getMediaSize(token);
	const gridMediaSizesMap = { ...oriGridMediaSizesMap };
	delete gridMediaSizesMap.xs;
	const cssVarPrefix = `--${componentCls.replace(".", "")}-`;
	const responsiveStyles = Object.keys(gridMediaSizesMap).map((key) => ({ [`@media (min-width: ${unit(gridMediaSizesMap[key])})`]: { width: `var(${cssVarPrefix}${key}-width)` } }));
	return { [`${componentCls}-root`]: { [componentCls]: [
		...Object.keys(oriGridMediaSizesMap).map((currentKey, index) => {
			const previousKey = Object.keys(oriGridMediaSizesMap)[index - 1];
			return previousKey ? { [`${cssVarPrefix}${currentKey}-width`]: `var(${cssVarPrefix}${previousKey}-width)` } : null;
		}),
		{ width: `var(${cssVarPrefix}xs-width)` },
		...responsiveStyles
	] } };
};
function prepareToken(token) {
	const headerPaddingVertical = token.padding;
	const headerFontSize = token.fontSizeHeading5;
	const headerLineHeight = token.lineHeightHeading5;
	return mergeToken(token, {
		modalHeaderHeight: token.calc(token.calc(headerLineHeight).mul(headerFontSize).equal()).add(token.calc(headerPaddingVertical).mul(2).equal()).equal(),
		modalFooterBorderColorSplit: token.colorSplit,
		modalFooterBorderStyle: token.lineType,
		modalFooterBorderWidth: token.lineWidth,
		modalCloseIconColor: token.colorIcon,
		modalCloseIconHoverColor: token.colorIconHover,
		modalCloseBtnSize: token.controlHeight,
		modalConfirmIconSize: token.fontHeight,
		modalTitleHeight: token.calc(token.titleFontSize).mul(token.titleLineHeight).equal()
	});
}
function prepareComponentToken(token) {
	return {
		footerBg: "transparent",
		headerBg: "transparent",
		titleLineHeight: token.lineHeightHeading5,
		titleFontSize: token.fontSizeHeading5,
		contentBg: token.colorBgElevated,
		titleColor: token.colorTextHeading,
		contentPadding: token.wireframe ? 0 : `${unit(token.paddingMD)} ${unit(token.paddingContentHorizontalLG)}`,
		headerPadding: token.wireframe ? `${unit(token.padding)} ${unit(token.paddingLG)}` : 0,
		headerBorderBottom: token.wireframe ? `${unit(token.lineWidth)} ${token.lineType} ${token.colorSplit}` : "none",
		headerMarginBottom: token.wireframe ? 0 : token.marginXS,
		bodyPadding: token.wireframe ? token.paddingLG : 0,
		footerPadding: token.wireframe ? `${unit(token.paddingXS)} ${unit(token.padding)}` : 0,
		footerBorderTop: token.wireframe ? `${unit(token.lineWidth)} ${token.lineType} ${token.colorSplit}` : "none",
		footerBorderRadius: token.wireframe ? `0 0 ${unit(token.borderRadiusLG)} ${unit(token.borderRadiusLG)}` : 0,
		footerMarginTop: token.wireframe ? 0 : token.marginSM,
		confirmBodyPadding: token.wireframe ? `${unit(token.padding * 2)} ${unit(token.padding * 2)} ${unit(token.paddingLG)}` : 0,
		confirmIconMarginInlineEnd: token.wireframe ? token.margin : token.marginSM,
		confirmBtnsMarginTop: token.wireframe ? token.marginLG : token.marginSM,
		mask: true
	};
}
var style_default = genStyleHooks("Modal", (token) => {
	const modalToken = prepareToken(token);
	return [
		genModalStyle(modalToken),
		genRTLStyle(modalToken),
		genModalMaskStyle(modalToken),
		initZoomMotion(modalToken, "zoom"),
		genResponsiveWidthStyle(modalToken)
	];
}, prepareComponentToken, { unitless: { titleLineHeight: true } });

//#endregion
export { style_default as default, genModalMaskStyle, prepareComponentToken, prepareToken };