import type { Route } from '../+types'

import { PatternFormat } from 'react-number-format'
import { zodResolver } from '@hookform/resolvers/zod'
import { useState, createContext, type ReactNode, use } from 'react'
import { useForm } from 'react-hook-form'

import { Button } from '@repo/ui/components/ui/button'
import { Checkbox } from '@repo/ui/components/ui/checkbox'
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage
} from '@repo/ui/components/ui/form'
import { Input } from '@repo/ui/components/ui/input'
import { Label } from '@repo/ui/components/ui/label'

import { Cpf } from './cpf'
import { formSchema, type Schema, RegisterContext, type User } from './data'

export function meta({}: Route.MetaArgs) {
  return [{ title: 'Criar conta · EDUSEG®' }]
}

export default function Signup({}: Route.ComponentProps) {
  const [show, setShow] = useState(false)
  const [user, setUser] = useState<User | null>(null)
  const form = useForm({
    resolver: zodResolver(formSchema)
  })
  const { control, handleSubmit, formState } = form

  const onSubmit = async (data: Schema) => {
    console.log(data)
  }

  console.log(user)

  return (
    <RegisterContext value={{ user, setUser }}>
      {user ? (
        <Form {...form}>
          <form onSubmit={handleSubmit(onSubmit)} className="grid gap-6">
            <FormField
              control={control}
              name="name"
              defaultValue={user?.name}
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Nome</FormLabel>
                  <FormControl>
                    <Input autoFocus={true} placeholder="Seu nome" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            <FormField
              control={control}
              name="email"
              defaultValue={user?.email}
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Email</FormLabel>
                  <FormControl>
                    <Input placeholder="seu@email.com" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            <FormField
              control={control}
              name="cpf"
              defaultValue={user.cpf}
              render={({ field: { ref, onChange, ...props } }) => (
                <FormItem>
                  <FormLabel>CPF</FormLabel>
                  <FormControl>
                    <PatternFormat
                      format="###.###.###-##"
                      mask="_"
                      placeholder="___.___.___-__"
                      customInput={Input}
                      getInputRef={ref}
                      onValueChange={({ value }) => {
                        onChange(value)
                      }}
                      {...props}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            <FormField
              control={control}
              name="password"
              defaultValue=""
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Senha</FormLabel>
                  <FormControl>
                    <Input
                      type={show ? 'text' : 'password'}
                      placeholder="••••••••"
                      autoComplete="false"
                      {...field}
                    />
                  </FormControl>
                  <div className="flex items-center gap-3">
                    <Checkbox
                      id="showPassword"
                      onClick={() => setShow((x) => !x)}
                      tabIndex={-1}
                    />
                    <Label htmlFor="showPassword">Mostrar senha</Label>
                  </div>
                  <FormMessage />
                </FormItem>
              )}
            />

            <Button
              type="submit"
              className="w-full cursor-pointer"
              disabled={formState.isSubmitting}
            >
              Criar conta
            </Button>
          </form>
        </Form>
      ) : (
        <Cpf />
      )}
    </RegisterContext>
  )
}