/**
 *
 * @type {React.ForwardRefExoticComponent<React.PropsWithoutRef<*> & React.RefAttributes<unknown>>}
 */
export const FormField = forwardRef((componentProps, ref) => {
  const form = useForm()
  const schema = useSchema()
  const innerRef = useRef()
  const fieldRef = ref || innerRef

  const { name, children, ignoreHidden, ...props } = componentProps

  const data = useMemo(() => {
    const fieldSchema = getField(schema, name)

    if (fieldSchema?.dynamicOptions instanceof Function) {
      fieldSchema.options = fieldSchema.dynamicOptions(form.value, form)

      if (
        form.value[name] &&
        fieldSchema.options &&
        !fieldSchema.options.hasOwnProperty(form.value[name])
      ) {
        clearError(form, name)

        try {
          form.value[name] = null
        } catch (e) {
          // property can be readonly
        }

        form.onChange(name, null)
      }
    }

    if (fieldSchema?.dateOptions instanceof Function) {
      fieldSchema.dateOptions = fieldSchema.dateOptions({ ...form.value })
    }

    if (!fieldSchema) return { hidden: true }

    const [hint, hintOptions] = getHint(schema, name, form)

    return {
      name,
      label: getLabel(schema, name, form),
      parser: getParser(schema, name),
      getter: getGetter(schema, name),
      hidden:
        fieldSchema.hidden instanceof Function
          ? fieldSchema.hidden({ ...form.value }, form.context)
          : !!fieldSchema.hidden,
      disabled:
        fieldSchema.disabled instanceof Function
          ? fieldSchema.disabled({ ...form.value }, fieldSchema)
          : !!fieldSchema.disabled,
      formatter: getFormatter(schema, name),
      schema: fieldSchema,
      hint,
      hintOptions,
      effects: fieldSchema.effects || undefined,
      error: getError(form, name),
      validation: fieldSchema.validation,
      clearError: clearError(form, name),
      validate: () => validateField(schema, form, name),
      rawValue: form.value && form.value[name],
      type: fieldSchema.type,
    }
  }, [form, schema])

  useEffect(() => {
    const refId = form.addFieldRef(fieldRef, { name })

    return () => {
      form.removeFieldRefById(refId)
    }
  }, [])

  useEffect(() => {
    form.focusToFirstError && handleFirstErrorFieldFocus(form)
  }, [form.errors])

  if (data.hidden && !ignoreHidden) {
    return null
  }

  return (
    <div {...props} data-loc={name} ref={fieldRef}>
      <FormFieldContext.Provider value={data}>
        {children}
      </FormFieldContext.Provider>
    </div>
  )
})