'use client'

import { infer as zInfer } from 'zod'
import { useState, useTransition } from 'react'
import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form'
import { Input } from '@/components/ui/input'
import { CardWrapper } from '@/components/auth/CardWrapper'
import { useI18n } from '@/locales/client'
import { Button } from '@/components/ui/button'
import FormError from '@/components/FormError'
import FormSuccess from '@/components/FormSuccess'

import { register } from '@/actions/register'
import { RegisterSchema } from '@/schemas'
import { AUTH_LOGIN_URL } from '@/config/routes'

export const RegisterForm = () => {
  // const [currentPassword, setCurrentPassword] = useState('')
  // const [password, setPassword] = useState('')
  // const [passwordConfirmation, setPasswordConfirmation] = useState('')
  const [error, setError] = useState<string | undefined>('')
  const [success, setSuccess] = useState<string | undefined>('')
  const [isPending, startTransition] = useTransition()

  const t = useI18n()

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

  const onSubmit = (values: zInfer<typeof RegisterSchema>) => {
    setError('')
    setSuccess('')

    startTransition(() => {
      register(values).then((data) => {
        // @ts-ignore
        setError(t(data?.error))
        // @ts-ignore
        setSuccess(t(data?.success))
      })
    })
  }

  return (<CardWrapper
    headerLabel={t('auth.form.register.header_label')}
    headerTitle={t('auth.title')}
    backButtonLabel={t('auth.form.register.back_button_label')}
    backButtonHref={AUTH_LOGIN_URL}
    showSocial
    continueWithLabel={t('form.label.continue_with')}
  >
    <Form {...form}>
      <form
        onSubmit={form.handleSubmit(onSubmit)}
        className="space-y-6"
      >
        <div className="space-y-4">
          {/*Name*/}
          <FormField control={form.control} name="name"
                     render={({ field }) => (<FormItem>
                       <FormLabel>{t('form.label.name')}</FormLabel>
                       <FormControl>
                         <Input
                           {...field}
                           disabled={isPending}
                           placeholder={t('form.placeholder.name')}
                           type="text"
                         />
                       </FormControl>
                       <FormMessage className="text-xs"/>
                     </FormItem>)}/>
          {/*Email*/}
          <FormField control={form.control} name="email"
                     render={({ field }) => (<FormItem>
                       <FormLabel>{t('form.label.email')}</FormLabel>
                       <FormControl>
                         <Input
                           {...field}
                           disabled={isPending}
                           placeholder={t('form.placeholder.email')}
                           type="email"
                           autoComplete="username"
                         />
                       </FormControl>
                       <FormMessage className="text-xs"/>
                     </FormItem>)}/>
          {/*Password*/}
          <FormField control={form.control} name="password"
                     render={({ field }) => (<FormItem className="zhopa">
                       <FormLabel>{t('form.label.password')}</FormLabel>
                       <FormControl>
                         <Input
                           {...field}
                           disabled={isPending}
                           type="password"
                           placeholder="******"
                           autoComplete="new-password"
                         />
                       </FormControl>
                       <FormMessage className="text-xs"/>
                     </FormItem>)}/>
        </div>
        <FormSuccess message={success}/>
        <FormError message={error}/>
        <Button type="submit" className="w-full" disabled={isPending}>
          {t('form.label.register')}
        </Button>
      </form>
    </Form>
  </CardWrapper>)
}