'use client'
import type {FunctionComponent} from 'react'
import {useActionState, useTransition} from 'react'
import type {Contact} from '@/models/contact'
import {Avatar, AvatarImage} from '@/components/ui/avatar'
import {Button} from '@/components/ui/button'
import {Loader2, Plus, Trash} from 'lucide-react'
import {Textarea} from '@/components/ui/textarea'
import {Input} from '@/components/ui/input'
import LinedCircleIconButton from '@/components/custom/linedCircleIconButton'
import SubmitButtonWithLoading from '@/components/custom/submitButtonWithLoading'
import {useArrayState} from '@/lib/useArrayState'
import {deleteContactServerFunction, updateContactAction} from '@/serverFunctions/contacts'

const ContactDetailForm: FunctionComponent<Contact> = contact => {
  const [contactInfo, setContactInfo, updateContactInfoItem, deleteContactInfoItem] = useArrayState<{
    type: string
    value: string
  }>(contact.contactInfo)
  const [_, updateContact] = useActionState(updateContactAction, undefined)

  // De useTransition hook wordt gebruikt om een server function op te roepen (waarna deze een server action genoemd
  // wordt). De isPending variabele geeft aan of er een transition bezig is, en de startTransition functie wordt
  // gebruikt om een nieuwe transition te starten.
  // State updates die binnen een transition worden gedaan, worden pas doorgevoerd nadat alle transition afgehandeld
  // zijn, als een gebruiker snel 20 keer op een knop drukt, worden er dus 20 transitions uitgevoerd en wordt de state
  // pas aangepast als alle 20 transitions zijn afgehandeld.
  const [isPending, startTransition] = useTransition()

  return (
    <form action={updateContact}>
      <input type="hidden" name="id" value={contact.id} />
      <div className="flex items-center">
        <Avatar className="h-18 w-18">
          <AvatarImage src={contact.avatar ?? `https://ui-avatars.com/api/?name=${contact.firstName}`} />
        </Avatar>
        <div className="text-4xl ms-4 flex-grow">
          <div className="flex gap-4 me-4">
            <div className="flex-grow">
              <Input id="name" type="text" name="firstName" defaultValue={contact.firstName ?? ''} placeholder="John" />
            </div>
            <div className="flex-grow">
              <Input id="name" type="text" name="lastName" defaultValue={contact.lastName ?? ''} placeholder="Doe" />
            </div>
          </div>
        </div>
      </div>

      <div className="text-muted-foreground my-4">
        <Textarea name="description" defaultValue={contact.description ?? ''} placeholder="Description" />
      </div>

      <div className="text-xl">Contactinfo</div>

      <div className="flex flex-col gap-4 my-4">
        {contactInfo.map(({type, value}, i) => (
          <div className="flex gap-4" key={i}>
            <Input
              id={`contactInfo.${i}.type`}
              type="text"
              className="flex-grow"
              name={`contactInfo.${i}.type`}
              value={type}
              onChange={evt => updateContactInfoItem(i, {type: evt.target.value, value})}
              placeholder="Contact type (e.g. email, phone)"
            />
            <Input
              id={`contactInfo.${i}.value`}
              name={`contactInfo.${i}.value`}
              type="text"
              className="flex-grow"
              value={value}
              onChange={evt => updateContactInfoItem(i, {type, value: evt.target.value})}
              placeholder="Contact info"
            />
            <Button
              variant="ghost"
              onClick={evt => {
                evt.preventDefault()
                deleteContactInfoItem(i)
              }}>
              <Trash />
            </Button>
          </div>
        ))}
      </div>

      <LinedCircleIconButton
        Icon={Plus}
        disabled={contactInfo?.at(-1)?.value === '' || contactInfo?.at(-1)?.type === ''}
        onClick={() => setContactInfo(old => [...old, {type: '', value: ''}])}
      />

      <div className="flex flex-col gap-4 mt-4">
        <SubmitButtonWithLoading loadingText="Updating contact..." text="Update contact" />
        <Button
          variant="destructive"
          className="w-full"
          disabled={isPending}
          onClick={evt => {
            // Prevent the form from submitting.
            evt.preventDefault()
            startTransition(() => deleteContactServerFunction({id: contact.id}))
          }}>
          {isPending && <Loader2 className="animate-spin" />} Delete contact
        </Button>
      </div>
    </form>
  )
}

export default ContactDetailForm
