"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";
import { FieldValues } from "react-hook-form";

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

  // const [categoriasTelhados, setCategoriasTelhados] = useState([]);
  // const [loaded, setLoaded] = useState(false);

  // useEffect(() => {
  //   const buscarcarCategoriaTelhado = async () => {
  //     const response = await listarCategoriasTelhados();
  //     setCategoriasTelhados(response);
  //     setLoaded(true);
  //   };
  //   buscarcarCategoriaTelhado();
  // }, []);

  function onSubmitFormTiposTelhados(data: FieldValues) {
    data["nome_telhado"] = data["nome_telhado"].trim();
    return onSubmitFunction(data);
  }

  return (
    <>
      <form
        onSubmit={handleSubmit(onSubmitFormTiposTelhados)}
        {...rest}
        key={form.key}
      >
        <InputGroup>
          <Input
            name="nome_telhado"
            label="Nome"
            formulario={form}
            error={"Preencha o Nome da Região"}
            defaultValue={defaultValues && defaultValues["nome_telhado"]}
            disabled={disabledFields?.some(
              (field: string) => field == "nome_telhado",
            )}
          />

          <InputSelectComponent
            label="Categoria"
            skipEffect
            name="categoria_telhado"
            formulario={form}
            options={categoriasTelhados.map((e: any) => ({
              label: e.nome_categoria_telhado,
              value: e.id_categoria_telhado,
            }))}
            error="Selecione uma Categoria"
            required
            defaultValue={defaultValues && defaultValues["categoria_telhado"]}
            disabled={disabledFields?.some(
              (field: string) => field == "categoria_telhado",
            )}
          />
        </InputGroup>
        {children}
      </form>
    </>
  );
};

export default FormTiposTelhados;