import React from 'react'
import { Fields } from '../fields/Fields.jsx'
import { useFormContext } from './FormContext.jsx'
import { FormStatus } from './FormStatus.js'

const BLOCKING_STATUSES = new Set([
  FormStatus.Submitting,
  FormStatus.Loading,
  FormStatus.Disabled,
])

const fieldsetResetStyle = {
  border: 'none',
  margin: 0,
  padding: 0,
  minWidth: 0,
}

/**
 * Renders form fields from {@link FormContext}. Resolves controls via
 * {@link Fields} and ADR 0006 input component ids. Wraps inputs in a disabled
 * fieldset when the form status includes Submitting, Loading, or Disabled.
 */
export function FieldFactory () {
  const { fields, data, onChange, status } = useFormContext()
  const disabled = status.some(s => BLOCKING_STATUSES.has(s))

  return (
    <fieldset disabled={disabled} style={fieldsetResetStyle}>
      <Fields fields={fields} data={data} onChange={onChange} />
    </fieldset>
  )
}