import type { JSX } from "@solidjs/web";
/**
 * `<Menu.SubmenuRoot>` — marker that switches nested `<Menu.Root>` into
 * submenu mode. Mirrors React's `MenuSubmenuRoot`.
 *
 * Renders no DOM element — pure context wrapper. Nested `<Menu.Root>`
 * reads `useMenuSubmenuRootContext()` + the parent's `MenuRootContext`
 * to decide it's a submenu.
 */

import { MenuRoot, type MenuRootProps } from "../root/menu-root";
import { useMenuRootContext } from "../root/menu-root-context";
import {
	MenuSubmenuRootContext,
	type MenuSubmenuRootContextValue,
} from "./menu-submenu-root-context";

export interface MenuSubmenuRootProps<Payload = unknown>
	extends Omit<MenuRootProps<Payload>, "modal"> {
	/**
	 * Whether pressing Escape closes the entire menu tree. Otherwise only
	 * the current submenu closes. @default false
	 */
	closeParentOnEsc?: boolean | undefined;
}

export function MenuSubmenuRoot<Payload = unknown>(
	props: MenuSubmenuRootProps<Payload>,
): JSX.Element {
	const parentMenu = useMenuRootContext();
	const contextValue: MenuSubmenuRootContextValue = { parentMenu };
	return (
		<MenuSubmenuRootContext value={contextValue}>
			<MenuRoot {...props} />
		</MenuSubmenuRootContext>
	);
}

export { useMenuSubmenuRootContext } from "./menu-submenu-root-context";