import { PopoverCadastroCliente } from "@/components/Kanban/popoverCadastroCliente";
import ModalComponente from "@/components/Modal/ModalComponente";
import { handleSweetAlert } from "@/components/Modal/SweetAlertConfirm";
import {
  cadastrarNovoContato,
  listarOrigemCliente,
} from "@/requests/CRUD/Cliente/cadastroCliente";
import { listarNegociosCliente } from "@/requests/CRUD/Cliente/listarClientes";
import { verificaTelefone } from "@/requests/CRUD/ColetaDados/cadastroColetaDados";

import LoaderSun from "@/components/common/Loader/LoaderSun";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { baixarAwsBase64 } from "@/requests/common/Aws/baixarAws";
import { listarClassificacoes } from "@/requests/CRUD/Classificacao/listarClassificacoes";
import { listarEspessurasCabos } from "@/requests/CRUD/ColetaDados/listarEspessurasCabos";
import { listarPotenciasModulosDistribuidores } from "@/requests/CRUD/ColetaDados/listarPotenciasModulosDistribuidores";
import { listarProductsFromCategory } from "@/requests/CRUD/ColetaDados/listarProductsFromCategory";
import { listarConcessionarias } from "@/requests/CRUD/Concessionaria/listarConcessionarias";
import { listarDistribuidoresCredenciais } from "@/requests/CRUD/Distribuidores/listarDistribuidoresCredenciais";
import { listarInstituicao } from "@/requests/CRUD/InstituicaoFinanceira/listarInstituicao";
import { listarMicroInverosres } from "@/requests/CRUD/Inversor/listarInversores";
import { useAuth } from "@/src/contexts/authContext";
import { IValueLabel } from "@/types/formInterfaces";
import { FormatFields, GetGallery } from "@/utils";
import { calcMonthly, calcTotalConsumo } from "@/utils/calcules";
import { Tooltip } from "@mui/material";
import { Info } from "lucide-react";
import { useEffect, useState } from "react";
import { FieldValues } from "react-hook-form";
import { RiErrorWarningFill } from "react-icons/ri";
import { toast } from "react-toastify";
import Button from "../../components/Forms/Button";
import Container from "../../components/Forms/Container";
import Divider from "../../components/Forms/Divider";
import Input from "../../components/Forms/Input";
import InputGroup from "../../components/Forms/InputGroup";
import InputSelectComponent from "../../components/Forms/InputSelect";
const DadosGeraisAmpliacao = ({
  // form: formProposta,
  form,
  updateDadosGerados = false,
  inCard,
  categoriasTelhados,
  cidades,
  dadosCliente,
  defaultValues,
  dadosAmpliacao,
  parametros,
  itensComp,
  itensCompostos,
  stepInicializado,
  setStepInicializado,
  blockNextStep,
  isLoaded,
  ucs,
  dadosCard,
  distribuidores,
  distribuidoresNativos,
  fabricantes,
  camposPersonalizados,
  setDadosCard,
}: {
  ucs: any[];
  distribuidores: any[];
  distribuidoresNativos: any[];
  fabricantes: any[];
  camposPersonalizados?: any;
  [x: string]: any;
}) => {
  const [isLoadedDadosGerais, setIsLoadedDadosGerais] = useState(false);
  const [baterias, setBaterias] = useState<any[]>([]);
  const [distribuidoresCredenciais, setDistribuidoresCredenciais] =
    useState(false);
  const [distribuidoresFiltrados, setDistribuidoresFiltrados] = useState<any>(
    []
  );
  // const [dados, setdados] = useState();
  const [moduloSelecionado, setModuloSelecionado] = useState(
    form.control._formValues?.modulo?.value !== undefined
      ? form.control._formValues?.modulo?.value
      : defaultValues?.modulo_padrao_parametro
  );

  const [tipoAmpliacao, setTipoAmpliacao] = useState<any>(
    form.control._formValues?.tipo_ampliacao?.value ?? null
  );
  const [isMicroInversor, setIsMicroInversor] = useState(false);
  const [microInversores, setMicroInversores] = useState<any[]>([]);
  const [espessurasCabo, setEspessurasCabo] = useState<any[]>([]);

  const [mapImage, setMapImage] = useState<any>(dadosCard?.mapImage);
  const [isLoadingMapImage, setIsLoadingMapImage] = useState(
    dadosCard?.mapImage ? false : true
  );

  const tiposStringsInversores = [
    { value: "microinversor", label: "Microinversor" },
    { value: "inversor_on_grid", label: "INVERSOR STRING ON-GRID" },
    { value: "inversor_off_grid", label: "INVERSOR STRING OFF-GRID" },
    { value: "inversor_hibrido", label: "INVERSOR STRING HÍBRIDO" },
    {
      value: "inversor_string_microinversor",
      label: "Inversor String + Microinversor",
    },
  ];
  useEffect(() => {
    if (tipoAmpliacao === "0" && tipoAmpliacao === "1") {
      form.setValue(
        "potencia_inversores",
        dadosAmpliacao?.potenciaInversores_ampliacao
      );
    }
    if (tipoAmpliacao == "2") {
      form.setYupSchema((prev: any) => {
        const fields: any = prev.fields;

        ["quantidade_modulos_ampliacao", "modulo"].map((keyForm) => {
          delete fields[keyForm];
          form.setValue(keyForm, "");
        });
        prev.fields = fields;
        return prev;
      });
    }
  }, [tipoAmpliacao]);

  useEffect(() => {
    listarDistribuidoresCredenciais().then((credenciais) => {
      setDistribuidoresCredenciais(credenciais);

      const distribuidoresFiltrados = credenciais
        .filter((credencial: any) => credencial.status_credencial === "1")
        .map((credencial: any) => {
          // Procurando o distribuidor correspondente
          return distribuidoresNativos.find(
            (distribuidor) =>
              distribuidor.sigla_distribuidor === credencial.sigla_distribuidor
          );
        })
        .filter(Boolean); // Removendo distribuidores não encontrados

      setDistribuidoresFiltrados(distribuidoresFiltrados);
    });
    listarEspessurasCabos().then((res) => {
      setEspessurasCabo(res);
    });
  }, [distribuidoresNativos]);

  useEffect(() => {
    listarProductsFromCategory({ id: "16" }).then((baterias: any) => {
      setBaterias(baterias);
    });
    form.setYupSchema((prev: any) => {
      const fields: any = prev.fields;
      Object.keys(form.control._formValues)?.map((keyForm) => {
        delete fields[keyForm];
      });
      prev.fields = fields;
      return prev;
    });

    if (dadosCard?.caminho_imagem_endereco_coleta && !dadosCard?.mapImage) {
      baixarAwsBase64(dadosCard?.caminho_imagem_endereco_coleta).then(
        (result) => {
          const resultObject =
            typeof result === "string" ? JSON.parse(result) : result;
          const base64Content = resultObject.base64;
          setMapImage(`data:image/png;base64,${base64Content}`);
          setIsLoadingMapImage(false);
          setDadosCard((prev: any) => ({
            ...prev,
            mapImage: `data:image/png;base64,${base64Content}`,
          }));
        }
      );
    } else {
      setIsLoadingMapImage(false);
    }
  }, []);

  const { handleSubmit } = form;

  const {
    mediaConsumo,
    valor_simultaneidade_proposta,
    nome_tipoLigacao_proposta,
    concessionaria_proposta,
    id_concessionaria_proposta,
    disjuntor_proposta,
    preco_tarifa,
    fiob_tarifa,
    grupo_proposta,
    preco_aplicacao_tarifa,
    subgrupo_proposta,
    porcentagemGeracao,
    precoTotal_tarifa,
  } = form.control._formValues;
  const meses = [
    "Janeiro",
    "Fevereiro",
    "Março",
    "Abril",
    "Maio",
    "Junho",
    "Julho",
    "Agosto",
    "Setembro",
    "Outubro",
    "Novembro",
    "Dezembro",
  ];
  const [isFocusedArray, setIsFocusedArray] = useState(
    Array(meses.length).fill(false)
  );
  const [isLoading, setIsLoading] = useState(false);

  const [isFilled, setIsFilled] = useState(Array(meses.length).fill(false));
  const [mediaConsumoCampo, setMediaConsumoCampo] = useState(false);
  const [clienteNovo, setClienteNovo] = useState(false);
  const [openPopoverCadastro, setOpenPopoverCadastro] = useState(false);
  const [openPopoverCidade, setOpenPopoverCidade] = useState(false);
  const [nomeKeyUp, setNomeKeyUp] = useState("");
  const [cidadeSelecionada, setCidadeSelecionada] = useState("");
  const [telefone, setTelefone] = useState("");
  const [mouseOn, setMouseOn] = useState(false);
  const { valuesSession } = useAuth();
  const { session } = valuesSession();
  const id_usuario = session.id_usuario;
  const [clienteSelecionado, setClienteSelecionado] = useState({} as any);
  const [haErros, setHaErros] = useState(false);
  const [showOptions, setShowOptions] = useState(false);
  // const [ucBeneficiariaAtual, setUcBeneficiariaAtual] = useState(0);
  const [ucAtual, setUcAtual] = useState(0);
  const [contatoCadastrado, setContatoCadastrado] = useState<any[]>([]);
  const [selectedMedia, setSelectedMedia] = useState("Média");
  const [openSelectNegocio, setOpenSelectNegocio] = useState(false);
  const [negocios, setNegocios] = useState<IValueLabel[]>([]);
  const [selectedBusinessState, setSelectedBusinessState] = useState(false);
  const [newBusinessState, setNewBusinessState] = useState(false);
  const [cidadesFiltered, setCidadesFiltered] = useState<IValueLabel[]>([]);
  const [origem, setOrigem] = useState<IValueLabel[]>([]);
  const [instituicoesFinanceiras, setInstituicoesFinanceiras] = useState<any[]>(
    []
  );
  const [avisos, setAvisos] = useState<{ [key: string]: string }>({});

  const [distribuidor, setDistribuidor] = useState<any>(
    form?.control?._formValues?.distribuidor
  );
  const [modulos, setModulos] = useState<any[]>([]);
  const [modulosTemp, setModulosTemp] = useState<any[]>([]);

  const [distribuidoresSelecionados, setDistribuidoresSelecionados] = useState<
    any[]
  >(form?.control?._formValues?.distribuidores || []);
  const [potenciasModulosDistribuidores, setPoteciasModulosDistribuidores] =
    useState<any[]>([]);

  const [openModalBeneficiaria, setOpenModalBeneficiaria] = useState(false);

  const [simultaneidade, setSimultaneidade] = useState<IValueLabel[]>([]);
  const [showErros, setShowErros] = useState<[boolean, string]>([false, ""]);
  const [canEditTarifa, setCanEditTarifa] = useState(
    form.control._formValues.canEditTarifa
      ? form.control._formValues.canEditTarifa
      : false
  );

  const [kitProprio, setKitProrio] = useState(
    Object.keys(form?.control?._formValues)?.includes(
      "tipoComponentes_ampliacao"
    )
      ? form?.control?._formValues?.tipoComponentes_ampliacao?.value == "1"
      : defaultValues?.tipo_kit_parametro == 1
  );

  const { perfil } = useAuth();

  const { openGallery, setGallery } = GetGallery();

  useEffect(() => {
    form.setValue(
      "nomeTelhadoEscolhido",
      categoriasTelhados?.find(
        (telhado: any) =>
          telhado.id_categoria_telhado == dadosCard.tipoTelhado_ampliacao
      )?.nome_categoria_telhado
    );
    // nomeTelhadoEscolhido
    updateDadosGerados(false);

    if (form.control._formValues?.distribuidor) {
      setDistribuidor(form.control._formValues?.distribuidor);
    }

    listarOrigemCliente().then((res) =>
      setOrigem(
        res
          .filter((e: any) => e.status_origem_cliente == 1)
          .map((origem: any) => ({
            label: `${origem.nome_origem_cliente}`,
            value: `${origem.id_origem_cliente}`,
          }))
      )
    );
    listarInstituicao().then((res) => {
      setInstituicoesFinanceiras(res);
    });
    listarClassificacoes().then((res) =>
      setSimultaneidade(
        res
          .filter((e: any) => e.status_classificacao == 1)
          .map((simultaneidade: any) => ({
            label: `${simultaneidade.nome_classificacao}`,
            value: `${simultaneidade.id_classificacao}`,
          }))
      )
    );
    if (inCard) {
      // form.setValue("escolha_negocio", "");
      form.clearErrors("cidade");
    }

    if (mediaConsumo != "") {
      setMediaConsumoCampo(true);
    }
  }, []);
  function adicionarAviso(chave: string, mensagem: string) {
    setAvisos((prev) => ({ ...prev, [chave]: mensagem }));
  }
  function removerAvisoPorChave(chave: string) {
    setAvisos((prev) => {
      const novo = { ...prev };
      delete novo[chave];
      return novo;
    });
  }
  useEffect(() => {
    if (isLoaded) {
      const consumoAmpliacao_cliente =
        somaConsumos - Number(calcTotalConsumo(ucs) ?? 0);

      form.setValue("consumoAmpliacao_cliente", consumoAmpliacao_cliente);
      if (form.control._formValues?.tipoComponentes_ampliacao) {
        setKitProrio(
          form.control._formValues?.tipoComponentes_ampliacao?.value == "1"
        );
      } else {
        if (defaultValues?.tipo_kit_parametro == 1) {
          setKitProrio(true);
          const distribuidorInfo = distribuidores.find(
            (distribuidor) =>
              distribuidor.id_distribuidor ==
              defaultValues?.distribuidor_parametro
          );
          setDistribuidor(distribuidorInfo);
        } else if (defaultValues?.tipo_kit_parametro == 0) {
          setKitProrio(false);
        }
      }
      if (concessionaria_proposta !== "") {
        listarConcessionarias()
          .then((res: any) => {
            const findConcessionaria = res.find(
              (concessionaria: any) =>
                concessionaria.id_concessionaria === id_concessionaria_proposta
            );

            if (findConcessionaria) {
              const precoTarifaAplicacaoFormatado: any =
                FormatFields.desformatarNumeros(+preco_aplicacao_tarifa);

              const tarifaComImposto = precoTarifaAplicacaoFormatado;
              // precoTarifaAplicacaoFormatado  *
              // (1 + defaultValues.reajuste_rsi_parametro / 100);

              if (isNaN(tarifaComImposto)) {
                form.setValue("canEditTarifa", true);
                setCanEditTarifa(true);
                form.setValue(
                  "precoPadrao_tarifa",
                  Number(0).toFixed(7).toString()
                );
                form.setValue(
                  "precoTotal_tarifa",
                  Number(0).toFixed(7).toString().replace(".", ",")
                );
              } else {
                form.setValue(
                  "precoPadrao_tarifa",
                  tarifaComImposto.toFixed(7).toString()
                );
                form.setValue(
                  "precoTotal_tarifa",
                  tarifaComImposto.toFixed(7).toString().replace(".", ",")
                );
              }
            } else {
              form.setValue("canEditTarifa", true);
              setCanEditTarifa(true);
              form.setValue(
                "precoPadrao_tarifa",
                Number(0).toFixed(7).toString()
              );
              form.setValue(
                "precoTotal_tarifa",
                Number(0).toFixed(7).toString().replace(".", ",")
              );
            }
          })
          .finally(() => {
            setIsLoadedDadosGerais(true);
          });
      }
    } else if (isLoaded) {
      setIsLoadedDadosGerais(true);
    }

    listarMicroInverosres().then((res) => {
      setMicroInversores(res);
    });

    form.setValue(
      "potencia_modulo",
      form.control?._formValues?.potencia_modulo ||
        (defaultValues && defaultValues.potencia_modulos_parametro)
    );

    if (form.getValues("tipo_string_inversor")?.value == "microinversor") {
      setIsMicroInversor(true);
    }
    // form.setValue("")
  }, [isLoaded]);

  useEffect(() => {
    form.setYupSchema((prev: any) => {
      const fields: any = prev.fields;

      (kitProprio
        ? ["distribuidores", "potencia_modulo", "potencia_modulos"]
        : ["distribuidor", "modulo"]
      )?.map((keyForm) => {
        delete fields[keyForm];
      });
      prev.fields = fields;
      return prev;
    });
    form.setValue("kitManual", kitProprio);
  }, [kitProprio]);

  useEffect(() => {
    if (distribuidor) {
      listarProductsFromCategory({
        id: "9",
        distribuidor: distribuidor.id_distribuidor,
        tipoOrigem_item: kitProprio ? "0" : "1",
      }).then((modulos) => {
        const diff = Number(defaultValues?.diff_potencia_parametro) || 0;

        const potenciaBase =
          Number(dadosAmpliacao?.potenciaModulos_ampliacao) || 0;

        setModulos(
          modulos.filter((m: any) => {
            if (tipoAmpliacao === "1") return true;

            const potenciaItem = Number(m.potencia_item);
            return (
              potenciaItem >= potenciaBase - diff &&
              potenciaItem <= potenciaBase + diff
            );
          })
        );

        const newModulosTemp = modulos.filter((m: any) => {
          const potenciaItem = Number(m.potencia_item);
          return (
            potenciaItem >= potenciaBase - diff &&
            potenciaItem <= potenciaBase + diff
          );
        });
        setModulosTemp(newModulosTemp);

        const moduloAtual = form.getValues("modulo");
        if (
          tipoAmpliacao === "0" &&
          moduloAtual.potencia_item != potenciaBase &&
          !newModulosTemp?.some((m: any) => m.id_item == moduloAtual?.value)
        ) {
          form.setValue("modulo", "");
        }

        if (defaultValues.modulo_padrao_parametro && modulos) {
          const modulo = modulos.find(
            (modulo: any) =>
              modulo.id_item == defaultValues.modulo_padrao_parametro
          );
          if (modulo) {
            form.setValue("potencia_modulo", modulo?.potencia_item);
          }
        }
      });
    }
  }, [distribuidor, tipoAmpliacao]);

  // useEffect(() => {
  //   if (distribuidor) {
  //     listarProductsFromCategory({
  //       id: "9",
  //       distribuidor: distribuidor.id_distribuidor,
  //     }).then((modulos) => {
  //       setModulos(
  //         modulos.filter((m: any) => {
  //           if (tipoAmpliacao === "1") return true;
  //           return (
  //             Number(m.potencia_item) ==
  //             dadosAmpliacao?.potenciaModulos_ampliacao
  //           );
  //         })
  //       );
  //       setModulosTemp(
  //         modulos.filter(
  //           (m: any) =>
  //             Number(m.potencia_item) ==
  //             dadosAmpliacao?.potenciaModulos_ampliacao
  //         )
  //       );

  //       if (defaultValues.modulo_padrao_parametro && modulos) {
  //         const modulo = modulos.find(
  //           (modulo: any) =>
  //             modulo.id_item == defaultValues.modulo_padrao_parametro
  //         );
  //         if (modulo) {
  //           form.setValue("potencia_modulo", modulo?.potencia_item);
  //         }
  //       }
  //     });
  //   }
  // }, [distribuidor, tipoAmpliacao]);

  useEffect(() => {
    if (form.watch("tipoComponentes_ampliacao")?.value === "0") {
      if (distribuidoresFiltrados.length === 0) {
        adicionarAviso(
          "sem-dist",
          "Atenção!!! Nenhum Distribuidor Nativo está ativo. Verifique com o ADM do Sistema."
        );
      } else {
        removerAvisoPorChave("sem-dist");
      }
    } else {
      removerAvisoPorChave("sem-dist");
    }
  }, [form.watch("tipoComponentes_ampliacao"), distribuidoresFiltrados]);
  useEffect(() => {
    if (distribuidoresNativos && distribuidoresSelecionados.length != 0) {
      listarPotenciasModulosDistribuidores({
        distribuidores: distribuidoresSelecionados
          .map((distribuidor) => distribuidor.id_distribuidor)
          .join(","),
      }).then(setPoteciasModulosDistribuidores);
    }
  }, [distribuidoresSelecionados]);

  useEffect(() => {
    if (
      isLoadedDadosGerais &&
      distribuidoresSelecionados.length == 0 &&
      distribuidoresFiltrados.length > 0
    ) {
      setDistribuidoresSelecionados(distribuidoresFiltrados);
    }
  }, [distribuidoresNativos, isLoadedDadosGerais]);

  const handleCalcular = async (data: FieldValues) => {
    setIsLoading(true);

    if (tipoAmpliacao === "0" && !data["quantidade_modulos_ampliacao"]) {
      setIsLoading(false);
      return toast.error("Informe a quantidade de módulos para prosseguir!");
    }
    if (tipoAmpliacao === "0" && !data["modulo"]) {
      setIsLoading(false);
      return toast.error("Selecione um módulo para prosseguir!");
    }
    if (tipoAmpliacao === "3" && !data["quantidade_baterias_ampliacao"]) {
      setIsLoading(false);
      return toast.error("Informe a quantidade de baterias para prosseguir!");
    }
    if (tipoAmpliacao === "3" && !data["bateria"]) {
      setIsLoading(false);
      return toast.error("Selecione um tipo de bateria para prosseguir!");
    }

    if (isMicroInversor && !data["id_microInversor"]) {
      setIsLoading(false);
      return toast.error("Selecione um microinversor para prosseguir!");
    }

    const { porcentagemGeracao, potencia_modulo } = form.control._formValues;

    // if (+potencia_modulo < 300 || +potencia_modulo > 1000) {
    //   return toast.error(
    //     "A potência do módulo deve estar entre 300Wp e 1000Wp!"
    //   );
    // }

    let mediaConsumoTotal: any = 0;

    let mediaConsumoMedioBeneficiariaLet = 0;
    let mediaConsumoMensalBeneficiariaLet = 0;

    ucs
      // .filter((uc: any, index: number) => index)
      .map((ucBeneficiaria) => {
        if (ucBeneficiaria.tipoValor == "Média") {
          mediaConsumoMedioBeneficiariaLet += Number(ucBeneficiaria.valor || 0);
        } else {
          ucBeneficiaria.valor.map((mes: any) => {
            // mediaConsumoMensalBeneficiariaLet += Number(mes || 0);
            mediaConsumoMensalBeneficiariaLet +=
              mes === ""
                ? ucBeneficiaria.valor.reduce(
                    (acc: any, cur: any) => acc + (parseFloat(cur) || 0),
                    0
                  ) /
                  ucBeneficiaria.valor.filter(
                    (val: number | string) => val !== ""
                  ).length
                : Number(mes);
          });
        }
      });

    if (mediaConsumoMensalBeneficiariaLet != 0) {
      mediaConsumoMensalBeneficiariaLet =
        mediaConsumoMensalBeneficiariaLet / 12;
    }
    const consumoTotal =
      mediaConsumoMedioBeneficiariaLet + mediaConsumoMensalBeneficiariaLet;

    if (consumoTotal != 0) {
      mediaConsumoTotal = Number(mediaConsumoTotal) + Number(consumoTotal);
    }

    const potenciAn =
      somaConsumos *
      (+FormatFields.desformatarNumeros(porcentagemGeracao) / 100);
    const potenciBn = somaConsumos + Number(potenciAn);
    const potenciaSistemaB = potenciBn / 100;

    const aumentoConsumo =
      mediaConsumoTotal *
      (+FormatFields.desformatarNumeros(porcentagemGeracao) / 100);

    const consumoComAumento = mediaConsumoTotal + aumentoConsumo;
    const totalModulos = form.getValues("quantidade_modulos_ampliacao");

    const potenciaKwp = (potencia_modulo * Number(totalModulos)) / 1000;

    const setValue = form.setValue;
    setValue("consumoTotal", somaConsumos);

    setValue("potenciaKwp", potenciaKwp);
    setValue("idUsuario", id_usuario);
    if (clienteNovo) {
      handleValidaTelefone(telefone);
    }

    setIsLoading(false);
    if (!haErros) {
      // Object.keys(form.control._formValues)?.map((keyForm) => {
      //   formProposta.setValue(keyForm, form.control._formValues[keyForm]);
      // });
      prosseguirEtapa();
    }
  };
  useEffect(() => {
    const tipo_ampliacao = form.watch("tipo_ampliacao" as any);
    if (tipo_ampliacao?.value === "0") {
      adicionarAviso(
        "tipoAmplia",
        "Atenção!! Neste caso só será mostrado os módulos com potências compatíveis com o SISTEMA ORIGEM, de acordo com a configuração de limites determinadas nas Configurações Gerais, Proposta no campo Diferença de Potência na Ampliação."
      );
    } else {
      removerAvisoPorChave("tipoAmplia");
    }
  }, [form.watch("tipo_ampliacao" as any)]);
  const prosseguirEtapa = () => {
    const haErrosForm = Object.keys(form.errors).length > 0;

    if (!haErrosForm) {
      if (clienteNovo) {
        handleSaveNovoCliente();
      }
      updateDadosGerados(true);
    }
  };

  const handleValidaTelefone = (e: any) => {
    if (e != "") {
      verificaTelefone(e).then((res: any) => {
        if (res.body) {
          setContatoCadastrado(res.body);

          if (clienteNovo) {
            setHaErros(true);
          }

          form.control.setError("telefone" as `root.${string}`, {
            type: "required",
            message: "Telefone já cadastrado",
          });
        } else {
          setHaErros(false);
          setContatoCadastrado([]);
          form.clearErrors("telefone");
        }
      });
    }
  };
  const listarNegocioCliente = (id_cliente: number) => {
    listarNegociosCliente({ cliente_coleta: id_cliente }).then((res) => {
      // Criar um array com a opção fixa e os negócios retornados
      if (res.length == 0) {
        setSelectedBusinessState(true);
      }

      const opcaoEscolha = { label: "Escolha uma opção", value: "" };
      const negocios = res
        .filter(
          (e: any) =>
            e.nome_negocio_coleta != null &&
            +e.status_coleta < 8 &&
            e.status_coleta != "100"
        )
        .map((negocio: any) => ({
          label: `${negocio.nome_negocio_coleta}`,
          value: `${negocio.id_coleta}`,
        }));

      // Adicionar a opção fixa ao início do array
      const options = [opcaoEscolha, ...negocios];

      // Definir as opções no estado
      setNegocios(options);
    });
  };

  const handleSaveNovoCliente = () => {
    const { nome, telefone, cidade } = form.control._formValues;
    const exp = cidade.label.split(" - ");
    const data = {
      nome_cliente: nome,
      telefone1_cliente: telefone,
      cidade_cliente: exp[0],
      estado_cliente: exp[1],
      responsavel_cliente: id_usuario,
    };
    cadastrarNovoContato(data).then((res) => {
      if (res.status) {
        const idCliente = res.body;
        const setValue = form.setValue;
        setValue("idCliente", idCliente);
        setClienteNovo(false);
      }
    });
  };
  const handlePopoverCliente = (value: any) => {
    setClienteSelecionado(value);

    setOpenSelectNegocio(true);
    setOpenPopoverCadastro(!openPopoverCadastro);
    if (value != undefined) {
      if (
        value.nome_cliente != undefined ||
        value.cidade_cliente != undefined ||
        value.telefone1_cliente != undefined
      ) {
        const nome_cliente = value.nome_cliente;
        const id_cliente = value.id_cliente;
        const cidade_cliente = value.cidade_cliente;
        const estado_cliente = value.estado_cliente;
        const telefone1_cliente = value.telefone1_cliente;
        listarNegocioCliente(id_cliente);
        form.setValue("nome", nome_cliente);
        form.setValue("idCliente", id_cliente);

        form.setValue("uc_cliente", "");

        form.setValue("telefone", telefone1_cliente);
        cidades.map((cidade: any) => {
          if (cidade.label == `${cidade_cliente} - ${estado_cliente}`) {
            setCidadeSelecionada(cidade.value);
            form.setValue("cidade", cidade);
          }
        });
      }
    }
  };
  const [tipoInversor, setTipoInversor] = useState(
    form.control._formValues["tipo_string_inversor"]?.value
  );
  const handleCadastroCliente = () => {
    setOpenPopoverCadastro(!openPopoverCadastro);
  };
  const handleCadastroNovoCliente = () => {
    setClienteNovo(true);
    form.setValue("escolha_negocio", "");
    setOpenPopoverCadastro(!openPopoverCadastro);
  };
  const [fabricantesFilter, setFabricantesFilter] = useState<any>([]);
  useEffect(() => {
    setFabricantesFilter(fabricantes);
  }, [fabricantes]);

  const selectedBusiness = () => {
    const { escolha_negocio } = form.control._formValues;

    if (escolha_negocio == "" || escolha_negocio.value == "") {
      form.control.setError("escolha_negocio" as `root.${string}`, {
        type: "required",
        message: "Selecione um negócio!",
      });
      setTimeout(() => {
        form.clearErrors("escolha_negocio");
      }, 3000);
    } else {
      form.clearErrors("escolha_negocio");
      setOpenSelectNegocio(false);
    }
  };

  const createNewBusiness = () => {
    const { nome_negocio } = form.control._formValues;
    const validaNome = negocios.some((e) => e.label === nome_negocio);
    form.setValue("escolha_negocio", "");
    if (validaNome) {
      form.control.setError("nome_negocio" as `root.${string}`, {
        type: "required",
        message: "Já existe um negócio com mesmo nome!",
      });
      setTimeout(() => {
        form.clearErrors("nome_negocio");
      }, 3000);
      return false;
    }

    if (nome_negocio == "") {
      form.control.setError("nome_negocio" as `root.${string}`, {
        type: "required",
        message: "Digite nome do negócio!",
      });
      setTimeout(() => {
        form.clearErrors("nome_negocio");
      }, 3000);
    } else {
      form.clearErrors("nome_negocio");
      setOpenSelectNegocio(false);
    }
  };

  const FilterOptions = (e: string) => {
    if (e.length >= 3) {
      const filteredCities = cidades.filter((y: any) =>
        y.label.toLowerCase().includes(e.toLowerCase())
      );

      setCidadesFiltered(filteredCities);

      setShowOptions(true);
    } else {
      setShowOptions(false);
    }
  };

  useEffect(() => {
    const { marca_inversor } = form.control._formValues;

    if (!marca_inversor || !marca_inversor?.value) {
      form.setValue("marca_inversor", defaultValues?.fabricante_parametro);
    }
  }, [fabricantesFilter]);

  useEffect(() => {
    if (
      modulos.length > 0 &&
      (tipoInversor === "inversor_off_grid" ||
        tipoInversor === "inversor_hibrido")
    ) {
      const modulosFiltered = modulos.filter(
        (a: any) => a.suportaOffGrid_item === "1"
      );
      const moduloAtual =
        form.control._formValues.modulo?.value ||
        (defaultValues && defaultValues.modulo_padrao_parametro);

      setModulosTemp(modulosFiltered);
      if (modulosFiltered.length === 0) {
        toast.error("Sem módulos que suportam OFF GRID");
        form.setValue("modulo", "");
      } else if (!modulosFiltered.some((a: any) => a.id_item === moduloAtual)) {
        form.setValue("modulo", "");
      }
    } else {
      setModulosTemp(modulos);
    }
  }, [tipoInversor, modulos]);

  const somaConsumos = ucs
    .filter((u: any) => u.isAmpliacao_uc_coleta === "1")
    .map((uc: any) =>
      uc.tipoValor === "Mensal" ? calcMonthly(uc.valor) : Number(uc.valor) || 0
    )
    .reduce((acc: number, cur: number) => acc + cur, 0);
  return (
    <Container className="max-sm:h-auto shadow-none overflow-auto rounded-none">
      {isLoadedDadosGerais ? (
        <div className="text-boxdark dark:text-white" key={form.key}>
          <div className="overflow-auto">
            {!inCard && (
              <>
                <p className="text-lg  mb-5">Dados do Cliente</p>
                <Divider />
                <InputGroup>
                  <div className="grid w-full">
                    <Input
                      onKeyUp={(e: React.KeyboardEvent<HTMLInputElement>) =>
                        setNomeKeyUp(e.currentTarget.value)
                      }
                      onFocus={handleCadastroCliente}
                      autoComplete="off"
                      formulario={form}
                      required
                      error="Digite o nome"
                      name="nome"
                      label="Nome do Cliente"
                      onMouseLeave={() => setMouseOn(false)}
                      onMouseEnter={() => setMouseOn(true)}
                    />
                    <PopoverCadastroCliente
                      nomeDigitado={nomeKeyUp}
                      clienteNovo={handleCadastroNovoCliente}
                      clienteSelecionado={(e: any) => {
                        setHaErros(false);
                        form.clearErrors("telefone");
                        setContatoCadastrado([]);
                        setClienteNovo(false);
                        handlePopoverCliente(e);
                      }}
                      open={openPopoverCadastro}
                    />
                  </div>

                  <InputSelectComponent
                    defaultValue={cidadeSelecionada}
                    options={showOptions ? cidadesFiltered : []}
                    formulario={form}
                    required
                    minimumCharacter
                    captureInputChange={FilterOptions}
                    onFocus={() => setOpenPopoverCidade(!openPopoverCidade)}
                    error="Selecione a cidade"
                    name="cidade"
                    label="Cidade - Estado"
                  />
                  <div className="flex flex-col w-full">
                    <Input
                      autoComplete="off"
                      formulario={form}
                      mascara="telefone"
                      defaultValue={clienteSelecionado.telefone1_cliente}
                      required
                      onChange={(e: any) => {
                        setTelefone(e.target.value);
                        handleValidaTelefone(e.target.value);
                      }}
                      error="Digite o telefone"
                      label="Telefone do Cliente"
                      name="telefone"
                      disabled={!clienteNovo}
                    />
                    <DropdownMenu>
                      {contatoCadastrado.length > 0 && (
                        <DropdownMenuTrigger title="Colunas" className="w-fit">
                          <span className="text-sm underline cursor-pointer flex items-center gap-2">
                            Ver cadastro
                          </span>
                        </DropdownMenuTrigger>
                      )}
                      <DropdownMenuContent>
                        <div className="grid text-sm w-44">
                          <span className="p-1">Cliente cadastrado:</span>
                          <div className="border-b border-stroke mb-1"></div>
                          {contatoCadastrado.map((res: any, index: number) => (
                            <>
                              <span>{res.nome_cliente}</span>
                              <span className="text-xs text-opacity-80">
                                {res.cidade_cliente} - {res.estado_cliente}
                              </span>
                            </>
                          ))}
                        </div>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </div>
                  {clienteNovo && (
                    <InputSelectComponent
                      formulario={form}
                      required
                      error="Selecione a origem"
                      name="origem"
                      label="Origem"
                      options={origem}
                    />
                  )}
                </InputGroup>
                {clienteNovo && (
                  <InputGroup>
                    <Input
                      formulario={form}
                      label="Nome do negócio"
                      required
                      name="nome_negocio"
                      type="text"
                    />
                    <InputSelectComponent
                      formulario={form}
                      name="tipoFatura"
                      label="Perfil de Consumo"
                      options={simultaneidade}
                    />
                    <Input
                      formulario={form}
                      label="UC"
                      name="uc_cliente"
                      type="text"
                      mascara="numerico"
                    />
                  </InputGroup>
                )}
              </>
            )}
            <ModalComponente
              opened={openSelectNegocio}
              onClose={() => setOpenSelectNegocio(false)}
              hasSaveButton={false}
              className=" "
              hasCloseBtn={false}
            >
              <div className="w-full text-black dark:text-white">
                <p className="text-center mb-9 ">
                  Este cliente já possui um negócio, o que deseja fazer?
                </p>
                <div className="md:flex grid  justify-center md:gap-13 md:divide-x ">
                  <div className="md:pl-8">
                    <span className="pb-3 flex  items-center gap-2">
                      Selecionar um existente
                      <Tooltip
                        title={
                          "Irá gerar uma proposta encima do negócio selecionado"
                        }
                      >
                        <Info size={14} className="text-bodydark" />
                      </Tooltip>
                    </span>
                    <InputSelectComponent
                      name="escolha_negocio"
                      formulario={form}
                      defaultValue={""}
                      options={negocios}
                      onChange={(e: any) => {
                        form.setValue("nome_negocio", "");
                        setNewBusinessState(e.value == "" ? false : true);
                      }}
                    />
                    <Button
                      onClick={selectedBusiness}
                      disabled={selectedBusinessState}
                      type="button"
                      className="self-center mt-3 w-full flex  text-sm"
                    >
                      Selecionar
                    </Button>
                  </div>
                  <div className="md:pl-8 justify-center flex flex-col ">
                    <span className="pb-3 ">Criar novo negócio</span>
                    <Input
                      onKeyUp={(e) => {
                        const selectedValue = (e.target as HTMLSelectElement)
                          .value;
                        setSelectedBusinessState(
                          selectedValue === "" ? false : true
                        );
                      }}
                      name="nome_negocio"
                      placeholder="Dê um nome ao negócio"
                      formulario={form}
                    />
                    <Button
                      disabled={newBusinessState}
                      onClick={createNewBusiness}
                      type="button"
                      className="self-center mt-3 flex w-full text-sm"
                    >
                      Criar
                    </Button>
                  </div>
                  `
                </div>
              </div>
            </ModalComponente>
            <p
              className={`text-lg max-sm:text-sm pb-2 ${inCard ? "" : "pt-17"}`}
            >
              Dados do Negócio
            </p>
            <div className="flex flex-col max-sm:text-xs bg-gray-2 border-gray dark:bg-graydark border-2 rounded p-2">
              <div className="flex flex-row flex-wrap gap-2 justify-stretch">
                <div className="flex flex-col flex-1 lg:min-w-75">
                  <div>
                    <span className="font-bold">Simultaneidade:</span>{" "}
                    {valor_simultaneidade_proposta} %
                  </div>
                  <div>
                    <span className="font-bold">Tipo de Ligação:</span>{" "}
                    {nome_tipoLigacao_proposta}
                  </div>
                  <div>
                    <span className="font-bold">Disjuntor:</span>{" "}
                    {disjuntor_proposta}
                  </div>
                  <div>
                    <span className="font-bold">Concessionária:</span>{" "}
                    {concessionaria_proposta}
                  </div>
                  {/* <div>
                    <span className="font-bold">Grupo:</span> {grupo_proposta}
                  </div>
                  <div>
                    <span className="font-bold">Subgrupo:</span>{" "}
                    {subgrupo_proposta}
                  </div> */}
                  <div>
                    <span className="font-bold">Qtde de UCs:</span>{" "}
                    {
                      ucs.filter((u: any) => u.isAmpliacao_uc_coleta !== "1")
                        ?.length
                    }
                  </div>
                  <div>
                    <span className="font-bold">Média de consumo Atual:</span>{" "}
                    {somaConsumos}
                  </div>
                  <div>
                    <span className="font-bold">Consumo de Ampliação:</span>{" "}
                    {somaConsumos - Number(calcTotalConsumo(ucs) ?? 0)}
                  </div>
                  <div>
                    <span className="font-bold">
                      Potência do Módulo de Origem:
                    </span>{" "}
                    {dadosAmpliacao?.potenciaModulos_ampliacao}Wp
                  </div>
                </div>
                <div className="flex flex-col gap-2 h-44 overflow-auto flex-1 max-sm:w-full lg:min-w-65">
                  {ucs
                    .filter((u: any) => u.valor != 0)
                    .reduce((acc: any[], uc: any) => {
                      // Procura se a UC já existe no agrupado
                      const existing = acc.find((item) => item.uc === uc.uc);

                      if (existing) {
                        // Se for ampliação, adiciona no array de ampliações
                        if (uc.isAmpliacao_uc_coleta === "1") {
                          existing.ampliacoes.push(uc);
                        }
                      } else {
                        // Cria o objeto inicial com possíveis ampliações
                        acc.push({
                          ...uc,
                          ampliacoes:
                            uc.isAmpliacao_uc_coleta === "1" ? [uc] : [],
                        });
                      }
                      return acc;
                    }, [])
                    .sort((a, b) => {
                      if (
                        a.isGeradora_uc_coleta === "1" &&
                        b.isGeradora_uc_coleta !== "1"
                      )
                        return -1;
                      if (
                        a.isGeradora_uc_coleta !== "1" &&
                        b.isGeradora_uc_coleta === "1"
                      )
                        return 1;
                      return 0;
                    })
                    .map((uc, index) => (
                      <div
                        key={index}
                        className="bg-white dark:bg-black border-gray border-2 px-2 rounded-xl"
                      >
                        <div>
                          <span className="font-bold">
                            Número da UC{" "}
                            {uc.isGeradora_uc_coleta === "1"
                              ? "Geradora"
                              : "Beneficiária"}
                            :
                          </span>{" "}
                          {uc.uc}
                        </div>

                        <div>
                          <span className="font-bold">
                            Média de consumo de origem da UC:
                          </span>{" "}
                          {uc.tipoValor == "Mensal"
                            ? (
                                uc.valor.reduce(
                                  (acc: number, curr: number | string) =>
                                    acc + +curr,
                                  0
                                ) /
                                uc.valor.filter(
                                  (val: number | string) => val !== ""
                                ).length
                              )?.toFixed(0)
                            : uc.valor}
                        </div>

                        {uc.ampliacoes.map((amp: any, i: number) => (
                          <div key={i}>
                            <span className="font-bold">
                              Média de consumo atual da UC:
                            </span>{" "}
                            {amp.tipoValor == "Mensal"
                              ? (
                                  amp.valor.reduce(
                                    (acc: number, curr: number | string) =>
                                      acc + +curr,
                                    0
                                  ) /
                                  amp.valor.filter(
                                    (val: number | string) => val !== ""
                                  ).length
                                )?.toFixed(0)
                              : amp.valor}
                          </div>
                        ))}
                      </div>
                    ))}
                </div>

                <div className="flex flex-col gap-2 h-44 overflow-auto flex-1  max-sm:w-full lg:min-w-65 items-center">
                  <div className="font-semibold text-error">
                    Confira abaixo se a imagem do endereço de instalação está
                    correta, se não salve novamente!
                  </div>
                  <div className="flex relative overflow-hidden items-center p-2 bg-black-2/10 w-fit rounded-md">
                    {isLoadingMapImage ? (
                      <div className="flex relative overflow-hidden items-center justify-center z-1 bg-white dark:bg-black-2">
                        <LoaderSun height={60} />
                      </div>
                    ) : (
                      <figure
                        className="max-w-40 max-h-[100%] overflow-hidden bg-error/5 z-1 cursor-pointer"
                        onClick={() => {
                          setGallery([
                            {
                              src: mapImage,
                              name: "imagem_endereco.png",
                            },
                          ]);
                          openGallery(0, false);
                        }}
                      >
                        {mapImage ? (
                          <img
                            src={mapImage}
                            alt="Map Address Image"
                            style={{
                              width: "100%",
                              height: "100%",
                              objectFit: "cover",
                            }}
                          />
                        ) : (
                          <div>Sem Imagem de Endereço</div>
                        )}
                      </figure>
                    )}
                  </div>
                </div>
              </div>
            </div>
            <Divider />
            {Object.entries(avisos).map(([key, mensagem]) => (
              <div
                key={key}
                className=" mb-3 w-full flex border items-center  bg-[#fff5ea]  gap-2 px-4 p-4 rounded-md border-[#fcdcaa] shadow-sm"
              >
                <div className="rounded-full p-1 shadow-md bg-[#fef9f6]">
                  <RiErrorWarningFill size={20} color="#ffb747" />
                </div>
                <div className="grid gap-2">
                  <p className="text-black">&bull; {mensagem}</p>
                </div>
              </div>
            ))}
            <InputGroup>
              {defaultValues && (
                <>
                  <InputSelectComponent
                    name="tipo_ampliacao"
                    label="Tipo de Ampliação"
                    formulario={form}
                    skipEffect
                    options={[
                      {
                        value: "0",
                        label: "Módulos",
                      },
                      {
                        value: "1",
                        label: "Módulos e Inversores",
                      },
                      {
                        value: "2",
                        label: "Outros",
                      },
                      {
                        value: "3",
                        label: "Bateria",
                      },
                    ].map((a: any) => ({
                      value: a.value,
                      label: a.label,
                    }))}
                    onChange={(e: any) => {
                      setTipoAmpliacao(e.value);
                    }}
                    required
                    error="Informe um Tipo de Ampliacao"
                  />

                  <InputSelectComponent
                    name="tipoComponentes_ampliacao"
                    label="Tipo de Componentes"
                    formulario={form}
                    options={[
                      { label: "Distribuidores", value: "0" },
                      { label: "Próprios", value: "1" },
                    ]}
                    onChange={(e: any) => {
                      setKitProrio(e?.value == "1");
                      if (
                        e?.value == "0" &&
                        !["microinversor", "inversor_on_grid"].includes(
                          form.control._formValues.tipo_string_inversor?.value
                        )
                      ) {
                        form.setValue("tipo_string_inversor", "");
                      }
                    }}
                    required
                    error="Selecione o tipo do kit"
                    defaultValue={
                      Object.keys(form?.control?._formValues)?.includes(
                        "tipoComponentes_ampliacao"
                      )
                        ? form?.control?._formValues?.tipoComponentes_ampliacao
                            ?.value
                        : defaultValues?.tipo_kit_parametro
                    }
                    skipEffect
                  />

                  {kitProprio ? (
                    <InputSelectComponent
                      key={1}
                      className="w-full"
                      name="distribuidor"
                      label="Distribuidor"
                      formulario={form}
                      options={distribuidores
                        .filter(
                          (distribuidor) =>
                            distribuidor.isFornecedor_distribuidor != "1" &&
                            distribuidor.status_distribuidor == "1"
                        )
                        .map((distribuidor) => ({
                          ...distribuidor,
                          label: distribuidor.nome_distribuidor,
                          value: distribuidor.id_distribuidor,
                        }))}
                      required
                      error="Selecione ao menos um Distribuidor"
                      onChange={(e: any) => {
                        setDistribuidor(e);

                        let filter = fabricantes.filter(
                          (a: any) => a.codDistribuidor_item == e.value
                        );

                        setFabricantesFilter(filter);
                        form.setValue("modulo", "");
                      }}
                      defaultValue={
                        form?.control?._formValues?.distribuidor?.value ||
                        defaultValues.distribuidor_parametro
                      }
                      skipEffect
                    />
                  ) : (
                    <InputSelectComponent
                      name="distribuidor"
                      key={3}
                      label="Distribuidor"
                      formulario={form}
                      options={distribuidoresFiltrados
                        .filter((dist: any) => dist.status_distribuidor == "1")
                        .map((distribuidor: any) => ({
                          ...distribuidor,
                          label: distribuidor.nome_distribuidor,
                          value: distribuidor.id_distribuidor,
                        }))}
                      required
                      error="Selecione ao menos um Distribuidor"
                      onChange={(e: any) => {
                        setDistribuidor(e);

                        let filter = fabricantes.filter(
                          (a: any) => a.codDistribuidor_item == e.value
                        );

                        setFabricantesFilter(filter);
                        form.setValue("modulo", "");
                      }}
                      // defaultValue={distribuidoresFiltrados
                      //   .filter((dist: any) => dist.status_distribuidor == "1")
                      //   .map((distribuidor: any) => distribuidor.id_distribuidor)
                      //   .join(",")}
                      defaultValue={
                        form?.control?._formValues?.distribuidor?.value ||
                        defaultValues.distribuidor_parametro
                      }
                      // skipEffect
                    />
                    // <InputSelectComponent
                    //   name="distribuidores"
                    //   key={3}
                    //   label="Distribuidores"
                    //   formulario={form}
                    //   options={distribuidoresFiltrados
                    //     .filter((dist: any) => dist.status_distribuidor == "1")
                    //     .map((distribuidor: any) => ({
                    //       ...distribuidor,
                    //       label: distribuidor.nome_distribuidor,
                    //       value: distribuidor.id_distribuidor,
                    //     }))}
                    //   isMulti
                    //   required
                    //   error="Selecione ao menos um Distribuidor"
                    //   onChange={(e: any) => setDistribuidoresSelecionados(e)}
                    //   // defaultValue={distribuidoresFiltrados
                    //   //   .filter((dist: any) => dist.status_distribuidor == "1")
                    //   //   .map((distribuidor: any) => distribuidor.id_distribuidor)
                    //   //   .join(",")}
                    //   defaultValue={
                    //     form?.control?._formValues?.distribuidores
                    //       ?.map((dist: any) => dist?.value)
                    //       ?.join(",") || defaultValues.distribuidor_parametro
                    //   }
                    //   // skipEffect
                    // />
                  )}
                  {tipoAmpliacao != "2" && tipoAmpliacao != "3" ? (
                    <>
                      <InputSelectComponent
                        key={2}
                        name="modulo"
                        label={
                          <div className="w-fit flex flex-row gap-1 items-center">
                            <div>Módulo</div>
                            <Button
                              type="button"
                              className="bg-primary flex flex-row gap-2 rounded-full p-0"
                              onClick={(e: any) => {
                                e.stopPropagation();
                                handleSweetAlert({
                                  icon: "info",
                                  showDenyButton: false,
                                  confirmButtonText: "Ok",
                                  title: "Módulo",
                                  html: (
                                    <div>
                                      Atenção!! Caso não listar nenhum módulo,
                                      verifique se existe algum módulo ativo com
                                      a potência igual a potencia origem ou com
                                      potencia origem mais o valor da diferença
                                      ou menos o valor da diferença informado lá
                                      nos parâmetros
                                    </div>
                                  ),
                                });
                              }}
                            >
                              <Info />
                            </Button>
                          </div>
                        }
                        formulario={form}
                        options={modulosTemp.map((modulo) => ({
                          ...modulo,
                          label: `${modulo.descricao_item} - ${+modulo.potencia_item}W`,
                          value: modulo.id_item,
                        }))}
                        // required
                        error="Selecione o Módulo"
                        onChange={(e: any) => {
                          // setModuloSelecionado(e.value);
                          form.setValue("potencia_modulo", e?.potencia_item);
                        }}
                        defaultValue={
                          form.control._formValues.modulo?.value ||
                          (defaultValues &&
                            defaultValues.modulo_padrao_parametro)
                        }
                        skipEffect
                      />
                      {/* <InputSelectComponent
                        name="marcaModulo_ampliacao"
                        label="Fabricante Módulo"
                        formulario={form}
                        options={[
                          { label: "Todos", value: "*" },
                          ...fabricantesFilter.filter(
                            (fabricante: any) =>
                              fabricante.tipos_itens_fabricante
                                ?.split(",")
                                .includes("9") ||
                              fabricante.tipos_itens_fabricante
                                ?.split(",")
                                .includes("*")
                          ),
                        ].map((fabricante: any) => ({
                          label: fabricante.nome_fabricante,
                          value: fabricante.id_fabricante,
                        }))}
                        error="Selecione o Fabricante"
                        defaultValue={
                          form.control._formValues.marca_inversor?.value ||
                          (defaultValues && defaultValues.fabricante_parametro)
                        }
                      /> */}
                      <Input
                        label="Quantidade de Módulos"
                        name="quantidade_modulos_ampliacao"
                        mascara="numerico"
                        formulario={form}
                        // required
                        error="Informe a quantidade de módulos"
                        defaultValue={
                          form.control._formValues
                            .quantidade_modulos_ampliacao ||
                          (defaultValues && defaultValues.quantidade_modulos)
                        }
                      />
                    </>
                  ) : (
                    tipoAmpliacao === "3" && (
                      <>
                        <InputSelectComponent
                          name="bateria"
                          label="Bateria"
                          formulario={form}
                          // required
                          // defaultValue={
                          //   form.control._formValues.tipo_bateria?.value ||
                          //   (defaultValues &&
                          //     defaultValues.tipo_bateria_parametro)
                          // }
                          options={baterias.map((bateria) => ({
                            ...bateria,
                            label: bateria.descricao_item,
                            value: bateria.id_item,
                          }))}
                        />
                        <Input
                          name="quantidade_baterias_ampliacao"
                          label="Quantidade de Baterias"
                          mascara="numerico"
                          formulario={form}
                          // required
                        />
                      </>
                    )
                  )}
                </>
              )}
            </InputGroup>
            {/* {tipoAmpliacao === "1" && (
              <ComponentesAmpliacao
                form={form}
                blockNextStep={blockNextStep}
                stepInicializado={stepInicializado}
                parametros={parametros}
                setStepInicializado={setStepInicializado}
                itensComp={itensComp}
                itensCompostos={itensCompostos}
                dadosCard={dadosCard}
              />
            )} */}
            {camposPersonalizados}
            <InputGroup align="center">
              <Button
                className="md:w-1/4 max-sm:text-xs max-sm:h-10 w-full"
                // onClick={handleSubmit(handleCalcular)}
                onClick={(e: any) => {
                  handleSubmit(handleCalcular)(e);
                }}
                type="button"
                disabled={!isLoadedDadosGerais}
                loading={isLoading}
              >
                Próximo
              </Button>
            </InputGroup>
          </div>
        </div>
      ) : (
        <div className="w-full h-[500px] flex flex-col justify-center items-center">
          <LoaderSun />
        </div>
      )}
    </Container>
  );
};

export default DadosGeraisAmpliacao;