import type { JSX } from "@solidjs/web";
import { type Accessor, createContext, useContext } from "solid-js";
import type { MutableRef } from "../../internals/floating-ui/types";

export type ComboboxSide = "top" | "right" | "bottom" | "left";
export type ComboboxAlign = "start" | "center" | "end";

export interface ComboboxPositionerContextValue {
	side: Accessor<ComboboxSide>;
	align: Accessor<ComboboxAlign>;
	anchorHidden: Accessor<boolean>;
	arrowRef: MutableRef<HTMLElement | null>;
	arrowStyles: Accessor<JSX.CSSProperties>;
	arrowUncentered: Accessor<boolean>;
}

export const ComboboxPositionerContext =
	createContext<ComboboxPositionerContextValue | null>(null);

export function useComboboxPositionerContext(): ComboboxPositionerContextValue;
export function useComboboxPositionerContext(
	optional: true,
): ComboboxPositionerContextValue | null;
export function useComboboxPositionerContext(
	optional?: boolean,
): ComboboxPositionerContextValue | null {
	const ctx = useContext(ComboboxPositionerContext);
	if (ctx == null && !optional) {
		throw new Error(
			"Base UI: ComboboxPositionerContext is missing. Combobox parts must be placed within <Combobox.Positioner>.",
		);
	}
	return ctx;
}