import React from 'react'
import { Form as FinalForm } from 'react-final-form'
import '../tailwind.css'

export interface FormProps {
  /* Callback when form is submitted */
  onSubmit(values: any): Promise<void> | void
  /*  Message explaining how to resolve the error */
  error?: string
  /* Validate object */
  validate?: any
  /* Inner content of the application */
  children: React.ReactNode
}

export const Form = ({ children, onSubmit, error, validate }: FormProps) => {
  return (
    <>
      {error && (
        // TODO use Alert component
        <div className="mb-8 rounded-lg border border-negative-border bg-negative-soft-background p-4">
          <div className="flex">
            <div className="ml-3">
              <p className="text-sm font-semibold text-negative-text">
                {error}
              </p>
            </div>
          </div>
        </div>
      )}
      <FinalForm
        onSubmit={onSubmit}
        validate={validate}
        render={(props) => (
          <form className="w-full" onSubmit={props.handleSubmit}>
            {children}
          </form>
        )}
      />
    </>
  )
}
