import { type ComponentChildren, h } from '@uppy/core/utils/preact'
import type { MetaField } from '../../Dashboard.js'

interface RenderMetaFieldsProps {
  computedMetaFields: MetaField[]
  requiredMetaFields: string[]
  updateMeta: (newVal: string, fieldId: string) => void
  form: HTMLFormElement
  formState: Record<string, string>
}

export default function RenderMetaFields(
  props: RenderMetaFieldsProps,
): ComponentChildren {
  const {
    computedMetaFields,
    requiredMetaFields,
    updateMeta,
    form,
    formState,
  } = props

  const fieldCSSClasses = {
    text: 'uppy-u-reset uppy-c-textInput uppy-Dashboard-FileCard-input',
  }

  return computedMetaFields.map((field) => {
    const id = `uppy-Dashboard-FileCard-input-${field.id}`
    const required = requiredMetaFields.includes(field.id)
    return (
      <fieldset key={field.id} className="uppy-Dashboard-FileCard-fieldset">
        <label className="uppy-Dashboard-FileCard-label" htmlFor={id}>
          {field.name}
        </label>
        {field.render !== undefined ? (
          field.render(
            {
              value: formState[field.id],
              onChange: (newVal) => updateMeta(newVal, field.id),
              fieldCSSClasses,
              required,
              form: form.id,
            },
            h,
          )
        ) : (
          <input
            className={fieldCSSClasses.text}
            id={id}
            form={form.id}
            type={field.type || 'text'}
            required={required}
            value={formState[field.id]}
            placeholder={field.placeholder}
            onInput={(ev) =>
              updateMeta((ev.target as HTMLInputElement).value, field.id)
            }
            data-uppy-super-focusable
          />
        )}
      </fieldset>
    )
  })
}