import { genFocusStyle, resetComponent } from "../../style/index.js";
import { genStyleHooks } from "../../theme/util/genStyleUtils.js";
import { mergeToken } from "../../theme/internal.js";
import { getArrowToken } from "../../style/roundedArrow.js";
import placementArrow_default, { getArrowOffsetToken } from "../../style/placementArrow.js";
import { initMoveMotion } from "../../style/motion/move.js";
import { initSlideMotion, slideDownIn, slideDownOut, slideUpIn, slideUpOut } from "../../style/motion/slide.js";
import { initZoomMotion } from "../../style/motion/zoom.js";
import status_default from "./status.js";
import { unit } from "@antdv-next/cssinjs";

//#region src/dropdown/style/index.ts
const genBaseStyle = (token) => {
	const { componentCls, menuCls, zIndexPopup, dropdownArrowDistance, sizePopupArrow, antCls, iconCls, motionDurationMid, paddingBlock, fontSize, dropdownEdgeChildPadding, colorTextDisabled, fontSizeIcon, controlPaddingHorizontal, colorBgElevated } = token;
	return [
		{ [componentCls]: {
			position: "absolute",
			top: -9999,
			left: {
				_skip_check_: true,
				value: -9999
			},
			zIndex: zIndexPopup,
			display: "block",
			"&::before": {
				position: "absolute",
				insetBlock: token.calc(sizePopupArrow).div(2).sub(dropdownArrowDistance).equal(),
				zIndex: -9999,
				opacity: 1e-4,
				content: "\"\""
			},
			"&-menu-vertical": {
				maxHeight: "100vh",
				overflowY: "auto"
			},
			[`&-trigger${antCls}-btn`]: { [`& > ${iconCls}-down, & > ${antCls}-btn-icon > ${iconCls}-down`]: { fontSize: fontSizeIcon } },
			[`${componentCls}-wrap`]: {
				position: "relative",
				[`${antCls}-btn > ${iconCls}-down`]: { fontSize: fontSizeIcon },
				[`${iconCls}-down::before`]: { transition: `transform ${motionDurationMid}` }
			},
			[`${componentCls}-wrap-open`]: { [`${iconCls}-down::before`]: { transform: `rotate(180deg)` } },
			[`
        &-hidden,
        &-menu-hidden,
        &-menu-submenu-hidden
      `]: { display: "none" },
			[`&${antCls}-slide-down-enter${antCls}-slide-down-enter-active${componentCls}-placement-bottomLeft,
          &${antCls}-slide-down-appear${antCls}-slide-down-appear-active${componentCls}-placement-bottomLeft,
          &${antCls}-slide-down-enter${antCls}-slide-down-enter-active${componentCls}-placement-bottom,
          &${antCls}-slide-down-appear${antCls}-slide-down-appear-active${componentCls}-placement-bottom,
          &${antCls}-slide-down-enter${antCls}-slide-down-enter-active${componentCls}-placement-bottomRight,
          &${antCls}-slide-down-appear${antCls}-slide-down-appear-active${componentCls}-placement-bottomRight`]: { animationName: slideUpIn },
			[`&${antCls}-slide-up-enter${antCls}-slide-up-enter-active${componentCls}-placement-topLeft,
          &${antCls}-slide-up-appear${antCls}-slide-up-appear-active${componentCls}-placement-topLeft,
          &${antCls}-slide-up-enter${antCls}-slide-up-enter-active${componentCls}-placement-top,
          &${antCls}-slide-up-appear${antCls}-slide-up-appear-active${componentCls}-placement-top,
          &${antCls}-slide-up-enter${antCls}-slide-up-enter-active${componentCls}-placement-topRight,
          &${antCls}-slide-up-appear${antCls}-slide-up-appear-active${componentCls}-placement-topRight`]: { animationName: slideDownIn },
			[`&${antCls}-slide-down-leave${antCls}-slide-down-leave-active${componentCls}-placement-bottomLeft,
          &${antCls}-slide-down-leave${antCls}-slide-down-leave-active${componentCls}-placement-bottom,
          &${antCls}-slide-down-leave${antCls}-slide-down-leave-active${componentCls}-placement-bottomRight`]: { animationName: slideUpOut },
			[`&${antCls}-slide-up-leave${antCls}-slide-up-leave-active${componentCls}-placement-topLeft,
          &${antCls}-slide-up-leave${antCls}-slide-up-leave-active${componentCls}-placement-top,
          &${antCls}-slide-up-leave${antCls}-slide-up-leave-active${componentCls}-placement-topRight`]: { animationName: slideDownOut }
		} },
		placementArrow_default(token, colorBgElevated, { arrowPlacement: {
			top: true,
			bottom: true
		} }),
		{
			[`${componentCls} ${menuCls}`]: {
				position: "relative",
				margin: 0
			},
			[`${menuCls}-submenu-popup`]: {
				position: "absolute",
				zIndex: zIndexPopup,
				background: "transparent",
				boxShadow: "none",
				transformOrigin: "0 0",
				"ul, li": {
					listStyle: "none",
					margin: 0
				}
			},
			[`${componentCls}, ${componentCls}-menu-submenu`]: {
				...resetComponent(token),
				[menuCls]: {
					padding: dropdownEdgeChildPadding,
					listStyleType: "none",
					backgroundColor: colorBgElevated,
					backgroundClip: "padding-box",
					borderRadius: token.borderRadiusLG,
					outline: "none",
					boxShadow: token.boxShadowSecondary,
					...genFocusStyle(token),
					"&:empty": {
						padding: 0,
						boxShadow: "none"
					},
					[`${menuCls}-item-group-title`]: {
						padding: `${unit(paddingBlock)} ${unit(controlPaddingHorizontal)}`,
						color: token.colorTextDescription,
						transition: `all ${motionDurationMid}`
					},
					[`${menuCls}-item`]: {
						position: "relative",
						display: "flex",
						alignItems: "center"
					},
					[`${menuCls}-item-icon`]: {
						minWidth: fontSize,
						marginInlineEnd: token.marginXS,
						fontSize: token.fontSizeSM
					},
					[`${menuCls}-title-content`]: {
						flex: "auto",
						"&-with-extra": {
							display: "inline-flex",
							alignItems: "center",
							width: "100%"
						},
						[`> a, > ${menuCls}-item-label > a`]: {
							color: "inherit",
							transition: `all ${motionDurationMid}`,
							"&:hover": { color: "inherit" },
							"&::after": {
								position: "absolute",
								inset: 0,
								content: "\"\""
							}
						},
						[`${menuCls}-item-extra`]: {
							paddingInlineStart: token.padding,
							marginInlineStart: "auto",
							fontSize: token.fontSizeSM,
							color: token.colorTextDescription
						}
					},
					[`${menuCls}-item, ${menuCls}-submenu-title`]: {
						display: "flex",
						margin: 0,
						padding: `${unit(paddingBlock)} ${unit(controlPaddingHorizontal)}`,
						color: token.colorText,
						fontWeight: "normal",
						fontSize,
						lineHeight: token.lineHeight,
						cursor: "pointer",
						transition: `all ${motionDurationMid}`,
						borderRadius: token.borderRadiusSM,
						"&:hover, &-active": { backgroundColor: token.controlItemBgHover },
						...genFocusStyle(token),
						"&-selected": {
							color: token.colorPrimary,
							backgroundColor: token.controlItemBgActive,
							"&:hover, &-active": { backgroundColor: token.controlItemBgActiveHover }
						},
						"&-disabled": {
							color: colorTextDisabled,
							cursor: "not-allowed",
							"&:hover": {
								color: colorTextDisabled,
								backgroundColor: colorBgElevated,
								cursor: "not-allowed"
							},
							a: { pointerEvents: "none" }
						},
						"&-divider": {
							height: 1,
							margin: `${unit(token.marginXXS)} 0`,
							overflow: "hidden",
							lineHeight: 0,
							backgroundColor: token.colorSplit
						},
						[`${componentCls}-menu-submenu-expand-icon`]: {
							position: "absolute",
							insetInlineEnd: token.paddingXS,
							[`${componentCls}-menu-submenu-arrow-icon`]: {
								marginInlineEnd: "0 !important",
								color: token.colorIcon,
								fontSize: fontSizeIcon,
								fontStyle: "normal"
							}
						}
					},
					[`${menuCls}-item-group-list`]: {
						margin: `0 ${unit(token.marginXS)}`,
						padding: 0,
						listStyle: "none"
					},
					[`${menuCls}-submenu-title`]: { paddingInlineEnd: token.calc(controlPaddingHorizontal).add(token.fontSizeSM).equal() },
					[`${menuCls}-submenu-vertical`]: { position: "relative" },
					[`${menuCls}-submenu${menuCls}-submenu-disabled ${componentCls}-menu-submenu-title`]: { [`&, ${componentCls}-menu-submenu-arrow-icon`]: {
						color: colorTextDisabled,
						backgroundColor: colorBgElevated,
						cursor: "not-allowed"
					} },
					[`${menuCls}-submenu-selected ${componentCls}-menu-submenu-title`]: { color: token.colorPrimary }
				}
			}
		},
		[
			initSlideMotion(token, "slide-up"),
			initSlideMotion(token, "slide-down"),
			initMoveMotion(token, "move-up"),
			initMoveMotion(token, "move-down"),
			initZoomMotion(token, "zoom-big")
		]
	];
};
const prepareComponentToken = (token) => ({
	zIndexPopup: token.zIndexPopupBase + 50,
	paddingBlock: (token.controlHeight - token.fontSize * token.lineHeight) / 2,
	...getArrowOffsetToken({
		contentRadius: token.borderRadiusLG,
		limitVerticalRadius: true
	}),
	...getArrowToken(token)
});
var style_default = genStyleHooks("Dropdown", (token) => {
	const { marginXXS, sizePopupArrow, paddingXXS, componentCls } = token;
	const dropdownToken = mergeToken(token, {
		menuCls: `${componentCls}-menu`,
		dropdownArrowDistance: token.calc(sizePopupArrow).div(2).add(marginXXS).equal(),
		dropdownEdgeChildPadding: paddingXXS
	});
	return [genBaseStyle(dropdownToken), status_default(dropdownToken)];
}, prepareComponentToken, { resetStyle: false });

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