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

import { isValidCPF } from '@brazilian-utils/brazilian-utils'
import { zodResolver } from '@hookform/resolvers/zod'
import { PatternFormat } from 'react-number-format'
import { Link, useOutletContext } from 'react-router'
import { z } from 'zod'

import { Button } from '@/components/ui/button'
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle
} from '@/components/ui/card'
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage
} from '@/components/ui/form'
import { Input } from '@/components/ui/input'
import { Spinner } from '@/components/ui/spinner'
import type { User } from '@/routes/_.$orgid.users.$id/route'
import { useForm } from 'react-hook-form'

const formSchema = z.object({
  name: z.string().trim().nonempty('Digite seu nome'),
  email: z.email(),
  cpf: z
    .string('CPF obrigatório')
    .refine(isValidCPF, { message: 'CPF inválido' })
})

export default function Route() {
  const { user } = useOutletContext() as { user: User }
  const form = useForm({
    defaultValues: user,
    resolver: zodResolver(formSchema)
  })
  const { handleSubmit, control, formState } = form

  const onSubmit = async (data: z.infer<typeof formSchema>) => {
    console.log(data)
  }

  return (
    <Form {...form}>
      <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
        <Card>
          <CardHeader>
            <CardTitle className="text-2xl">Editar colaborador</CardTitle>
            <CardDescription>
              Configurar as informações gerais para este colaborador
            </CardDescription>
          </CardHeader>

          <CardContent className="space-y-4">
            <FormField
              control={control}
              name="name"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Nome</FormLabel>
                  <FormControl>
                    <Input {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            <FormField
              control={control}
              name="email"
              disabled={true}
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Email</FormLabel>
                  <FormControl>
                    <Input {...field} />
                  </FormControl>
                  <FormLabel className="text-sm font-normal text-muted-foreground">
                    <span>
                      Para gerenciar os emails ou trocar o email principal, use
                      as{' '}
                      <Link
                        to="emails"
                        className="text-blue-400 underline hover:no-underline"
                      >
                        configurações de emails
                      </Link>
                    </span>
                  </FormLabel>
                  <FormMessage />
                </FormItem>
              )}
            />

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

        <div className="flex justify-end">
          <Button
            type="submit"
            className="cursor-pointer"
            disabled={formState.isSubmitting}
          >
            {formState.isSubmitting && <Spinner />}
            Editar colaborador
          </Button>
        </div>
      </form>
    </Form>
  )
}