'use client'

import {useRouter} from 'next/navigation'
import {useState} from 'react'
import AuthForm from '@/components/auth-form/index.js'
import AuthAlert from '@/components/auth-form/auth-alert.js'

export default function RegistrationForm() {
  const router = useRouter()
  const [error, setError] = useState('')
  const [isOpen, setIsOpen] = useState(false)

  const handleFormSubmit = async data => {
    const response = await fetch('/api/auth/register', {
      method: 'POST',
      body: JSON.stringify({
        ...data
      })
    })

    if (response.status === 201) {
      router.push('/login')
      router.refresh()
    } else {
      const errorResponse = await response.json()
      setError(errorResponse.message)
      setIsOpen(true)
    }
  }

  return (
    <>
      {error && <AuthAlert isOpen={isOpen} setIsOpen={setIsOpen} message={error} severity='error' />}
      <AuthForm
        isRegister
        title='Inscrivez-vous et devenez constituant'
        buttonText='S’enregistrer'
        linkDescription='Vous avez déjà un compte ?'
        linkText='Se connecter'
        linkHref='/login'
        onSubmit={handleFormSubmit}
      />
    </>
  )
}