'use client'

import type {FunctionComponent} from 'react'
import {useActionState} from 'react'
import {Label} from '@/components/ui/label'
import {Input} from '@/components/ui/input'
import {Plus} from 'lucide-react'
import SubmitButtonWithLoading from '@/components/custom/submitButtonWithLoading'
import LinedCircleIconButton from '@/components/custom/linedCircleIconButton'
import {useArrayState} from '@/lib/useArrayState'
import PageTitle from '@/components/custom/pageTitle'
import Link from 'next/link'
import {Button} from '@/components/ui/button'
import {createContactAction} from '@/serverFunctions/contacts'

const Page: FunctionComponent = () => {
  const [contactInfo, setContactInfo, updateContactInfoItem] = useArrayState<{type: string; value: string}>([
    {type: '', value: ''},
  ])
  const [, createContact] = useActionState(createContactAction, undefined)

  return (
    <>
      <PageTitle>New Contact</PageTitle>
      <form className="mt-8 space-y-4" action={createContact}>
        <div className="flex gap-4">
          <div className="flex flex-col flex-grow gap-2">
            <Label htmlFor="firstName">Firstname</Label>
            <Input name="firstName" id="firstName" type="text" placeholder="John" />
          </div>
          <div className="flex flex-col flex-grow gap-2">
            <Label htmlFor="lastName">Lastname</Label>
            <Input name="lastName" id="lastName" type="text" placeholder="Doe" />
          </div>
        </div>
        <div className="flex flex-col gap-2">
          <Label>Contactinfo</Label>

          {contactInfo.map(({type, value}, i) => (
            <div className="flex gap-2" key={i}>
              <Input
                id={`contactInfo.${i}.type`}
                name={`contactInfo.${i}.type`}
                type="text"
                className="flex-grow"
                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"
              />
            </div>
          ))}

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

        <div className="flex justify-end mb-2">
          <SubmitButtonWithLoading loadingText="Creating contact" text="Create" />
        </div>
      </form>

      <Link href="/contacts">
        <Button variant="destructive" className="w-full">
          Cancel
        </Button>
      </Link>
    </>
  )
}

export default Page
