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

import LoaderSun from "@/components/common/Loader/LoaderSun";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { dimensionarKit } from "@/requests/CRM/APIHelte/dimensionarKit";
import { listarClassificacoes } from "@/requests/CRUD/Classificacao/listarClassificacoes";
import { useAuth } from "@/src/contexts/authContext";
import { IValueLabel } from "@/types/formInterfaces";
import { FormatFields } from "@/utils";
import { Tooltip } from "@mui/material";
import { Info } from "lucide-react";
import { Dispatch, SetStateAction, useEffect, useState } from "react";
import { FieldValues } from "react-hook-form";
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";
import DistribuicaoModulos from "./DistribuicaoModulos";

const DadosGeraisELB = ({
  form,
  updateDadosGerados = false,
  inCard,
  cidades,
  produtosHelte,
  defaultValues,
  isLoaded,
  dadosCard,
  ucs,
  //
  blockNextStep,
  imgTelhados,
  perdasMedias,
  tiposInstalacao,
  categoriasTelhados,
  orientacoes,
  inclinacoes,
  estruturas,
  telhados,
  setNextStepAction,
  handleNext,
}: {
  ucs: any[];
  setUcs: Dispatch<SetStateAction<any[]>>;
  [x: string]: any;
}) => {
  const { handleSubmit } = form.control;
  const {
    mediaConsumo,
    valor_simultaneidade_proposta,
    nome_tipoLigacao_proposta,
    concessionaria_proposta,
    id_concessionaria_proposta,
    preco_tarifa,
    fiob_tarifa,
    grupo_proposta,
    subgrupo_proposta,
    perfil_consumo_proposta,
    porcentagemGeracao,
  } = 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 [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 [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 [concessionarias, setConcessionarias] = useState<IValueLabel[]>([]);
  const [origem, setOrigem] = useState<IValueLabel[]>([]);
  const [ucsBeneficiaria, setUcsBeneficiaria] = useState<any[]>([
    { uc: "", nome: "UC Beneficiária" },
  ]);
  const [isLoading, setIsLoading] = useState(false);
  const [telefone, setTelefone] = useState("");

  const [keyDistribuicao, setKeyDistribuicao] = useState(
    form.control._formValues?.keyDistribuicao || 0,
  );

  const [canEditTarifa, setCanEditTarifa] = useState(
    form.control._formValues.canEditTarifa
      ? form.control._formValues.canEditTarifa
      : false,
  );

  const { perfil, usuario } = useAuth();

  // const [defaultValues, setDefaultValues] = useState<any>();
  const [openModalBeneficiaria, setOpenModalBeneficiaria] = useState(false);

  const [simultaneidade, setSimultaneidade] = useState<IValueLabel[]>([]);
  const [showErros, setShowErros] = useState<[boolean, string]>([false, ""]);

  // const avaliableVoltages = form.control._formValues?.fase?.voltages;
  const [avaliableVoltages, setAvaliableVoltages] = useState<any>(
    form.control._formValues?.fase?.voltages,
  );
  const [selectedBrand, setSelectedBrand] = useState<any>(
    form.control._formValues?.structure_brand?.value,
  );

  // const arrayTipo = [
  //   { value: "1", label: "Monofásico" },
  //   { value: "2", label: "Bifásico" },
  //   { value: "3", label: "Trifásico" },
  // ];

  const phases = produtosHelte.configs.phases;
  const voltages = produtosHelte.configs.voltages;
  const modules = produtosHelte.products.modules.map((e: any) => {
    if (usuario.visualiza_custo_kit_usuario == "0") {
      e.label = e.label.split(" (R$")[0];
    }
    return e;
  });
  const inverterBrands = produtosHelte.products.inverterBrands;
  const structures = produtosHelte.products.structures;
  const structureBrands = produtosHelte.products.structureBrands;
  const stringBoxes = produtosHelte.products.stringBoxes.map((e: any) => ({
    ...e,
    value: String(e.value),
  }));
  const warranties = produtosHelte.products.warranties;

  useEffect(() => {
    // listarParametros().then((res) => setDefaultValues(res));
    updateDadosGerados(false);

    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}`,
          })),
      ),
    );
    listarClassificacoes().then((res) =>
      setSimultaneidade(
        res
          .filter((e: any) => e.status_classificacao == 1)
          .map((simultaneidade: any) => ({
            label: `${simultaneidade.nome_classificacao}`,
            value: `${simultaneidade.id_classificacao}`,
          })),
      ),
    );
    listarConcessionarias().then((res) =>
      setConcessionarias(
        res
          .filter((e: any) => e.status_concessionaria == 1)
          .map((concessionaria: any) => ({
            label: `${concessionaria.nome_concessionaria}`,
            value: `${concessionaria.id_concessionaria}`,
          })),
      ),
    );
    if (inCard) {
      // form.setValue("escolha_negocio", "");
      form.clearErrors("cidade");
    }

    if (mediaConsumo != "") {
      setMediaConsumoCampo(true);
    }

    // form.setValue("performance_ratio_parametro", { value: 80 });
    // form.setValue("sombreamentos_coleta", "0");

    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);
          });
        }
      });

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

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

    form.setValue("consumoTotalUcs", mediaConsumoTotal.toFixed(2));
    form.setValue("consumoTotal", mediaConsumoTotal.toFixed(2));
  }, []);
  const handleCalcular = async () => {
    // setIsLoading(true);

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

    const potenciaKwp = (potencia_modulo * totalModulos) / 1000;

    const setValue = form.setValue;

    setValue("potenciaKwp", potenciaKwp);
    setValue("idUsuario", id_usuario);

    // data["potency"] = potenciaKwp;
    setValue("potency", potenciaKwp);

    // return submitDadosGerais(data);

    // if (clienteNovo) {
    //   handleValidaTelefone(telefone);
    // }
    // if (!haErros) {
    //   data["title"] =
    //     // `${dadosCard.nome_cliente}_${dadosCard.id_coleta_cliente}(TESTE)`;
    //     `ORÇAMENTO DE TESTE CUSTOMAX`;
    //   data["potency"] = potenciaKwp;
    //   data["express"] = data["express"] == "true";
    //   data["transformer"] = data["transformer"] == "true";
    //   data["warranty"] = 0;

    //   const loadingKit = new Promise((resolve, reject) => {
    //     dimensionarKit(data)
    //       .then((kit) => {
    //         setValue("kitSelecionado", kit);
    //         prosseguirEtapa();
    //         resolve("Kit Encontrado");
    //       })
    //       .catch((err) => reject(err));
    //   });

    //   return toast
    //     .promise(loadingKit, {
    //       pending: {
    //         render(data: any) {
    //           return "Aguarde";
    //         },
    //       },
    //       success: {
    //         render(data: any) {
    //           return "Kit Encontrado";
    //         },
    //       },
    //       error: {
    //         render(data: any) {
    //           return data.data;
    //         },
    //       },
    //     })
    //     .finally(() => setIsLoading(false));
    // }
  };

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

    const setValue = form.setValue;

    if (clienteNovo) {
      handleValidaTelefone(telefone);
    }
    if (!haErros) {
      data["title"] =
        // `${dadosCard.nome_cliente}_${dadosCard.id_coleta_cliente}(TESTE)`;
        `ORÇAMENTO DE TESTE CUSTOMAX`;
      data["express"] = data["express"] == "true";
      data["transformer"] = data["transformer"] == "true";
      data["warranty"] = 0;
      return new Promise((resolve, reject) => {
        const loadingKit = toast.loading("Aguarde");
        dimensionarKit(data)
          .then((kit) => {
            setValue("kitSelecionado", kit);
            prosseguirEtapa();
            if (kit.qtdModulosHasChanged) {
              resolve(
                toast.update(loadingKit, {
                  render: `Kit encontrado, mas a quantidade de módulos original foi de: ${kit.qtdModulosOriginal_api_kit_proposta}`,
                  type: "warning",
                  isLoading: false,
                  autoClose: 3000,
                }),
              );
            }
            resolve(
              toast.update(loadingKit, {
                render: "Kit Encontrado",
                type: "success",
                isLoading: false,
                autoClose: 1500,
              }),
            );
          })
          .catch((err) =>
            reject(
              toast.update(loadingKit, {
                render: err,
                type: "error",
                isLoading: false,
                autoClose: 1500,
              }),
            ),
          );
      }).finally(() => setIsLoading(false));

      // const loadingKit = new Promise((resolve, reject) => {
      //   dimensionarKit(data)
      //     .then((kit) => {
      //       setValue("kitSelecionado", kit);
      //       if (kit.qtdModulosHasChanged) {
      //         qtdModulosHasChanged = true;
      //       }
      //       prosseguirEtapa();
      //       resolve(kit);
      //     })
      //     .catch((err) => reject(err));
      // });

      // return toast
      //   .promise(loadingKit, {
      //     pending: {
      //       render(data: any) {
      //         return "Aguarde";
      //       },
      //     },
      //     success: {
      //       render(data: any) {
      //         if (data.data.qtdModulosHasChanged) {
      //           return `Kit encontrado, mas a quantidade de módulos original foi de: ${data.data.qtdModulosOriginal_api_kit_proposta}`;
      //         }
      //         return "Kit Encontrado";
      //       },
      //       type: qtdModulosHasChanged ? "warning" : "success",
      //     },
      //     error: {
      //       render(data: any) {
      //         return data.data;
      //       },
      //     },
      //   })
      //   .finally(() => setIsLoading(false));
    }
  };

  const prosseguirEtapa = () => {
    const haErrosForm = Object.keys(form.errors).length > 0;

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

  const handleValidaTelefone = (e: any) => {
    setHaErros(true);
    form.control.setError("telefone", {
      type: "required",
      message: "Validando telefone",
    });
    if (e != "") {
      verificaTelefone(e).then((res: any) => {
        if (res.body) {
          setContatoCadastrado(res.body);

          // setHaErros(true);

          form.control.setError("telefone", {
            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)
        .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 handleCadastroCliente = () => {
    setOpenPopoverCadastro(!openPopoverCadastro);
  };
  const handleCadastroNovoCliente = () => {
    setClienteNovo(true);
    form.setValue("escolha_negocio", "");
    setOpenPopoverCadastro(!openPopoverCadastro);
    handleValidaTelefone(form.control?._formValues?.telefone);
  };

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

    if (escolha_negocio == "" || escolha_negocio.value == "") {
      form.control.setError("escolha_negocio", {
        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", {
        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", {
        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(() => {
    if (concessionaria_proposta !== "") {
      listarConcessionarias().then((res: any) => {
        const findConcessionaria = res.find(
          (concessionaria: any) =>
            concessionaria.id_concessionaria === id_concessionaria_proposta,
        );

        if (findConcessionaria) {
          const indice = 0.3;
          const fiobFormatado: any =
            FormatFields.desformatarNumeros(+fiob_tarifa);
          const precoFixoFormatado: any =
            FormatFields.desformatarNumeros(+preco_tarifa);

          const tarifaBase = precoFixoFormatado - fiobFormatado * indice;

          // Impostos
          const ICMS = findConcessionaria.icms_concessionaria / 100;
          const PIS = findConcessionaria.piscofins_concessionaria / 100;
          // Cálculo da Tarifa com imposto
          const tarifaComImposto =
            (tarifaBase / ((1 - ICMS) * (1 - PIS))) *
            (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(".", ","),
            );
          }
        }
      });
    }
  }, [isLoaded]);

  return (
    <Container>
      {isLoaded ? (
        <div className="text-boxdark dark:text-white">
          <div>
            {!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="city"
                    label="Cidade - Estado"
                    onChange={(e) => {
                      form.setValue("cidade", e);
                    }}
                  />
                  <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>
              </>
            )}

            <div className="flex flex-col 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 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">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>
                <div className="flex flex-col gap-2 flex-1 min-w-75">
                  {ucs.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{" "}
                          {index == 0 ? "Geradora" : "Beneficiária"}:{" "}
                        </span>
                        {uc.uc}
                      </div>
                      <div>
                        <span className="font-bold">
                          Média de Consumo da UC:{" "}
                        </span>
                        {uc.tipoValor == "Mensal"
                          ? (
                              uc.valor.reduce(
                                (acc: number, curr: number | string) =>
                                  acc + +curr,
                                0,
                              ) / 12
                            )?.toFixed(0)
                          : uc.valor}
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
            <p className={`text-lg mb-5 ${inCard ? "" : "mt-18"}`}>
              Dados da Estrutura
            </p>
            <Divider />
            {canEditTarifa && (
              <div className="border border-warning w-fit p-1 rounded text-[rgb(145,108,45)] dark:text-[rgb(255,219,156)] bg-warning/10">
                Tarifa não foi encontrada, informe a tarifa!
              </div>
            )}
            <InputGroup>
              {defaultValues && (
                <>
                  <Input
                    name="precoTotal_tarifa"
                    label="Valor Tarifa (R$)"
                    formulario={form}
                    mascara="numeroPreciso"
                    required
                    error="Informe o preço da Tarifa"
                    // disabled={
                    //   perfil.permite_alterar_valorTarifa == 0 &&
                    //   perfil.cargo_perfil != 4 || !form.control._formValues.canEditTarifa
                    // }
                  />
                  <Input
                    name="sombreamentos_coleta"
                    label="Sombreamento (%)"
                    formulario={form}
                    mascara="numero"
                    required
                    error="Informe um Sombreamento"
                    disabled={perfil.edita_sombreamento_perfil == "0"}
                    defaultValue={
                      defaultValues &&
                      String(defaultValues.sombreamento_parametro)
                    }
                    onChange={(e) => {
                      if (e.target.value) {
                        if (
                          +FormatFields.desformatarNumeros(e.target.value) >
                          99.99
                        ) {
                          form.setValue("sombreamentos_coleta", "99,99");
                        }
                      }
                    }}
                  />
                  <InputSelectComponent
                    name="performance_ratio_parametro"
                    label="Performance Ratio"
                    formulario={form}
                    options={Array.from({ length: 11 }).map((_, index) => ({
                      value: index + 75,
                      label: index + 75 + "%",
                    }))}
                    defaultValue={
                      defaultValues && defaultValues.performance_ratio_parametro
                    }
                    disabled={perfil.edita_performance_ratio_perfil == "0"}
                  />
                  <Input
                    name="porcentagemGeracao"
                    label="Aumento de Consumo (%)"
                    formulario={form}
                    defaultValue={
                      porcentagemGeracao ||
                      (defaultValues && defaultValues.margem_geracao_parametro)
                    }
                    required
                    placeholder="Digite a Geração"
                    mascara="numero"
                    onChange={(e) => {
                      const newKeyDistribuicao = keyDistribuicao + 1;
                      form.setValue("keyDistribuicao", newKeyDistribuicao);
                      setKeyDistribuicao(newKeyDistribuicao);
                      const { consumoTotalUcs } = form.control._formValues;

                      form.setValue(
                        "consumoTotal",
                        (
                          Number(consumoTotalUcs) *
                          ((100 +
                            Number(
                              FormatFields.desformatarNumeros(e.target.value),
                            )) /
                            100)
                        ).toFixed(2),
                      );
                    }}
                  />
                  <InputSelectComponent
                    formulario={form}
                    name="fase"
                    label="Tipo de Ligação"
                    options={phases}
                    onChange={(e: any) => {
                      setAvaliableVoltages(e.voltages);
                      form.setValue("tensao", "");
                    }}
                    required
                    error="Selecione um Tipo de Ligação"
                    width="hidden"
                  />
                  <InputSelectComponent
                    name="tensao"
                    label="Tensão"
                    formulario={form}
                    options={
                      voltages
                      //   .filter(
                      //   (voltage: any) =>
                      //     avaliableVoltages &&
                      //     (avaliableVoltages.length === 0 ||
                      //       avaliableVoltages.includes(voltage.value))
                      // )
                    }
                    required
                    error="Selecione uma Tensão"
                    // defaultValue={
                    //   (defaultValues && defaultValues["potency"]) ||
                    //   (avaliableVoltages && avaliableVoltages[0])
                    // }
                  />
                </>
              )}
            </InputGroup>

            <InputGroup>
              <InputSelectComponent
                name="module"
                label="Módulo"
                formulario={form}
                options={modules}
                required
                onChange={(modulo: any) => {
                  form.setValue("potencia_modulo", modulo?.properties?.potency);
                  const newKeyDistribuicao = keyDistribuicao + 1;
                  form.setValue("keyDistribuicao", newKeyDistribuicao);
                  setKeyDistribuicao(newKeyDistribuicao);
                }}
                error="Selecione um Módulo"
              />
              <InputSelectComponent
                name="inverter"
                label="Inversor"
                formulario={form}
                options={inverterBrands}
                required
                error="Selecione um Inversor"
              />
            </InputGroup>
            <InputGroup>
              <InputSelectComponent
                name="structure_brand"
                label="Marca da Estrutura"
                formulario={form}
                options={[
                  {
                    label: "Sem Marca",
                    value: "0",
                  },
                  ...structureBrands,
                ]}
                onChange={(e: any) => {
                  setSelectedBrand(e.value);
                  form.setValue("structure", "");
                }}
                required
                error="Selecione a Marca da Estrutura"
              />
              <InputSelectComponent
                name="structure"
                label="Estrutura"
                formulario={form}
                options={structures.filter((structure: any) =>
                  selectedBrand != "0"
                    ? structure.brands.some(
                        (e: any) => e.value == selectedBrand,
                      )
                    : structure.label == "SEM ESTRUTURA",
                )}
                defaultValue={form.control._formValues?.structure?.value}
                required
                error="Selecione Uma Estrututa"
              />
              <InputSelectComponent
                name="stringbox"
                label="String Box"
                formulario={form}
                options={stringBoxes}
                required
                error="Selecione um String Box"
              />
            </InputGroup>
            <InputGroup>
              <Input
                name="express"
                type="checkbox"
                label={`Entrega expressa? (${dadosCard.cidade_coleta} - ${dadosCard.uf_coleta})`}
                formulario={form}
                checked={form.control._formValues?.express}
              />
              <Input
                name="transformer"
                type="checkbox"
                label="Transformador"
                formulario={form}
                checked={form.control._formValues?.transformer}
              />
            </InputGroup>

            {keyDistribuicao > 0 && (
              <fieldset className="flex flex-col w-full border-black dark:border-meta-9 border rounded p-2 px-3 text-center">
                <legend className="px-3 font-bold text-xl">
                  Distribuição dos módulos
                </legend>
                <DistribuicaoModulos
                  key={keyDistribuicao}
                  form={{
                    ...form,
                    setValue: (
                      name: string,
                      value: any,
                      options?:
                        | Partial<{
                            shouldValidate: boolean;
                            shouldDirty: boolean;
                            shouldTouch: boolean;
                          }>
                        | undefined,
                    ) => {
                      form.setValue(name, value, options);

                      handleCalcular();
                      // handleCalcular()
                    },
                  }}
                  blockNextStep={blockNextStep}
                  imgTelhados={imgTelhados}
                  defaultValues={defaultValues}
                  perdasMedias={perdasMedias}
                  tiposInstalacao={tiposInstalacao}
                  categoriasTelhados={categoriasTelhados}
                  orientacoes={orientacoes}
                  inclinacoes={inclinacoes}
                  estruturas={estruturas}
                  telhados={telhados}
                  //
                  dadosCard={dadosCard}
                  setNextStepAction={setNextStepAction}
                />
              </fieldset>
            )}

            <div className="flex flex-row justify-center pt-3">
              <Button
                className="md:w-1/4 w-full"
                onClick={handleSubmit(submitDadosGerais)}
                type="button"
                disabled={!isLoaded}
                loading={isLoading}
              >
                Próximo
              </Button>
            </div>
          </div>
        </div>
      ) : (
        <div className="w-full h-[500px] flex flex-col justify-center items-center">
          <LoaderSun />
        </div>
      )}
    </Container>
  );
};

export default DadosGeraisELB;