"use client";
import Input from "@/components/Forms/Input";
import InputGroup from "@/components/Forms/InputGroup";
import InputSelect from "@/components/Forms/InputSelect";
import { listarInclinacoesTelhado } from "@/requests/common/InclinacoesTelhado/listarInclinacoesTelhado";
import { listarOrientacoesSolares } from "@/requests/common/OrientacoesSolares/listarInclinacoesTelhado";
import { GetForm } from "@/utils";
import { useEffect, useState } from "react";

const FormPerdasMedias = ({
  onSubmitFunction,
  defaultValues,
  disabledFields,
  children,
  orientacoes: orientacoesProp,
  inclinacoes: inclinacoesProp,
  ...rest
}: any) => {
  const { handleSubmit, ...form } = GetForm();
  const [orientacoes, setOrientacoes] = useState<any[]>(orientacoesProp || []);
  const [inclinacoes, setInclinacoes] = useState<any[]>(inclinacoesProp || []);

  useEffect(() => {
    // Carregar orientações se não foram passadas como prop
    if (!orientacoesProp || orientacoesProp.length === 0) {
      listarOrientacoesSolares().then(setOrientacoes);
    }

    // Carregar inclinações se não foram passadas como prop
    if (!inclinacoesProp || inclinacoesProp.length === 0) {
      listarInclinacoesTelhado().then(setInclinacoes);
    }
  }, [orientacoesProp, inclinacoesProp]);

  // Formatar opções para o InputSelect
  const orientacoesOptions = orientacoes.map((orientacao) => ({
    value: orientacao.id_orientacao,
    label: `${orientacao.sigla_orientacao} - ${orientacao.nome_orientacao}`,
  }));

  const inclinacoesOptions = inclinacoes.map((inclinacao) => ({
    value: inclinacao.id_inclinacao,
    label: `${inclinacao.valor_inclinacao}%`,
  }));

  return (
    <>
      <form onSubmit={handleSubmit(onSubmitFunction)} {...rest}>
        <InputGroup>
          <Input
            name="valor_perda"
            label="% Perda"
            formulario={form}
            error={"Preencha o % de Perda"}
            required
            defaultValue={defaultValues && defaultValues["valor_perda"]}
            mascara="numero"
            suffix="%"
          />
          <InputSelect
            name="orientacao_perda"
            label="Orientação Solar"
            formulario={form}
            error={"Selecione a orientação"}
            required
            defaultValue={defaultValues && defaultValues["orientacao_perda"]}
            options={orientacoesOptions}
            placeholder="Selecione uma orientação"
          />
        </InputGroup>
        <InputGroup>
          <InputSelect
            name="inclinacao_perda"
            label="Inclinação do Telhado"
            formulario={form}
            error={"Selecione a inclinação"}
            required
            defaultValue={defaultValues && defaultValues["inclinacao_perda"]}
            options={inclinacoesOptions}
            placeholder="Selecione uma inclinação"
          />
        </InputGroup>
        {children}
      </form>
    </>
  );
};

export default FormPerdasMedias;