'use client'

import {zodResolver} from '@hookform/resolvers/zod'
import {useState} from 'react'
import {useForm} from 'react-hook-form'
import {z} from 'zod'

import {register} from '@/actions/auth/register'
import CardWrapper from '@/components/auth/card-wrapper'
import {FormError} from '@/components/auth/form-error'
import {FormSuccess} from '@/components/auth/form-success'
import GoogleLogin from '@/components/auth/google-login'
import {
	Form,
	FormControl,
	FormField,
	FormItem,
	FormLabel,
	FormMessage
} from '@/components/ui/form'
import {RegisterSchema} from '@/lib/schemas'
import {Button} from '@/ui/button'
import {Input} from '@/ui/input'

export default function RegisterForm() {
	const [loading, setLoading] = useState(false)
	const [error, setError] = useState('')
	const [success, setSuccess] = useState('')

	const form = useForm<z.infer<typeof RegisterSchema>>({
		resolver: zodResolver(RegisterSchema),
		defaultValues: {
			email: '',
			name: '',
			password: '',
			passwordConfirmation: ''
		}
	})

	const onSubmit = async (data: z.infer<typeof RegisterSchema>) => {
		setLoading(true)
		register(data).then(res => {
			if (res.error) {
				setError(res.error)
				setLoading(false)
			}
			if (res.success) {
				setError('')
				setSuccess(res.success)
				setLoading(false)
			}
		})
	}

	return (
		<CardWrapper
			headerLabel='Create an account'
			title='Register'
			backButtonHref='/auth/login'
			backButtonLabel='Already have an account'
			showSocial
		>
			<Form {...form}>
				<form onSubmit={form.handleSubmit(onSubmit)} className='space-y-6'>
					<div className='space-y-4'>
						<FormField
							control={form.control}
							name='email'
							render={({field}) => (
								<FormItem>
									<FormLabel>Email</FormLabel>
									<FormControl>
										<Input
											{...field}
											placeholder='johndoe@email.com'
											type='email'
										/>
									</FormControl>
									<FormMessage />
								</FormItem>
							)}
						/>
						<FormField
							control={form.control}
							name='name'
							render={({field}) => (
								<FormItem>
									<FormLabel>Name</FormLabel>
									<FormControl>
										<Input {...field} placeholder='John Doe' />
									</FormControl>
									<FormMessage />
								</FormItem>
							)}
						/>
						<FormField
							control={form.control}
							name='password'
							render={({field}) => (
								<FormItem>
									<FormLabel>Password</FormLabel>
									<FormControl>
										<Input {...field} placeholder='******' type='password' />
									</FormControl>
									<FormMessage />
								</FormItem>
							)}
						/>
						<FormField
							control={form.control}
							name='passwordConfirmation'
							render={({field}) => (
								<FormItem>
									<FormLabel>Confirm Password</FormLabel>
									<FormControl>
										<Input {...field} placeholder='******' type='password' />
									</FormControl>
									<FormMessage />
								</FormItem>
							)}
						/>
					</div>
					<FormSuccess message={success} />
					<FormError message={error} />
					<Button type='submit' className='w-full' disabled={loading}>
						{loading ? 'Loading...' : 'Register'}
					</Button>
				</form>
			</Form>
			{/*<GoogleLogin />*/}
		</CardWrapper>
	)
}