'use no memo'; // controlled input updates usually invalidate the generated caches

import type { FocusEventHandler, KeyboardEventHandler, Ref } from 'react';

import * as SearchField from '#/components/forms/SearchField';

import { m } from '#/paraglide/messages';

/**
 * search field with a leading magnifying-glass icon, a text input, and a trailing clear button shown when
 * `value` is non-empty and `onClear` is provided.
 */
export function SearchInput({
	autoFocus,
	inputRef,
	label,
	maxLength,
	onChangeText,
	onClear,
	onFocus,
	onKeyDown,
	placeholder,
	value,
}: {
	autoFocus?: boolean;
	inputRef?: Ref<HTMLInputElement>;
	/** Accessible name. */
	label: string;
	maxLength?: number;
	onChangeText: (value: string) => void;
	/** Clears the query. The trailing (×) button is shown only while `value` is non-empty and this is set. */
	onClear?: () => void;
	onFocus?: FocusEventHandler<HTMLInputElement>;
	onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
	placeholder?: string;
	value: string;
}) {
	return (
		<SearchField.Root>
			<SearchField.Icon />
			<SearchField.Input
				aria-label={label}
				autoFocus={autoFocus}
				maxLength={maxLength}
				onChange={(e) => onChangeText(e.currentTarget.value)}
				onFocus={onFocus}
				onKeyDown={onKeyDown}
				placeholder={placeholder}
				ref={inputRef}
				value={value}
			/>
			{onClear && value.length > 0 && (
				<SearchField.Clear label={m['common.search.action.clear']()} onClick={onClear} />
			)}
		</SearchField.Root>
	);
}