import { PatternFormat } from 'react-number-format'
import { useRequest } from 'ahooks'
import { z } from 'zod'
import { zodResolver } from '@hookform/resolvers/zod'
import { useForm } from 'react-hook-form'

import { Button } from '@repo/ui/components/ui/button'
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage
} from '@repo/ui/components/ui/form'
import { Input } from '@repo/ui/components/ui/input'
import { Spinner } from '@repo/ui/components/ui/spinner'
import { cpf, type RegisterContextProps, type User } from './data'
import { RegisterContext } from './data'
import { use } from 'react'

const formSchema = z.object({
  cpf: cpf
})

type Schema = z.infer<typeof formSchema>

export function Cpf() {
  const { setUser } = use(RegisterContext) as RegisterContextProps
  const form = useForm({
    resolver: zodResolver(formSchema)
  })
  const { control, handleSubmit, formState } = form
  const { runAsync } = useRequest(
    async ({ cpf }) => {
      return await fetch(`/lookup?cpf=${cpf}`, {
        method: 'GET',
        headers: new Headers({ 'Content-Type': 'application/json' })
      })
    },
    { manual: true }
  )

  const onSubmit = async ({ cpf }: Schema) => {
    const r = await runAsync({ cpf })
    const user = (await r.json()) as any
    setUser({ cpf, ...user })
  }

  return (
    <>
      <Form {...form}>
        <form onSubmit={handleSubmit(onSubmit)}>
          <fieldset disabled={formState.isSubmitting} className="grid gap-6">
            <FormField
              control={control}
              name="cpf"
              defaultValue=""
              render={({ field: { ref, onChange, ...props } }) => (
                <FormItem>
                  <FormLabel>CPF</FormLabel>
                  <FormControl>
                    <PatternFormat
                      format="###.###.###-##"
                      mask="_"
                      placeholder="___.___.___-__"
                      customInput={Input}
                      autoFocus={true}
                      getInputRef={ref}
                      onValueChange={({ value }) => {
                        onChange(value)
                      }}
                      {...props}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            <Button
              type="submit"
              className="w-full cursor-pointer relative overflow-hidden"
            >
              {formState.isSubmitting && (
                <div className="absolute bg-lime-500 inset-0 flex items-center justify-center">
                  <Spinner />
                </div>
              )}
              Continuar
            </Button>
          </fieldset>
        </form>
      </Form>
    </>
  )
}