sistema_base/apps/web/feactures/auth/components/user-register-form.tsx

'use client';
import { zodResolver } from '@hookform/resolvers/zod';
import { Button } from '@repo/shadcn/button';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@repo/shadcn/form';
import { Input } from '@repo/shadcn/input';
import { useRouter, useSearchParams } from 'next/navigation';
import { useState, useTransition } from 'react';
import { useForm } from 'react-hook-form';
import { toast } from 'sonner';
import { SelectSearchable } from '@repo/shadcn/select-searchable'

import { createUserValue, createUser } from '../schemas/register';
import { useRegisterUser } from "../hooks/use-mutation-users";

import React from 'react';
import { useStateQuery, useMunicipalityQuery, useParishQuery } from '@/feactures/location/hooks/use-query-location';

export default function UserAuthForm() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const callbackUrl = searchParams.get('callbackUrl');
  const [error, SetError] = useState<string | null>(null);

 const [state, setState] = React.useState(0);
  const [municipality, setMunicipality] = React.useState(0);
  const [disabledMunicipality, setDisabledMunicipality] = React.useState(true);
  const [disabledParish, setDisabledParish] = React.useState(true);
  
  const { data : dataState } = useStateQuery()
  const { data : dataMunicipality } = useMunicipalityQuery(state)
  const { data : dataParish } = useParishQuery(municipality)
  
  const stateOptions = dataState?.data || [{id:0,name:'Sin estados'}]
  const municipalityOptions = dataMunicipality?.data || [{id:0,stateId:0,name:'Sin Municipios'}]
  const parishOptions =  dataParish?.data || [{id:0,municipalityId:0,name:'Sin Parroquias'}]


  const defaultValues = {
    username: '',
    password: '',
    confirmPassword: '',
    fullname: '',
    lastname: '',
    email: '',
    phone: '',
    role: 5
  };
  const form = useForm<createUserValue>({
    resolver: zodResolver(createUser),
    defaultValues,
  });

  const {
      mutate: saveAccountingAccounts,
      isPending: isSaving,
      isError,
    } = useRegisterUser();

  const onSubmit = async (data: createUserValue) => {
    SetError(null);

    const formData = {role: 5, ...data }

    saveAccountingAccounts(formData, {
      onSuccess: () => {
        form.reset();
        toast.success('Registro Exitoso!');
        router.push(callbackUrl ?? '/');
      },
      onError: (e) => {
        // form.setError('root', {
        //   type: 'manual',
        //   message: 'Error al guardar la cuenta contable',
        // });
        SetError(e.message);
        toast.error(e.message);
      },
    })
  }

  return (
    <>
      <Form {...form}>

        <form className="flex-none p-6 md:p-8" onSubmit={form.handleSubmit(onSubmit)}>
          <div className="flex flex-col gap-6">
            <div className="items-center text-center">
              <h1 className="text-2xl font-bold">Sistema Gestión de Productores</h1>
              <p className="text-balance text-muted-foreground">
                Ingresa tus datos
              </p>
              { error ? (
                <p className="text-balance text-muted-foreground">
                  {error}
                </p>
              ): null }
            </div>

            <div className='grid md:grid-cols-2 gap-2'>

              <FormField
                control={form.control}
                name="username"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Usuario</FormLabel>
                    <FormControl>
                      <Input
                        type="text"
                        placeholder="ingrese su usuario..."
                        // disabled={loading}
                        {...field}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <FormField
                control={form.control}
                name="fullname"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Nombre Completo</FormLabel>
                    <FormControl>
                      <Input
                        type="text"
                        placeholder="ingrese su Nombre..."
                        // disabled={loading}
                        {...field}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <FormField
                control={form.control}
                name="phone"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Teléfono</FormLabel>
                    <FormControl>
                      <Input
                        type="text"
                        placeholder="ingrese su teléfono..."
                        // disabled={loading}
                        {...field}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <FormField
                control={form.control}
                name="email"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Correo</FormLabel>
                    <FormControl>
                      <Input
                        type="text"
                        placeholder="ingrese su correo..."
                        // disabled={loading}
                        {...field}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <FormField
                control={form.control}
                name="state"
                render={({ field }) => (
                  <FormItem className="w-full">
                    <FormLabel>Estado</FormLabel>
  
                    <SelectSearchable
                      options={
                        stateOptions?.map((item) => ({
                          value: item.id.toString(),
                          label: item.name,
                        })) || []
                      }
                      onValueChange={(value : any) => 
                        {field.onChange(Number(value)); setState(value); setDisabledMunicipality(false); setDisabledParish(true)}
                      }
                      placeholder="Selecciona un estado"
                      defaultValue={field.value?.toString()}
                      // disabled={readOnly}
                    />
                    <FormMessage />
                  </FormItem>
                )}
              />
  
              <FormField
                control={form.control}
                name="municipality"
                render={({ field }) => (
                  <FormItem className="w-full">
                    <FormLabel>Municipio</FormLabel>
  
                    <SelectSearchable
                      options={
                        municipalityOptions?.map((item) => ({
                          value: item.id.toString(),
                          label: item.name,
                        })) || []
                      }
                      onValueChange={(value : any) => 
                        {field.onChange(Number(value)); setMunicipality(value); setDisabledParish(false)}
                      }
                      placeholder="Selecciona un Municipio"
                      defaultValue={field.value?.toString()}
                      disabled={disabledMunicipality}
                    />
                    <FormMessage />
                  </FormItem>
                )}
              />
  
              <FormField
                control={form.control}
                name="parish"
                render={({ field }) => (
                  <FormItem className="w-full">
                    <FormLabel>Parroquia</FormLabel>
  
                    <SelectSearchable
                      options={
                        parishOptions?.map((item) => ({
                          value: item.id.toString(),
                          label: item.name,
                        })) || []
                      }
                      onValueChange={(value : any) => 
                        field.onChange(Number(value))
                      }
                      placeholder="Selecciona una Parroquia"
                      defaultValue={field.value?.toString()}
                      disabled={disabledParish}
                    />
                    <FormMessage />
                  </FormItem>
                )}
              />

              <FormField
                control={form.control}
                name="password"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Contraseña</FormLabel>
                    <FormControl>
                      <Input
                        type="password"
                        placeholder="*************"
                        // disabled={loading}
                        {...field}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <FormField
                control={form.control}
                name="confirmPassword"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Repita la contraseña</FormLabel>
                    <FormControl>
                      <Input
                        type="password"
                        placeholder="*************"
                        // disabled={loading}
                        {...field}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

            </div>

            {error && (
              <FormMessage className="text-red-500">{error}</FormMessage>
            )}{' '}
            <Button type="submit" className="w-full">
              Registrarse
            </Button>
            <div className="text-center text-sm">
                ¿Ya tienes una cuenta?{" "}
                <a href="/" className="underline underline-offset-4">Inicia Sesión</a>
              </div>
          </div>
        </form>
      </Form>
    </>
  );
}