import type { JSX, ValidComponent } from "@solidjs/web";
import { dynamic } from "@solidjs/web";
import { createRenderEffect, omit } 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 { useSelectGroupContext } from "../group/select-group-context";

// biome-ignore lint/complexity/noBannedTypes: public empty-state for consumer type references.
export type SelectGroupLabelState = {};

export interface SelectGroupLabelProps
	extends BaseUIComponentProps<"div", SelectGroupLabelState> {
	as?: ValidComponent;
}

const EMPTY_STATE: SelectGroupLabelState = {};

/**
 * `<Select.GroupLabel>` — a label for the enclosing `<Select.Group>`.
 */
export function SelectGroupLabel(props: SelectGroupLabelProps): JSX.Element {
	const group = useSelectGroupContext();

	// P5: props.id is `string | false | undefined`.
	const id = useBaseUiId(typeof props.id === "string" ? props.id : undefined);

	createRenderEffect(
		() => id,
		(current) => {
			group.setLabelId(current);
		},
	);

	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))} />;
}