import type { JSX, ValidComponent } from "@solidjs/web";
import { dynamic } from "@solidjs/web";
import { omit, untrack } from "solid-js";
import {
	type FieldRootState,
	useFieldRootContext,
} from "../../internals/field-context.ts";
import { fieldStateAttrs } from "../../internals/field-state-attrs.ts";
import { useLabel } from "../../internals/labelable-provider/use-label.ts";
import { mergeRootProps } from "../../internals/merge-root-props";
import { resolveClassStyle } from "../../internals/resolve-class-style";
import type { BaseUIComponentProps } from "../../internals/types";

export interface FieldLabelState extends FieldRootState {}

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

/**
 * An accessible label automatically associated with the field control.
 * Renders a `<label>` element (or `as` override).
 */
export function FieldLabel(props: FieldLabelProps): JSX.Element {
	const field = useFieldRootContext();

	const label = useLabel({
		id: untrack(() => (typeof props.id === "string" ? props.id : 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: label.id,
		get for() {
			const controlId = label.controlId();
			if (typeof controlId === "string") return controlId;
			return "";
		},
		get "data-disabled"(): "" | undefined {
			return field.state().disabled ? "" : undefined;
		},
	});

	const styledUserProps = mergeRootProps(userStyling, userHtmlProps);

	const merged = mergeRootProps(internalProps, styledUserProps);

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