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

export type PreviewCardSide =
	| "top"
	| "bottom"
	| "left"
	| "right"
	| "inline-end"
	| "inline-start";

export type PreviewCardAlign = "start" | "center" | "end";

/**
 * Context shape published by `<PreviewCard.Positioner>` so descendants
 * (`Popup`, `Arrow`) can read the resolved placement / arrow ref / arrow
 * styles. Mirrors `PreviewCardPositionerContext` from the React source
 * with the Solid convention that reactive fields are `Accessor<T>`.
 */
export interface PreviewCardPositionerContextValue {
	/** The resolved side (post-flip / post-shift). */
	side: Accessor<PreviewCardSide>;
	/** The resolved alignment (post-flip / post-shift). */
	align: Accessor<PreviewCardAlign>;
	/** Whether the arrow has been pushed outside the centered axis. */
	arrowUncentered: Accessor<boolean>;
	/** Inline styles to apply to the arrow element (`left`/`top`/etc.). */
	arrowStyles: Accessor<Record<string, string | number | undefined>>;
	/** Mutable ref for the arrow element — consumed by the `arrow` middleware. */
	arrowRef: MutableRef<HTMLDivElement | null>;
	/** Whether the anchor element is outside the viewport (after `hide`). */
	anchorHidden: Accessor<boolean>;
}

export const PreviewCardPositionerContext =
	createContext<PreviewCardPositionerContextValue | null>(null);

export function usePreviewCardPositionerContext(): PreviewCardPositionerContextValue {
	const context = useContext(PreviewCardPositionerContext);
	if (context === null) {
		throw new Error(
			"Base UI: PreviewCardPositionerContext is missing. <PreviewCard.Popup> and <PreviewCard.Arrow> must be placed within <PreviewCard.Positioner>.",
		);
	}
	return context;
}