'use client';

import { useEffect } from 'react';

import { Button } from '@/components/ui/button';
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { ResetFormIfData } from '@/shared/actions/form/ResetFormIfData';
import LoadingButton from '@/shared/components/loadingButton/LoadingButton';

import { useGGramaticaFormHook } from '../../hooks/GGramatica/useGGramaticaFormHook';
import { GGramaticaFormInterface } from '../../interfaces/GGramatica/GGramaticaFormInterface';

/**
 * Formulário de cadastro/edição de Natureza
 * Baseado nos campos da tabela G_NATUREZA
 */
export default function GGramaticaForm({
  isOpen,
  data,
  onClose,
  onSave,
  buttonIsLoading,
}: GGramaticaFormInterface) {

  const form = useGGramaticaFormHook({});

  // Atualiza o formulário quando recebe dados para edição
  useEffect(() => {
    ResetFormIfData(form, data);
  }, [data, form]);

  function onError(error: any) {
    console.log('Erro no formulário:', error);
  }

  return (
    <Dialog
      open={isOpen}
      onOpenChange={(open) => {
        if (!open) onClose(null, false);
      }}
    >
      <DialogContent className="w-full max-w-full p-6 sm:max-w-3xl md:max-w-2xl lg:max-w-2xl">
        <DialogHeader>
          <DialogTitle className="text-lg sm:text-xl">Formulário de Gramática</DialogTitle>
          <DialogDescription className="text-muted-foreground text-sm">
            Formulário de Gramática
          </DialogDescription>
        </DialogHeader>
        {/* Formulário principal */}
        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSave, onError)} className="space-y-6">
            {/* GRID MOBILE FIRST */}
            <div className="grid w-full grid-cols-12 gap-4">
              {/* Palavra */}
              <div className="col-span-12 sm:col-span-6 md:col-span-12">
                <FormField
                  control={form.control}
                  name="palavra"
                  render={({ field }) => (
                    <FormItem className="col-span-1 sm:col-span-2">
                      <FormLabel>Palavra</FormLabel>
                      <FormControl>
                        <Input
                          {...field}
                          type="text"
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
              </div>
              {/* Prefixo */}
              <div className="col-span-12 sm:col-span-6 md:col-span-12">
                <FormField
                  control={form.control}
                  name="prefixo"
                  render={({ field }) => (
                    <FormItem className="col-span-1 sm:col-span-2">
                      <FormLabel>Prefixo</FormLabel>
                      <FormControl>
                        <Input
                          {...field}
                          type="text"
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
              </div>
              {/* Singular Masculino */}
              <div className="col-span-12 sm:col-span-6 md:col-span-6">
                <FormField
                  control={form.control}
                  name="sufixo_ms"
                  render={({ field }) => (
                    <FormItem className="col-span-1 sm:col-span-2">
                      <FormLabel>Sufixo Masculino Singular</FormLabel>
                      <FormControl>
                        <Input
                          {...field}
                          type="text"
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
              </div>
              {/* Plural Masculino */}
              <div className="col-span-12 sm:col-span-6 md:col-span-6">
                <FormField
                  control={form.control}
                  name="sufixo_mp"
                  render={({ field }) => (
                    <FormItem className="col-span-1 sm:col-span-2">
                      <FormLabel>Sufixo Masculino Plural</FormLabel>
                      <FormControl>
                        <Input
                          {...field}
                          type="text"
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
              </div>
              {/* Singular Feminino */}
              <div className="col-span-12 sm:col-span-6 md:col-span-6">
                <FormField
                  control={form.control}
                  name="sufixo_fs"
                  render={({ field }) => (
                    <FormItem className="col-span-1 sm:col-span-2">
                      <FormLabel>Sufixo Feminino Singular</FormLabel>
                      <FormControl>
                        <Input
                          {...field}
                          type="text"
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
              </div>
              {/* Plural Feminino */}
              <div className="col-span-12 sm:col-span-6 md:col-span-6">
                <FormField
                  control={form.control}
                  name="sufixo_fp"
                  render={({ field }) => (
                    <FormItem className="col-span-1 sm:col-span-2">
                      <FormLabel>Sufixo Feminino Plural</FormLabel>
                      <FormControl>
                        <Input
                          {...field}
                          type="text"
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
              </div>
            </div>
            {/* Rodapé */}
            <DialogFooter className="mt-6 flex flex-col justify-end gap-2 sm:flex-row">
              <DialogClose asChild>
                <Button variant="outline" type="button">
                  Cancelar
                </Button>
              </DialogClose>
              <LoadingButton
                text="Salvar"
                textLoading="Salvando..."
                type="submit"
                loading={buttonIsLoading}
              />
            </DialogFooter>
          </form>
        </Form>
      </DialogContent>
    </Dialog>
  );
}