import type { Accessor } from "solid-js";

/**
 * Minimum shape required by {@link fieldStateAttrs}. Compounds typically
 * pass `state` from `createMemo` that already spreads `field.state()`; only
 * these five fields are read.
 */
export interface FieldStateAttrSource {
	/** `true` = valid, `false` = invalid, `null`/`undefined` = unknown. */
	valid: boolean | null | undefined;
	touched: boolean;
	dirty: boolean;
	filled: boolean;
	focused: boolean;
}

/**
 * Standard field-state `data-*` attribute getter-bag. Each property is a
 * live getter reading through the source accessor — safe to spread into
 * `mergeRootProps` without losing reactivity.
 */
export interface FieldStateAttrs {
	readonly "data-valid": "" | undefined;
	readonly "data-invalid": "" | undefined;
	readonly "data-touched": "" | undefined;
	readonly "data-dirty": "" | undefined;
	readonly "data-filled": "" | undefined;
	readonly "data-focused": "" | undefined;
}

/**
 * Project a field-state accessor into the canonical `data-*` getter bag.
 * Used by checkbox/radio/switch/etc. wrappers to attach the standard
 * field-validity attrs without hand-writing six getters per compound.
 *
 * The source needn't be a plain `Accessor<FieldStateAttrSource>` — any
 * memo whose return value is shape-compatible works. Output composes with
 * `mergeRootProps` because every key is a getter, so spread destructuring
 * is the only thing that breaks reactivity (same caveat as every slot
 * factory in this codebase — see solidify.md §1 wave-1 papercut #1).
 */
export function fieldStateAttrs(
	state: Accessor<FieldStateAttrSource>,
): FieldStateAttrs {
	return {
		get "data-valid"(): "" | undefined {
			return state().valid === true ? "" : undefined;
		},
		get "data-invalid"(): "" | undefined {
			return state().valid === false ? "" : undefined;
		},
		get "data-touched"(): "" | undefined {
			return state().touched ? "" : undefined;
		},
		get "data-dirty"(): "" | undefined {
			return state().dirty ? "" : undefined;
		},
		get "data-filled"(): "" | undefined {
			return state().filled ? "" : undefined;
		},
		get "data-focused"(): "" | undefined {
			return state().focused ? "" : undefined;
		},
	};
}