import React, { FormEvent } from 'react'

import { SupplierFormProps } from './SupplierForm.types'

import './SupplierForm.css'

import { useForm } from '../../hooks'

import { Button, Field, Grid } from '../../components'

const SupplierForm = ({ onFormSubmit }: SupplierFormProps) => {
  const [form, setForm] = useForm({ active: true })

  const handleSubmit = async (event: FormEvent) => {
    event.preventDefault()

    return onFormSubmit()
  }

  return (
    <form onSubmit={handleSubmit}>
      <Grid columns={4}>
        <Field
          label='Company Name'
          value={form.company_name}
          type='text'
          onChange={(data: string) => setForm({ company_name: data })}
        />
        <Field
          label='Contact First Name'
          value={form.contact_first_name}
          type='text'
          onChange={(data: string) => setForm({ contact_first_name: data })}
        />
        <Field
          label='Contact Last Name'
          value={form.contact_last_name}
          type='text'
          onChange={(data: string) => setForm({ contact_last_name: data })}
        />
        <Field
          label='Notes'
          value={form.notes}
          type='text'
          onChange={(data: string) => setForm({ notes: data })}
          className='col-span-full'
        />
        <Field
          label='Email'
          value={form.email}
          type='text'
          onChange={(data: string) => setForm({ email: data })}
        />
        <Field
          label='Phone'
          value={form.phone}
          type='text'
          onChange={(data: string) => setForm({ phone: data })}
        />
        <Field
          label='Fax'
          value={form.fax}
          type='text'
          onChange={(data: string) => setForm({ fax: data })}
        />
        <Field
          label='URL'
          value={form.url}
          type='text'
          onChange={(data: string) => setForm({ url: data })}
        />
        <Field
          label='Address 1'
          value={form.address_1}
          type='text'
          onChange={(data: string) => setForm({ address_1: data })}
        />
        <Field
          label='Address 2'
          value={form.address_2}
          type='text'
          onChange={(data: string) => setForm({ address_2: data })}
        />
        <Field
          label='City'
          value={form.city}
          type='text'
          onChange={(data: string) => setForm({ city: data })}
        />
        <Field
          label='County'
          value={form.county}
          type='text'
          onChange={(data: string) => setForm({ county: data })}
        />
        <Field
          label='Country'
          value={form.country}
          type='text'
          onChange={(data: string) => setForm({ country: data })}
        />
        <Field
          label='Postcode'
          value={form.postcode}
          type='text'
          onChange={(data: string) => setForm({ postcode: data })}
        />
        <Button.Container>
          <Button type='submit' variant='action'>
            Submit
          </Button>
        </Button.Container>
      </Grid>
    </form>
  )
}

export default SupplierForm
