import type { JSX, ValidComponent } from "@solidjs/web";
import { dynamic } from "@solidjs/web";
import { omit, untrack } from "solid-js";
import { useFieldsetContext } from "../../internals/fieldset-context.ts";
import { mergeRootProps } from "../../internals/merge-root-props";
import { resolveClassStyle } from "../../internals/resolve-class-style";
import type { BaseUIComponentProps } from "../../internals/types";
import { useRegisteredLabelId } from "../../internals/use-registered-label-id";

export interface FieldsetLegendState {
	/** Mirrors the root's `disabled` flag. */
	disabled: boolean;
}

export interface FieldsetLegendProps
	extends BaseUIComponentProps<"legend", FieldsetLegendState> {
	/** Tag/component to render. Defaults to `"legend"`. */
	as?: ValidComponent;
}

/**
 * An accessible label that is automatically associated with the fieldset.
 * Renders a `<legend>` element (or `as` override).
 *
 * On mount, registers its id with the root so `aria-labelledby` wires up.
 * On unmount, clears the registration. The root's `legendId` signal opts into
 * `ownedWrite` so the write from `useRegisteredLabelId`'s owned setup/cleanup
 * doesn't trip the Solid 2 write-in-owned-scope check.
 */
export function FieldsetLegend(props: FieldsetLegendProps): JSX.Element {
	const context = useFieldsetContext();

	// `untrack` silences the dev-mode STRICT_READ_UNTRACKED warning (RFC 08)
	// that fires on any top-level reactive prop read. The id is only consumed
	// once during setup by `useBaseUiId`.
	const idOverride = untrack(() =>
		typeof props.id === "string" ? props.id : undefined,
	);
	// When rendered outside a real `<Fieldset.Root>` (the NOOP context),
	// `setLegendId` is absent — fall back to a no-op so the legend still
	// generates a stable id locally without blowing up.
	const setLegendId = context.setLegendId ?? ((_id: string | undefined) => {});
	const id = useRegisteredLabelId(idOverride, setLegendId);

	// Strip the consumer's `id` so the authoritative `id` we emit below wins.
	const userStyling = resolveClassStyle(props, () => ({
		disabled: context.disabled(),
	}));

	const userHtmlProps = omit(
		props,
		"class",
		"style",
		"attrs",
		"as",
		"id",
	) as Record<string, unknown>;

	const internalProps = {
		id,
		get "data-disabled"(): "" | undefined {
			return context.disabled() ? "" : undefined;
		},
	};
	const styledUserProps = mergeRootProps(userStyling, userHtmlProps);

	const merged = mergeRootProps(internalProps, styledUserProps);

	const Tag = dynamic(() => props.as ?? "legend");
	return <Tag {...merged} />;
}