import type { JSX, ValidComponent } from "@solidjs/web";
import { dynamic } from "@solidjs/web";
import { omit, untrack } from "solid-js";
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";
import { useMeterRootContext } from "../meter-root-context.ts";
import type { MeterRootState } from "../root/meter-root.tsx";

export interface MeterLabelState extends MeterRootState {}

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

/**
 * An accessible label for the meter. Renders a `<span>` (or `as` override).
 * On mount registers its id with the root so `aria-labelledby` wires up.
 */
export function MeterLabel(props: MeterLabelProps): JSX.Element {
	const context = useMeterRootContext();

	const idOverride = untrack(() =>
		typeof props.id === "string" ? props.id : undefined,
	);
	const id = useRegisteredLabelId(idOverride, context.setLabelId);

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

	const internalSlot = {
		id,
		role: "presentation" as const,
	};

	let merged = mergeRootProps(internalSlot, userClassStyle);
	merged = mergeRootProps(merged, userProps);

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