'use client'

import type {FunctionComponent} from 'react'
import {Label} from '@/components/ui/label'
import SubmitButtonWithLoading from '@/components/custom/submitButtonWithLoading'
import {Textarea} from '@/components/ui/textarea'
import type {Contact} from '@/generated/prisma/client'
import type {MeetingWithContact} from '@/models/meetings'
import Combobox from '@/components/custom/combobox'
import DatePicker from '@/components/custom/datePicker'
import ActionButton from '@/components/custom/actionButton'
import {cancelMeetingServerFunction, createMeetingAction, updateMeetingAction} from '@/serverFunctions/meetings'
import {useZodValidatedForm} from '@/lib/useZodValidatedForm'
import {createMeetingSchema, updateMeetingSchema} from '@/schemas/meetingSchemas'
import Form from '@/components/custom/form'
import FormInput from '@/components/custom/formInput'
import FormError from '@/components/custom/formError'

interface AddContactFormProps {
  contacts: Contact[]
  meeting?: MeetingWithContact
}

const AddMeetingForm: FunctionComponent<AddContactFormProps> = ({contacts, meeting}) => {
  const [form, createOrUpdateMeeting] = useZodValidatedForm(
    meeting?.id ? updateMeetingSchema : createMeetingSchema,
    meeting?.id ? updateMeetingAction : createMeetingAction,
  )

  return (
    <>
      <Form hookForm={form} className="space-y-4" action={createOrUpdateMeeting} id={meeting?.id}>
        <div className="grid grid-cols-3 gap-4">
          <FormInput name="title" label="Title" defaultValue={meeting?.title} placeholder="Coffee" />
          <div className="col-span-1 flex flex-col gap-2">
            <Label>Contact</Label>
            <Combobox
              {...form.register('contactId')}
              initialValue={meeting?.contactId}
              data={[
                ...contacts.map(c => ({
                  label: `${c.firstName} ${c.lastName ?? ''}`,
                  value: c.id,
                })),
              ]}
              onValueChange={id => form.setValue('contactId', id)}
              label="Choose a contact"
              placeholder="John Doe"
              noResultText="No contacts found"
              name="contactId"
            />
            <FormError path="contactId" />
          </div>
          <div className="col-span-1 flex flex-col gap-2">
            <Label>Date</Label>
            <DatePicker defaultValue={meeting?.date ?? new Date()} {...form.register('date')} />
            <FormError path="date" />
          </div>
        </div>

        <div className="flex flex-col gap-2">
          <Label htmlFor="description">Description</Label>
          <Textarea rows={5} defaultValue={meeting?.description ?? ''} {...form.register('description')} />
        </div>

        <SubmitButtonWithLoading
          loadingText={meeting ? 'Updating contact' : 'Creating contact'}
          text={meeting ? 'Update' : 'Create'}
        />
      </Form>

      {meeting && (
        <ActionButton
          className="my-4 w-full"
          variant="destructive"
          action={() => cancelMeetingServerFunction({id: meeting.id})}
          pendingContent="Canceling meeting ...">
          Cancel meeting
        </ActionButton>
      )}
    </>
  )
}

export default AddMeetingForm
