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

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

export function ModelField({
  label,
  hint,
  right,
  value,
  fieldClassName,
  inputClassName,
  onValueChange,
  required,
  compact,
  showPreview = false,
  allowUpload = true,
  uploadDefaultStrategy = 'base64',
  uploadSource = 'element-editor:product-3d-model',
  ...props
}: ModelFieldProps) {
  return (
    <Field
      label={label}
      hint={hint}
      right={right as any}
      required={Boolean(required)}
      className={fieldClassName}
      compact={compact}
    >
      <MediaInput
        {...props}
        mode="model"
        required={required}
        aria-required={required ? true : undefined}
        compact={compact}
        value={value ?? ''}
        className={inputClassName}
        showPreview={showPreview}
        allowUpload={allowUpload}
        uploadDefaultStrategy={uploadDefaultStrategy}
        uploadSource={uploadSource}
        onInput={(event: any) => onValueChange?.(String(event?.currentTarget?.value ?? ''))}
        onChange={(event: any) => onValueChange?.(String(event?.currentTarget?.value ?? ''))}
      />
    </Field>
  );
}
