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

export interface FieldItemState extends FieldRootState {}

export interface FieldItemProps
	extends BaseUIComponentProps<"div", FieldItemState> {
	/** Tag/component to render. Defaults to `"div"`. */
	as?: ValidComponent;
	/**
	 * Whether the wrapped control should ignore user interaction. The
	 * `<Field.Root>`-level `disabled` still takes precedence.
	 * @default false
	 */
	disabled?: boolean | undefined;
}

/**
 * Groups individual items in a checkbox / radio group with a shared label +
 * description scope. Renders a `<div>` element (or `as` override).
 */
export function FieldItem(props: FieldItemProps): JSX.Element {
	const field = useFieldRootContext();

	const disabled = createMemo(
		(): boolean => field.disabled() || (props.disabled ?? false),
	);

	const state = createMemo(
		(): FieldItemState => ({
			...field.state(),
			disabled: disabled(),
		}),
	);

	const itemContextValue: FieldItemContextValue = {
		disabled,
		present: true,
	};

	const userStyling = resolveClassStyle(props, () => state());

	const userHtmlProps = omit(
		props,
		"class",
		"style",
		"attrs",
		"as",
		"disabled",
		"children",
	) as Record<string, unknown>;

	const internalProps = mergeRootProps(fieldStateAttrs(state), {
		get "data-disabled"(): "" | undefined {
			return disabled() ? "" : undefined;
		},
	});

	const styledUserProps = mergeRootProps(userStyling, userHtmlProps);

	const merged = mergeRootProps(internalProps, styledUserProps);

	const Tag = dynamic(() => props.as ?? "div");
	return (
		<Tag {...merged}>
			<LabelableProvider>
				<FieldItemContext value={itemContextValue}>
					{props.children}
				</FieldItemContext>
			</LabelableProvider>
		</Tag>
	);
}