import React, { FormEvent } from 'react'

import { CustomerFormProps } from './CustomerForm.types'

import { PAYMENT_TERMS } from './CustomerForm.constants'

import './CustomerForm.css'

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

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

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

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

    return onFormSubmit()
  }

  return (
    <form onSubmit={handleSubmit}>
      <Grid columns={4}>
        <Field
          label='Account Number'
          value={form.account_number}
          type='text'
          onChange={(data: string) => setForm({ account_number: data })}
        />
        <Field
          label='Customer / Company Name'
          value={form.name}
          type='text'
          onChange={(data: string) => setForm({ name: data })}
        />
        <Field
          label='Address Line 1'
          value={form.address_1}
          type='text'
          onChange={(data: string) => setForm({ address_1: data })}
        />
        <Field
          label='Address Line 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 })}
        />
        <Field
          label='Contact Name'
          value={form.contact_name}
          type='text'
          onChange={(data: string) => setForm({ contact_name: data })}
        />
        <Field
          label='Phone'
          value={form.phone}
          type='text'
          onChange={(data: string) => setForm({ phone: data })}
        />
        <Field
          label='Email Address'
          value={form.email}
          type='text'
          onChange={(data: string) => setForm({ email: data })}
        />
        <Select
          label='Payment Term'
          value={form.payment_term}
          onChange={(data: number) => setForm({ payment_term: data })}
          options={PAYMENT_TERMS}
        />
        <Button.Container>
          <Button type='submit' variant='action'>
            Submit
          </Button>
        </Button.Container>
      </Grid>
    </form>
  )
}

export default CustomerForm
