import type { JSX, ValidComponent } from "@solidjs/web";
import { dynamic, isServer } from "@solidjs/web";
import { omit, onCleanup, untrack } from "solid-js";
import {
	useCspDisableStyleElements,
	useCspNonce,
} from "../../csp-provider/csp-context.ts";
import { composeRefs, userRef } from "../../internals/compose-refs";
import { mergeRootProps } from "../../internals/merge-root-props";
import { resolveClassStyle } from "../../internals/resolve-class-style";
import { registerDisableScrollbarStyle } from "../../internals/scroll-area-utils/register-disable-scrollbar-style.ts";
import type { BaseUIComponentProps } from "../../internals/types";
import {
	createScrollArea,
	type OverflowEdgeThresholdInput,
} from "./create-scroll-area.tsx";
import type {
	Coords,
	HiddenState,
	OverflowEdges,
	OverflowEdgeThreshold,
	ScrollAreaRootState,
	Size,
} from "./scroll-area-root-context.ts";
import { ScrollAreaRootContext } from "./scroll-area-root-context.ts";

export type {
	Coords,
	HiddenState,
	OverflowEdges,
	OverflowEdgeThreshold,
	ScrollAreaRootState,
	Size,
};

export interface ScrollAreaRootProps
	extends BaseUIComponentProps<"div", ScrollAreaRootState> {
	/** Tag/component to render. Defaults to `"div"`. */
	as?: ValidComponent;
	/**
	 * Threshold in pixels that must be exceeded before the overflow-edge
	 * attributes are applied. Accepts a number (applied to all four edges)
	 * or a partial per-edge object.
	 * @default 0
	 */
	overflowEdgeThreshold?: OverflowEdgeThresholdInput;
}

/**
 * Groups all parts of the scroll area. Renders a `<div>` element.
 *
 * Thin structural adapter over {@link createScrollArea} — the root's reactive
 * state, element refs, derived state, and shared pointer/scroll handlers all
 * live in the primitive (which IS the value published to descendants via the
 * root context). This wrapper maps props → options, registers the shared
 * disable-scrollbar `<style>` against the owning document (ref-counted, CSP
 * nonce-carrying), and renders the presentation `<div>` with the api's
 * `root()` slot.
 */
export function ScrollAreaRoot(props: ScrollAreaRootProps): JSX.Element {
	const nonce = useCspNonce();
	const disableStyleElements = useCspDisableStyleElements();

	const c = createScrollArea({
		overflowEdgeThreshold: () => props.overflowEdgeThreshold,
	});

	// Register the shared disable-scrollbar stylesheet against the owning
	// document. Ref-counted — the first root in the document injects the
	// `<style>`, subsequent roots share it, and the last unmount removes it.
	// `disableStyleElements` opts out entirely. `disableStyleElements()` /
	// `nonce()` are read once at setup; `untrack` keeps those snapshot reads
	// out of the component-body strict-read shell. Skipped on the server —
	// the registration touches `document` directly (it runs in the component
	// body, not an effect), and the disable-scrollbar style is purely a
	// client-side scrollbar-suppression concern with nothing to serialize.
	untrack(() => {
		if (!isServer && !disableStyleElements()) {
			const dispose = registerDisableScrollbarStyle(c.rootRef.current, nonce());
			onCleanup(dispose);
		}
	});

	const userStyling = resolveClassStyle(props, () => c.viewportState());
	const userProps = omit(
		props,
		"class",
		"style",
		"attrs",
		"as",
		"children",
		"overflowEdgeThreshold",
	);
	const styledUserProps = mergeRootProps(userStyling, userProps);

	// Bind the slot bag to a `const` before the JSX spread — hydration-critical.
	// Spreading an inline call (`{...c.root(...)}`) makes the Solid SSR compiler
	// wrap it in a lazy thunk whose server-side resolution diverges from the
	// client's, dropping attributes from the SSR markup and shifting hydration
	// keys. A pre-bound variable spread is passed straight through. See
	// `collapsible-root.tsx` for the full explanation.
	const rootProps = c.root(styledUserProps);

	const Tag = dynamic(() => props.as ?? "div");
	return (
		<Tag {...rootProps} ref={composeRefs(c.bindRoot, userRef(props))}>
			<ScrollAreaRootContext value={c}>{props.children}</ScrollAreaRootContext>
		</Tag>
	);
}