import type { ComponentChildren } from 'preact';
import { Field } from '../core/Field';
import { Input, type InputProps } from '../core/Input';

export type TextFieldProps = Omit<InputProps, 'value' | 'onInput'> & {
  label?: string;
  hint?: string;
  right?: ComponentChildren;
  value?: string | number;
  fieldClassName?: string;
  inputClassName?: string;
  onValueChange?: (value: string) => void;
};

export function TextField({
  label,
  hint,
  right,
  fieldClassName,
  inputClassName,
  onValueChange,
  required,
  compact,
  'aria-label': ariaLabel,
  ...props
}: TextFieldProps) {
  return (
    <Field
      label={label}
      hint={hint}
      right={right as any}
      required={Boolean(required)}
      className={fieldClassName}
      compact={compact}
    >
      <Input
        {...props}
        aria-label={ariaLabel ?? label}
        required={required}
        aria-required={required ? true : undefined}
        compact={compact}
        className={inputClassName}
        onInput={(event: any) => onValueChange?.(String(event?.currentTarget?.value ?? ''))}
      />
    </Field>
  );
}
