import { clearFix, resetComponent, resetIcon, textEllipsis } from "../../style/index.js";
import { genStyleHooks } from "../../theme/util/genStyleUtils.js";
import { mergeToken } from "../../theme/internal.js";
import collapse_default from "../../style/motion/collapse.js";
import { initSlideMotion } from "../../style/motion/slide.js";
import { initZoomMotion } from "../../style/motion/zoom.js";
import horizontal_default from "./horizontal.js";
import rtl_default from "./rtl.js";
import theme_default from "./theme.js";
import vertical_default from "./vertical.js";
import { unit } from "@antdv-next/cssinjs";
import { FastColor } from "@ant-design/fast-color";

//#region src/menu/style/index.ts
const genMenuItemStyle = (token) => {
	const { componentCls, motionDurationSlow, motionDurationMid, motionEaseInOut, motionEaseOut, iconCls, iconSize, iconMarginInlineEnd } = token;
	return {
		[`${componentCls}-item, ${componentCls}-submenu-title`]: {
			position: "relative",
			display: "block",
			margin: 0,
			whiteSpace: "nowrap",
			cursor: "pointer",
			transition: [
				`border-color ${motionDurationSlow}`,
				`background-color ${motionDurationSlow}`,
				`padding calc(${motionDurationSlow} + 0.1s) ${motionEaseInOut}`
			].join(","),
			[`${componentCls}-item-icon, ${iconCls}`]: {
				minWidth: iconSize,
				fontSize: iconSize,
				transition: [
					`font-size ${motionDurationMid} ${motionEaseOut}`,
					`margin ${motionDurationSlow} ${motionEaseInOut}`,
					`color ${motionDurationSlow}`
				].join(","),
				"+ span": {
					marginInlineStart: iconMarginInlineEnd,
					opacity: 1,
					transition: [
						`opacity ${motionDurationSlow} ${motionEaseInOut}`,
						`margin ${motionDurationSlow}`,
						`color ${motionDurationSlow}`
					].join(",")
				}
			},
			[`${componentCls}-item-icon`]: { ...resetIcon() },
			[`&${componentCls}-item-only-child`]: { [`> ${iconCls}, > ${componentCls}-item-icon`]: { marginInlineEnd: 0 } }
		},
		[`${componentCls}-item-disabled, ${componentCls}-submenu-disabled`]: {
			background: "none !important",
			cursor: "not-allowed",
			"&::after": { borderColor: "transparent !important" },
			a: {
				color: "inherit !important",
				cursor: "not-allowed",
				pointerEvents: "none"
			},
			[`> ${componentCls}-submenu-title`]: {
				color: "inherit !important",
				cursor: "not-allowed"
			}
		}
	};
};
const genSubMenuArrowStyle = (token) => {
	const { componentCls, motionDurationSlow, motionEaseInOut, borderRadius, menuArrowSize, menuArrowOffset } = token;
	return { [`${componentCls}-submenu`]: {
		"&-expand-icon, &-arrow": {
			position: "absolute",
			top: "50%",
			insetInlineEnd: token.margin,
			width: menuArrowSize,
			color: "currentcolor",
			transform: "translateY(-50%)",
			transition: ["transform", "opacity"].map((prop) => `${prop} ${motionDurationSlow}`).join(",")
		},
		"&-arrow": {
			"&::before, &::after": {
				position: "absolute",
				width: token.calc(menuArrowSize).mul(.6).equal(),
				height: token.calc(menuArrowSize).mul(.15).equal(),
				backgroundColor: "currentcolor",
				borderRadius,
				transition: [
					`background-color`,
					`transform`,
					`top`,
					`color`
				].map((prop) => `${prop} ${motionDurationSlow} ${motionEaseInOut}`).join(","),
				content: "\"\""
			},
			"&::before": { transform: `rotate(45deg) translateY(${unit(token.calc(menuArrowOffset).mul(-1).equal())})` },
			"&::after": { transform: `rotate(-45deg) translateY(${unit(menuArrowOffset)})` }
		}
	} };
};
const getBaseStyle = (token) => {
	const { antCls, componentCls, fontSize, motionDurationSlow, motionDurationMid, motionEaseInOut, paddingXS, padding, colorSplit, lineWidth, zIndexPopup, borderRadiusLG, subMenuItemBorderRadius, menuArrowSize, menuArrowOffset, lineType, groupTitleLineHeight, groupTitleFontSize } = token;
	return [
		{
			"": { [componentCls]: {
				...clearFix(),
				"&-hidden": { display: "none" }
			} },
			[`${componentCls}-submenu-hidden`]: { display: "none" }
		},
		{ [componentCls]: {
			...resetComponent(token),
			...clearFix(),
			marginBottom: 0,
			paddingInlineStart: 0,
			fontSize,
			lineHeight: 0,
			listStyle: "none",
			outline: "none",
			transition: `width ${motionDurationSlow} cubic-bezier(0.2, 0, 0, 1) 0s`,
			"ul, ol": {
				margin: 0,
				padding: 0,
				listStyle: "none"
			},
			"&-overflow": {
				display: "flex",
				[`${componentCls}-item`]: { flex: "none" }
			},
			[`${componentCls}-item, ${componentCls}-submenu, ${componentCls}-submenu-title`]: { borderRadius: token.itemBorderRadius },
			[`${componentCls}-item-group-title`]: {
				padding: `${unit(paddingXS)} ${unit(padding)}`,
				fontSize: groupTitleFontSize,
				lineHeight: groupTitleLineHeight,
				transition: `all ${motionDurationSlow}`
			},
			[`&-horizontal ${componentCls}-submenu`]: { transition: [`border-color`, `background-color`].map((prop) => `${prop} ${motionDurationSlow} ${motionEaseInOut}`).join(",") },
			[`${componentCls}-submenu, ${componentCls}-submenu-inline`]: { transition: [
				`border-color ${motionDurationSlow}`,
				`background-color ${motionDurationSlow}`,
				`padding ${motionDurationMid}`
			].map((prop) => `${prop} ${motionEaseInOut}`).join(",") },
			[`${componentCls}-submenu ${componentCls}-sub`]: {
				cursor: "initial",
				transition: [`background-color`, `padding`].map((prop) => `${prop} ${motionDurationSlow} ${motionEaseInOut}`).join(",")
			},
			[`${componentCls}-title-content`]: {
				transition: `color ${motionDurationSlow}`,
				"&-with-extra": {
					display: "inline-flex",
					alignItems: "center",
					width: "100%",
					minWidth: 0
				},
				[`${componentCls}-item-label`]: {
					flex: "auto",
					minWidth: 0,
					...textEllipsis
				},
				[[`> ${antCls}-typography-ellipsis-single-line`, `> ${componentCls}-item-label > ${antCls}-typography-ellipsis-single-line`].join(",")]: {
					display: "inline",
					verticalAlign: "unset"
				},
				[`${componentCls}-item-extra`]: {
					flex: "none",
					marginInlineStart: "auto",
					paddingInlineStart: token.padding
				}
			},
			[`${componentCls}-item-icon + ${componentCls}-title-content-with-extra`]: { width: `calc(100% - ${unit(token.calc(token.iconSize).add(token.iconMarginInlineEnd ?? 0).equal())})` },
			[`${componentCls}-item a`]: { "&::before": {
				position: "absolute",
				inset: 0,
				backgroundColor: "transparent",
				content: "\"\""
			} },
			[`${componentCls}-item-divider`]: {
				overflow: "hidden",
				lineHeight: 0,
				borderColor: colorSplit,
				borderStyle: lineType,
				borderWidth: 0,
				borderTopWidth: lineWidth,
				marginBlock: lineWidth,
				padding: 0,
				"&-dashed": { borderStyle: "dashed" }
			},
			...genMenuItemStyle(token),
			[`${componentCls}-item-group`]: { [`${componentCls}-item-group-list`]: {
				margin: 0,
				padding: 0,
				[`${componentCls}-item, ${componentCls}-submenu-title`]: { paddingInline: `${unit(token.calc(fontSize).mul(2).equal())} ${unit(padding)}` }
			} },
			"&-submenu": {
				"&-popup": {
					position: "absolute",
					zIndex: zIndexPopup,
					borderRadius: borderRadiusLG,
					boxShadow: "none",
					transformOrigin: "0 0",
					[`&${componentCls}-submenu`]: { background: "transparent" },
					"&::before": {
						position: "absolute",
						inset: 0,
						zIndex: -1,
						width: "100%",
						height: "100%",
						opacity: 0,
						content: "\"\""
					},
					[`> ${componentCls}`]: {
						borderRadius: borderRadiusLG,
						...genMenuItemStyle(token),
						...genSubMenuArrowStyle(token),
						[`${componentCls}-item, ${componentCls}-submenu > ${componentCls}-submenu-title`]: { borderRadius: subMenuItemBorderRadius },
						[`${componentCls}-submenu-title::after`]: { transition: `transform ${motionDurationSlow} ${motionEaseInOut}` }
					}
				},
				[`
          &-placement-leftTop,
          &-placement-bottomRight,
          `]: { transformOrigin: "100% 0" },
				[`
          &-placement-leftBottom,
          &-placement-topRight,
          `]: { transformOrigin: "100% 100%" },
				[`
          &-placement-rightBottom,
          &-placement-topLeft,
          `]: { transformOrigin: "0 100%" },
				[`
          &-placement-bottomLeft,
          &-placement-rightTop,
          `]: { transformOrigin: "0 0" },
				[`
          &-placement-leftTop,
          &-placement-leftBottom
          `]: { paddingInlineEnd: token.paddingXS },
				[`
          &-placement-rightTop,
          &-placement-rightBottom
          `]: { paddingInlineStart: token.paddingXS },
				[`
          &-placement-topRight,
          &-placement-topLeft
          `]: { paddingBottom: token.paddingXS },
				[`
          &-placement-bottomRight,
          &-placement-bottomLeft
          `]: { paddingTop: token.paddingXS }
			},
			...genSubMenuArrowStyle(token),
			[`&-inline-collapsed ${componentCls}-submenu-arrow,
        &-inline ${componentCls}-submenu-arrow`]: {
				"&::before": { transform: `rotate(-45deg) translateX(${unit(menuArrowOffset)})` },
				"&::after": { transform: `rotate(45deg) translateX(${unit(token.calc(menuArrowOffset).mul(-1).equal())})` }
			},
			[`${componentCls}-submenu-open${componentCls}-submenu-inline > ${componentCls}-submenu-title > ${componentCls}-submenu-arrow`]: {
				transform: `translateY(${unit(token.calc(menuArrowSize).mul(.2).mul(-1).equal())})`,
				"&::after": { transform: `rotate(-45deg) translateX(${unit(token.calc(menuArrowOffset).mul(-1).equal())})` },
				"&::before": { transform: `rotate(45deg) translateX(${unit(menuArrowOffset)})` }
			}
		} },
		{ [`${antCls}-layout-header`]: { [componentCls]: { lineHeight: "inherit" } } }
	];
};
const prepareComponentToken = (token) => {
	const { colorPrimary, colorError, colorTextDisabled, colorErrorBg, colorText, colorTextDescription, colorBgContainer, colorFillAlter, colorFillContent, lineWidth, lineWidthBold, controlItemBgActive, colorBgTextHover, controlHeightLG, lineHeight, colorBgElevated, marginXXS, padding, fontSize, controlHeightSM, fontSizeLG, colorTextLightSolid, colorErrorHover } = token;
	const activeBarWidth = token.activeBarWidth ?? 0;
	const activeBarBorderWidth = token.activeBarBorderWidth ?? lineWidth;
	const itemMarginInline = token.itemMarginInline ?? token.marginXXS;
	const colorTextDark = new FastColor(colorTextLightSolid).setA(.65).toRgbString();
	return {
		dropdownWidth: 160,
		zIndexPopup: token.zIndexPopupBase + 50,
		radiusItem: token.borderRadiusLG,
		itemBorderRadius: token.borderRadiusLG,
		radiusSubMenuItem: token.borderRadiusSM,
		subMenuItemBorderRadius: token.borderRadiusSM,
		colorItemText: colorText,
		itemColor: colorText,
		colorItemTextHover: colorText,
		itemHoverColor: colorText,
		colorItemTextHoverHorizontal: colorPrimary,
		horizontalItemHoverColor: colorPrimary,
		colorGroupTitle: colorTextDescription,
		groupTitleColor: colorTextDescription,
		colorItemTextSelected: colorPrimary,
		itemSelectedColor: colorPrimary,
		subMenuItemSelectedColor: colorPrimary,
		colorItemTextSelectedHorizontal: colorPrimary,
		horizontalItemSelectedColor: colorPrimary,
		colorItemBg: colorBgContainer,
		itemBg: colorBgContainer,
		colorItemBgHover: colorBgTextHover,
		itemHoverBg: colorBgTextHover,
		colorItemBgActive: colorFillContent,
		itemActiveBg: controlItemBgActive,
		colorSubItemBg: colorFillAlter,
		subMenuItemBg: colorFillAlter,
		colorItemBgSelected: controlItemBgActive,
		itemSelectedBg: controlItemBgActive,
		colorItemBgSelectedHorizontal: "transparent",
		horizontalItemSelectedBg: "transparent",
		colorActiveBarWidth: 0,
		activeBarWidth,
		colorActiveBarHeight: lineWidthBold,
		activeBarHeight: lineWidthBold,
		colorActiveBarBorderSize: lineWidth,
		activeBarBorderWidth,
		colorItemTextDisabled: colorTextDisabled,
		itemDisabledColor: colorTextDisabled,
		colorDangerItemText: colorError,
		dangerItemColor: colorError,
		colorDangerItemTextHover: colorError,
		dangerItemHoverColor: colorError,
		colorDangerItemTextSelected: colorError,
		dangerItemSelectedColor: colorError,
		colorDangerItemBgActive: colorErrorBg,
		dangerItemActiveBg: colorErrorBg,
		colorDangerItemBgSelected: colorErrorBg,
		dangerItemSelectedBg: colorErrorBg,
		itemMarginInline,
		horizontalItemBorderRadius: 0,
		horizontalItemHoverBg: "transparent",
		itemHeight: controlHeightLG,
		groupTitleLineHeight: lineHeight,
		collapsedWidth: controlHeightLG * 2,
		popupBg: colorBgElevated,
		itemMarginBlock: marginXXS,
		itemPaddingInline: padding,
		horizontalLineHeight: `${controlHeightLG * 1.15}px`,
		iconSize: fontSize,
		iconMarginInlineEnd: controlHeightSM - fontSize,
		collapsedIconSize: fontSizeLG,
		groupTitleFontSize: fontSize,
		darkItemDisabledColor: new FastColor(colorTextLightSolid).setA(.25).toRgbString(),
		darkItemColor: colorTextDark,
		darkDangerItemColor: colorError,
		darkItemBg: "#001529",
		darkPopupBg: "#001529",
		darkSubMenuItemBg: "#000c17",
		darkItemSelectedColor: colorTextLightSolid,
		darkItemSelectedBg: colorPrimary,
		darkDangerItemSelectedBg: colorError,
		darkItemHoverBg: "transparent",
		darkGroupTitleColor: colorTextDark,
		darkItemHoverColor: colorTextLightSolid,
		darkDangerItemHoverColor: colorErrorHover,
		darkDangerItemSelectedColor: colorTextLightSolid,
		darkDangerItemActiveBg: colorError,
		itemWidth: activeBarWidth ? `calc(100% + ${activeBarBorderWidth}px)` : `calc(100% - ${itemMarginInline * 2}px)`
	};
};
var style_default = (prefixCls, rootCls = prefixCls, injectStyle = true) => {
	return genStyleHooks("Menu", (token) => {
		const { colorBgElevated, controlHeightLG, fontSize, darkItemColor, darkDangerItemColor, darkItemBg, darkSubMenuItemBg, darkItemSelectedColor, darkItemSelectedBg, darkDangerItemSelectedBg, darkItemHoverBg, darkGroupTitleColor, darkItemHoverColor, darkItemDisabledColor, darkDangerItemHoverColor, darkDangerItemSelectedColor, darkDangerItemActiveBg, popupBg, darkPopupBg } = token;
		const menuArrowSize = token.calc(fontSize).div(7).mul(5).equal();
		const menuToken = mergeToken(token, {
			menuArrowSize,
			menuHorizontalHeight: token.calc(controlHeightLG).mul(1.15).equal(),
			menuArrowOffset: token.calc(menuArrowSize).mul(.25).equal(),
			menuSubMenuBg: colorBgElevated,
			calc: token.calc,
			popupBg
		});
		const menuDarkToken = mergeToken(menuToken, {
			itemColor: darkItemColor,
			itemHoverColor: darkItemHoverColor,
			groupTitleColor: darkGroupTitleColor,
			itemSelectedColor: darkItemSelectedColor,
			subMenuItemSelectedColor: darkItemSelectedColor,
			itemBg: darkItemBg,
			popupBg: darkPopupBg,
			subMenuItemBg: darkSubMenuItemBg,
			itemActiveBg: "transparent",
			itemSelectedBg: darkItemSelectedBg,
			activeBarHeight: 0,
			activeBarBorderWidth: 0,
			itemHoverBg: darkItemHoverBg,
			itemDisabledColor: darkItemDisabledColor,
			dangerItemColor: darkDangerItemColor,
			dangerItemHoverColor: darkDangerItemHoverColor,
			dangerItemSelectedColor: darkDangerItemSelectedColor,
			dangerItemActiveBg: darkDangerItemActiveBg,
			dangerItemSelectedBg: darkDangerItemSelectedBg,
			menuSubMenuBg: darkSubMenuItemBg,
			horizontalItemSelectedColor: darkItemSelectedColor,
			horizontalItemSelectedBg: darkItemSelectedBg
		});
		return [
			getBaseStyle(menuToken),
			horizontal_default(menuToken),
			vertical_default(menuToken),
			theme_default(menuToken, "light"),
			theme_default(menuDarkToken, "dark"),
			rtl_default(menuToken),
			collapse_default(menuToken),
			initSlideMotion(menuToken, "slide-up"),
			initSlideMotion(menuToken, "slide-down"),
			initZoomMotion(menuToken, "zoom-big")
		];
	}, prepareComponentToken, {
		deprecatedTokens: [
			["colorGroupTitle", "groupTitleColor"],
			["radiusItem", "itemBorderRadius"],
			["radiusSubMenuItem", "subMenuItemBorderRadius"],
			["colorItemText", "itemColor"],
			["colorItemTextHover", "itemHoverColor"],
			["colorItemTextHoverHorizontal", "horizontalItemHoverColor"],
			["colorItemTextSelected", "itemSelectedColor"],
			["colorItemTextSelectedHorizontal", "horizontalItemSelectedColor"],
			["colorItemTextDisabled", "itemDisabledColor"],
			["colorDangerItemText", "dangerItemColor"],
			["colorDangerItemTextHover", "dangerItemHoverColor"],
			["colorDangerItemTextSelected", "dangerItemSelectedColor"],
			["colorDangerItemBgActive", "dangerItemActiveBg"],
			["colorDangerItemBgSelected", "dangerItemSelectedBg"],
			["colorItemBg", "itemBg"],
			["colorItemBgHover", "itemHoverBg"],
			["colorSubItemBg", "subMenuItemBg"],
			["colorItemBgActive", "itemActiveBg"],
			["colorItemBgSelectedHorizontal", "horizontalItemSelectedBg"],
			["colorActiveBarWidth", "activeBarWidth"],
			["colorActiveBarHeight", "activeBarHeight"],
			["colorActiveBarBorderSize", "activeBarBorderWidth"],
			["colorItemBgSelected", "itemSelectedBg"]
		],
		injectStyle,
		unitless: { groupTitleLineHeight: true }
	})(prefixCls, rootCls);
};

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