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

import { useForm } from 'react-hook-form'
import { PatternFormat } from 'react-number-format'

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

export default function Route({}: Route.ComponentProps) {
  const form = useForm()

  return (
    <>
      <div className="text-center">
        <h1 className="text-2xl font-semibold font-display text-balance">
          Crie sua empresa
        </h1>
      </div>

      <Form {...form}>
        <form className="space-y-6">
          <FormField
            control={form.control}
            name="cnpj"
            render={({ field: { onChange, ref, ...props } }) => (
              <FormItem className="grid gap-3">
                <FormLabel>CNPJ</FormLabel>
                <FormControl>
                  <PatternFormat
                    format="##.###.###/####-##"
                    mask="_"
                    placeholder="__.___.__/____-__"
                    customInput={Input}
                    getInputRef={ref}
                    onValueChange={({ value }) => {
                      onChange(value)
                    }}
                  />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />

          <Button type="submit" className="w-full">
            Continuar
          </Button>
        </form>
      </Form>
    </>
  )
}