import type { ComponentChildren } from 'preact';
import { Field } from '../core/Field';
import { MediaInput, type MediaInputProps } from '../core/MediaInput';

export type ImageFieldProps = Omit<MediaInputProps, 'mode' | 'value' | 'onInput' | 'onChange'> & {
  label?: string;
  hint?: string;
  right?: ComponentChildren;
  value?: string;
  fieldClassName?: string;
  inputClassName?: string;
  required?: boolean;
  onValueChange?: (value: string) => void;
};

export function ImageField({
  label,
  hint,
  right,
  value,
  fieldClassName,
  inputClassName,
  onValueChange,
  required,
  compact,
  ...props
}: ImageFieldProps) {
  return (
    <Field
      label={label}
      hint={hint}
      right={right as any}
      required={Boolean(required)}
      className={fieldClassName}
      compact={compact}
    >
      <MediaInput
        mode="image"
        {...props}
        required={required}
        aria-required={required ? true : undefined}
        compact={compact}
        value={value ?? ''}
        className={inputClassName}
        onInput={(event: any) => onValueChange?.(String(event?.currentTarget?.value ?? ''))}
        onChange={(event: any) => onValueChange?.(String(event?.currentTarget?.value ?? ''))}
      />
    </Field>
  );
}
