import type { JSX, ValidComponent } from "@solidjs/web";
import { dynamic } from "@solidjs/web";
import { omit, onCleanup, untrack } from "solid-js";
import { useBaseUiId } from "../../internals/base-ui-id";
import {
	type FieldRootState,
	useFieldRootContext,
} from "../../internals/field-context.ts";
import { fieldStateAttrs } from "../../internals/field-state-attrs.ts";
import { mergeRootProps } from "../../internals/merge-root-props";
import { resolveClassStyle } from "../../internals/resolve-class-style";
import type { BaseUIComponentProps } from "../../internals/types";
import { useFieldMessagesContext } from "../field-messages-context.ts";

export interface FieldDescriptionState extends FieldRootState {}

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

/**
 * A paragraph with additional information about the field. Renders a `<p>`
 * element (or `as` override).
 */
export function FieldDescription(props: FieldDescriptionProps): JSX.Element {
	const field = useFieldRootContext();
	const messages = useFieldMessagesContext();

	const id = useBaseUiId(
		untrack(() => (typeof props.id === "string" ? props.id : undefined)),
	);

	const source = Symbol("field-description");
	messages.registerMessageId(source, id);
	onCleanup(() => {
		messages.registerMessageId(source, undefined);
	});

	const userStyling = resolveClassStyle(props, () => field.state());

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

	const internalProps = mergeRootProps(fieldStateAttrs(field.state), {
		id,
		get "data-disabled"(): "" | undefined {
			return field.state().disabled ? "" : undefined;
		},
	});

	const styledUserProps = mergeRootProps(userStyling, userHtmlProps);

	const merged = mergeRootProps(internalProps, styledUserProps);

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