import type { JSX, ValidComponent } from "@solidjs/web";
import { dynamic } from "@solidjs/web";
import { createRenderEffect, omit, onCleanup } from "solid-js";
import { useBaseUiId } from "../../internals/base-ui-id";
import { composeRefs, userRef } from "../../internals/compose-refs";
import { mergeRootProps } from "../../internals/merge-root-props";
import { resolveClassStyle } from "../../internals/resolve-class-style";
import type { BaseUIComponentProps } from "../../internals/types";
import { useComboboxRootContext } from "../root/combobox-root-context";

export type ComboboxLabelState = Record<string, never>;

export interface ComboboxLabelProps
	extends Omit<BaseUIComponentProps<"div", ComboboxLabelState>, "id"> {
	as?: ValidComponent;
}

const EMPTY_STATE: ComboboxLabelState = {};

/**
 * An accessible label that is automatically associated with the combobox
 * trigger via the root's `labelId` registration. Renders a `<div>` element.
 */
export function ComboboxLabel(props: ComboboxLabelProps): JSX.Element {
	const root = useComboboxRootContext();
	const id = useBaseUiId();

	createRenderEffect(
		() => id,
		(next) => {
			root.setLabelId(next);
			return undefined;
		},
	);
	onCleanup(() => root.setLabelId(undefined));

	const internal = { id };

	const userClassStyle = resolveClassStyle(props, () => EMPTY_STATE);
	const userProps = omit(props, "as", "class", "style", "attrs");

	let merged: Record<string, unknown> = mergeRootProps(
		internal,
		userClassStyle,
	);
	merged = mergeRootProps(merged, userProps);

	const Tag = dynamic(() => props.as ?? "div");
	return <Tag {...merged} ref={composeRefs(userRef(props))} />;
}