import React, { FormEvent, useEffect, useState } from 'react'

import {
  CustomerOptionProps,
  WorkshopJobFormProps
} from './WorkshopJobForm.types'

import { generateCustomerOptions } from './WorkshopJobForm.helpers'

import { PRIORITIES, STATUSES } from './WorkshopJobForm.constants'

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

import { getFirebaseDocs } from '../../firebase/helpers'

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

const WorkshopJobForm = ({ user_id, onFormSubmit }: WorkshopJobFormProps) => {
  const [form, setForm] = useForm({})

  const [customers, setCustomers] = useState<Array<CustomerOptionProps>>([])

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

    return onFormSubmit()
  }

  useEffect(() => {
    const setup = async () => {
      const _customers = generateCustomerOptions(
        await getFirebaseDocs(`users/${user_id}/customers`)
      )

      setCustomers(_customers)
    }

    if (user_id) {
      setup()
    }
  }, [user_id])

  return (
    <form onSubmit={handleSubmit}>
      <Grid columns={1}>
        <Grid columns={3}>
          <Field
            label='Registration Number'
            value={form.registration_number}
            type='text'
            onChange={(data: string) => setForm({ registration_number: data })}
          />
          <Field
            label='Job Description'
            value={form.desc}
            type='text'
            onChange={(data: string) => setForm({ desc: data })}
          />
          <Select
            label='Customer'
            value={form.customer_id}
            onChange={(data: string) => setForm({ customer_id: data })}
            options={customers}
          />
          <Select
            label='Priority'
            value={form.priority}
            onChange={(data: string) => setForm({ priority: data })}
            options={PRIORITIES}
          />
          <Field
            type='text'
            label='Notes'
            value={form.notes}
            onChange={(data: string) => setForm({ notes: data })}
          />
          <Date
            label='Due date'
            value={form.due_date}
            onChange={(data: string) => setForm({ due_date: data })}
          />
          <Field
            label='Odometer Reading'
            value={form.odometer}
            type='number'
            onChange={(data: number) => setForm({ odometer: data })}
          />
          <Field
            label='Work Order Number'
            value={form.work_order_number}
            type='text'
            onChange={(data: string) => setForm({ work_order_number: data })}
          />
          <Field
            label='Reference Number'
            value={form.reference_number}
            type='text'
            onChange={(data: string) => setForm({ reference_number: data })}
          />
          <Select
            label='Status'
            value={form.status}
            onChange={(data: string) => setForm({ status: data })}
            options={STATUSES}
          />
        </Grid>
        <Grid columns={2}>
          <div className={`${form.is_inspection && 'col-span-full'} space-y-4`}>
            <div className='bg-gray-100 p-4 rounded space-y-4'>
              <p className='font-medium text-gray-700 text-sm'>
                <i className='fa-solid fa-square-plus mr-2' /> Assign
                Technicians
              </p>
            </div>
          </div>
          {!form.is_inspection && (
            <div className='space-y-4'>
              <div className='bg-gray-100 p-4 rounded space-y-4'>
                <p className='font-medium text-gray-700 text-sm'>
                  <i className='fa-solid fa-square-plus mr-2' /> Assign Tasks
                </p>
              </div>
            </div>
          )}
        </Grid>
        <hr />
        <div>
          <Label text='Additional Options' className='mb-2' />
          <Checkbox.Container>
            <Checkbox
              label='One-off job?'
              checked={form.one_off_job}
              onChange={(data: boolean) => setForm({ one_off_job: data })}
            />
            <Checkbox
              label='Inspection'
              checked={form.is_inspection}
              onChange={(data: boolean) => setForm({ is_inspection: data })}
            />
          </Checkbox.Container>
        </div>
        <hr />
        <Button.Container align='center'>
          <Button type='submit' variant='action'>
            Submit
          </Button>
        </Button.Container>
      </Grid>
    </form>
  )
}

export default WorkshopJobForm
