import type { JSX } from "@solidjs/web";
/**
 * Context exposed by `<Menu.Positioner>` to `<Menu.Popup>` / `<Menu.Arrow>`.
 * Mirrors `packages/react/src/menu/positioner/MenuPositionerContext.ts`.
 */
import { type Accessor, createContext, useContext } from "solid-js";
import type { MutableRef } from "../../internals/floating-ui/types";

export type MenuSide =
	| "top"
	| "right"
	| "bottom"
	| "left"
	| "inline-start"
	| "inline-end"
	| "none";
export type MenuAlign = "start" | "center" | "end";

export interface MenuPositionerContextValue {
	side: Accessor<MenuSide>;
	align: Accessor<MenuAlign>;
	anchorHidden: Accessor<boolean>;
	arrowRef: MutableRef<HTMLElement | null>;
	arrowStyles: Accessor<JSX.CSSProperties>;
	arrowUncentered: Accessor<boolean>;
	/** Floating-tree node id assigned to this positioner. */
	nodeId: Accessor<string | undefined>;
}

export const MenuPositionerContext =
	createContext<MenuPositionerContextValue | null>(null);

export function useMenuPositionerContext(): MenuPositionerContextValue;
export function useMenuPositionerContext(
	optional: true,
): MenuPositionerContextValue | null;
export function useMenuPositionerContext(
	optional?: boolean,
): MenuPositionerContextValue | null {
	const ctx = useContext(MenuPositionerContext);
	if (ctx == null && !optional) {
		throw new Error(
			"Base UI: MenuPositionerContext is missing. Positioner children must be placed within <Menu.Positioner>.",
		);
	}
	return ctx;
}