import type { JSX, ValidComponent } from "@solidjs/web";
import { dynamic } from "@solidjs/web";
import { omit } from "solid-js";
import { mergeRootProps } from "../../internals/merge-root-props";
import { resolveClassStyle } from "../../internals/resolve-class-style";
import type { BaseUIComponentProps } from "../../internals/types";
import { useMeterRootContext } from "../meter-root-context.ts";
import type { MeterRootState } from "../root/meter-root.tsx";

export interface MeterValueState extends MeterRootState {}

export type MeterValueChildren =
	| JSX.Element
	| ((formattedValue: string, value: number) => JSX.Element);

export interface MeterValueProps
	extends Omit<BaseUIComponentProps<"span", MeterValueState>, "children"> {
	/** Tag/component to render. Defaults to `"span"`. */
	as?: ValidComponent;
	children?: MeterValueChildren | undefined;
}

/**
 * A text element displaying the current value. Renders a `<span>` (or `as`
 * override).
 *
 * §1 wave 2: replaces `renderElement` with a `dynamic()` element. Function-children
 * are resolved via a reactive getter on the internal slot bag.
 */
export function MeterValue(props: MeterValueProps): JSX.Element {
	const context = useMeterRootContext();

	const content = (): JSX.Element => {
		const value = context.value();
		const formattedValue = context.formattedValue();
		const child = props.children;
		if (typeof child === "function") {
			return child(formattedValue, value);
		}
		if (child !== undefined) return child;
		return formattedValue || value;
	};

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

	const internalSlot = {
		"aria-hidden": "true" as const,
		get children(): JSX.Element {
			return content();
		},
	};

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

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