"use client";
import Input from "@/components/Forms/Input";
import InputGroup from "@/components/Forms/InputGroup";
import InputSelectComponent from "@/components/Forms/InputSelect";
import { GetForm } from "@/utils";
import { useState } from "react";

const FormEstruturaFixacao = ({
  onSubmitFunction,
  defaultValues,
  disabledFields,
  children,
  categoriasTelhados,
  ...rest
}: any) => {
  const { handleSubmit, ...form } = GetForm();

  // const [categoriasTelhados, setCategoriasTelhados] = useState<any[]>([]);
  const [loaded, setLoaded] = useState(true);

  // useEffect(() => {
  //   listarCategoriasTelhados().then((res) => {
  //     setCategoriasTelhados(res);
  //     setLoaded(true);
  //   });
  // }, []);

  return loaded ? (
    <>
      <form onSubmit={handleSubmit(onSubmitFunction)} {...rest}>
        <InputGroup>
          <Input
            name="nome_estrutura"
            label="Nome"
            formulario={form}
            error={"Preencha o Nome da Região"}
            required
            defaultValue={defaultValues && defaultValues["nome_estrutura"]}
            disabled={disabledFields?.some(
              (field: string) => field == "nome_estrutura"
            )}
          />
          <InputSelectComponent
            label="Categoria Instalação"
            name="cod_tipo_instalacao"
            formulario={form}
            options={categoriasTelhados?.map((categoria: any) => ({
              label: categoria.nome_categoria_telhado,
              value: categoria.id_categoria_telhado,
            }))}
            error="Selecione uma categoria"
            required
            defaultValue={defaultValues && defaultValues["cod_tipo_instalacao"]}
            disabled={disabledFields?.some(
              (field: string) => field == "cod_tipo_instalacao"
            )}
            skipEffect
          />
        </InputGroup>
        {children}
      </form>
    </>
  ) : (
    <>
      <div>Carregando...</div>
    </>
  );
};

export default FormEstruturaFixacao;