import type { JSX } from "@solidjs/web";

import { VISUALLY_HIDDEN_STYLE } from "../visually-hidden-style";

/**
 * Props accepted by `<HiddenInput>`. Structurally equivalent to Solid's
 * built-in `JSX.InputHTMLAttributes<HTMLInputElement>` (the "all native
 * input attrs" bucket), minus `style` — we own the visually-hidden style
 * block and consumers shouldn't stomp it.
 */
export interface HiddenInputProps
	extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "style"> {
	/**
	 * Optional style extensions merged ON TOP of `VISUALLY_HIDDEN_STYLE`.
	 * Intended for niche cases (e.g. an inner `padding: '1px'` hack for
	 * Safari iframe autofill); in practice you'll rarely need this.
	 */
	style?: JSX.CSSProperties | undefined;
}

/**
 * A visually-hidden `<input>` used by checkbox / switch / radio / etc. to
 * make them participate in native form submission while the visible element
 * is a `<button>` or `<div role=...>`.
 *
 * Contract:
 *
 * - ALL native input props pass through as-is. That includes `ref` — Solid
 *   natively composes ref arrays (`ref={[a, b]}`), so consumers can chain
 *   their own refs without help from this component.
 * - The component does NOT own the controlled/uncontrolled story. Pass
 *   `checked` or `defaultChecked` as the consumer sees fit. See solidify.md §6
 *   for consumer-owned signal patterns.
 * - `style` is merged on top of `VISUALLY_HIDDEN_STYLE`. Callers who want
 *   to replace the visually-hidden style (e.g. for a clickable-area hack)
 *   should pass the desired keys as an override — they win over ours by
 *   the standard right-most-spread rule.
 * - `type` defaults to `"checkbox"` because that's the by-far common
 *   case; pass `type="radio"` (or any other native `type`) when you need
 *   something else.
 *
 * Solid 2 notes:
 *
 * - This is a function component that returns a single `<input>`; there's
 *   no wrapper. `props.style` is merged into a new object inside JSX so the
 *   shallow spread stays reactive via `mergePropsN`-free fast path.
 * - `aria-hidden` is NOT forced here — `aria-hidden` on a focusable input
 *   is an accessibility landmine, but some consumers still want it (e.g.
 *   when the surrounding widget already owns the role). Callers decide.
 */
export function HiddenInput(props: HiddenInputProps): JSX.Element {
	// Local tracking ensures every reactive read stays live. Top-level
	// `const type = props.type` would warn under STRICT_READ_UNTRACKED —
	// we deliberately read inside JSX instead.
	// Set `type` BEFORE the spread so that `value`, `checked` and friends
	// coming out of `...props` are applied to an input whose `type` is
	// already the final one. Switching `<input type>` after setting `value`
	// mangles the property on some engines (an input's stored `value` is
	// interpreted against its current `type`). Then hand-override `style`
	// at the very end so the visually-hidden keys always win over any
	// `props.style` the consumer forwarded.
	//
	// `VISUALLY_HIDDEN_STYLE` is frozen at module scope. Solid 2's style
	// binding mutates its in-memory `prev` object (`delete prev[key]` when
	// re-reconciling), which throws on a frozen source. We ALWAYS hand a
	// fresh plain object to the `style` prop — never the frozen constant
	// directly — so the binding can mutate freely.
	const mergedStyle = (): JSX.CSSProperties => ({
		...VISUALLY_HIDDEN_STYLE,
		...(props.style ?? {}),
	});
	return (
		<input type={props.type ?? "checkbox"} {...props} style={mergedStyle()} />
	);
}