'use client'

import Link from 'next/link'
import { useRouter } from 'next/navigation'
import { useFormState } from 'react-dom'
import { AlertCircle } from 'lucide-react'
import { Alert, AlertDescription } from '@/components/ui/alert'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { cn } from '@/lib/utils'
import { createUser } from './action'
import FieldError from '../field-error'
import OAuthButtons from '../oauth-buttons'
import ActionButton from '../action-button'
import { first } from 'lodash'
import { count } from 'console'

interface Props {
  searchParams: any
}

const SignUp = ({ searchParams }: Props) => {

  const router = useRouter()
  const [state, formAction] = useFormState(createUser, {
    firstName: null,
    lastName: null,
    countryOfResidence: null,
    email: null,
    password: null,
    type: null,
    message: null,
    invitationId: searchParams.invitationId ?? null,
  })

  return (
    <form action={formAction} className="space-y-4">
      <h3 className="text-center text-xl font-bold">Sign up</h3>

      {searchParams.error ? (
        <Alert
          variant="destructive"
          className="[&>svg]:-translate-y-1/2 [&>svg]:top-1/2"
        >
          <AlertCircle className="h-4 w-4" />
          <AlertDescription>{searchParams.error}</AlertDescription>
        </Alert>
      ) : null}

      <OAuthButtons />

      <div className="relative">
        <div className="absolute inset-0 flex items-center">
          <span className="w-full border-t" />
        </div>
        <div className="relative flex justify-center text-xs uppercase">
          <span className="bg-background px-2 text-muted-foreground">
            Or continue with
          </span>
        </div>
      </div>

      <fieldset className="grid gap-x-1.5 gap-3">
        <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
          <div>
            <Label htmlFor="firstName">First Name:</Label>
            <div className="relative">
              <Input
                className={cn(
                  'focus-visible:ring-0 focus-visible:ring-offset-0',
                  (state?.email || state?.message) && 'border-red-500 pr-9'
                )}
                id="firstName"
                type="text"
                name="firstName"
                placeholder="John"
              />
              {state?.email ? <FieldError error={state.email} /> : ''}
            </div>
          </div>
          <div>
            <Label htmlFor="lastName">Last Name:</Label>
            <div className="relative">
              <Input
                className={cn(
                  'focus-visible:ring-0 focus-visible:ring-offset-0',
                  (state?.email || state?.message) && 'border-red-500 pr-9'
                )}
                id="lastName"
                type="text"
                name="lastName"
                placeholder="Doe"
              />
              {state?.email ? <FieldError error={state.email} /> : ''}
            </div>
          </div>

        </div>


        <Label htmlFor="countryOfResidence">Country Of Residence</Label>
        <div className="relative">
          <Input
            className={cn(
              'focus-visible:ring-0 focus-visible:ring-offset-0',
              (state?.email || state?.message) && 'border-red-500 pr-9'
            )}
            id="countryOfResidence"
            type="text"
            name="countryOfResidence"
          />
          {state?.email ? <FieldError error={state.email} /> : ''}
        </div>

        <Label htmlFor="email">Email</Label>
        <div className="relative">
          <Input
            className={cn(
              'focus-visible:ring-0 focus-visible:ring-offset-0',
              (state?.email || state?.message) && 'border-red-500 pr-9'
            )}
            id="email"
            type="email"
            name="email"
            placeholder="m@example.com"
          />
          {state?.email ? <FieldError error={state.email} /> : ''}
        </div>
      </fieldset>

      <fieldset className="grid gap-x-2 gap-y-1">
        <Label htmlFor="password">Password</Label>
        <div className="relative">
          <Input
            className={cn(
              'focus-visible:ring-0 focus-visible:ring-offset-0',
              (state?.password || state?.message) && 'border-red-500'
            )}
            id="password"
            type="password"
            name="password"
          />
          {state?.password ? <FieldError error={state.password} /> : ''}
          {state?.message ? <FieldError error={state.message} /> : ''}
        </div>
      </fieldset>

      <ActionButton>Sign up</ActionButton>

      <p className="text-sm text-center">
        <span className="text-slate-600"> Already have an account? </span>
        <Link
          className="hover:underline text-primary font-semibold"
          href="/signin"
          onClick={(e) => {
            e.preventDefault()
            router.replace(e.currentTarget.href)
          }}
        >
          Sign in
        </Link>
      </p>
    </form>
  )
}

export default SignUp