import LoaderSun from "@/components/common/Loader/LoaderSun";
import Button from "@/components/Forms/Button";
import Divider from "@/components/Forms/Divider";
import Input from "@/components/Forms/Input";
import ModalComponente from "@/components/Modal/ModalComponente";
import FormProposta from "@/pages/CXESCRM005/FormProposta";
import FormPropostaDrive from "@/pages/CXESCRM005/FormProposta.old";
import MarkupCustosExtrasProposta from "@/pages/CXESCRM005/MarkupCustosExtrasProposta";
import ObservacaoColeta from "@/pages/CXESCRM005/Observacao";
import PrecificacaoProposta from "@/pages/CXESCRM005/PrecificacaoProposta";
import {
  enviarLinkProposta,
  enviarLinkPropostaEmail,
} from "@/requests/CRM/enviarProposta";
import { listarCamposPersonalizados } from "@/requests/CRUD/CamposPersonalizados/listarCamposPersonalizados";
import { listarParametros } from "@/requests/CRUD/ParametrosComerciais/listarParametros";
import { obterServico } from "@/requests/CRUD/TiposServico/obterServico";
import { listarUsuarioPeloId } from "@/requests/CRUD/Usuario/listarUsuarios";
import { useAuth } from "@/src/contexts/authContext";
import { useProposalContext } from "@/src/contexts/ProposalContext";
import { useScreenContext } from "@/src/contexts/ScreenContext";
import {
  calcularAnosEMeses,
  formatarValor,
  FormatFields,
  getDateTimeBrasil,
  GetForm,
  getTextFromHmlTags,
} from "@/utils";
import {
  Step,
  StepButton,
  StepConnector,
  stepConnectorClasses,
  StepLabel,
  Stepper,
  styled,
} from "@mui/material";
import { useEffect, useMemo, useState } from "react";
import { FieldValues } from "react-hook-form";
import { BiLogoWhatsapp } from "react-icons/bi";
import { BsFileEarmarkPdf } from "react-icons/bs";
import { HiOutlineMail } from "react-icons/hi";
import { toast } from "react-toastify";
import Swal from "sweetalert2";
import CamposPersonalizados from "../../campos_personalizados";
import DadosGeraisCorretiva from "./DadosGeraisCorretiva";
import FormPagamentoManutencoesProposta from "./FormPagamentoManutencoesProposta";
import ResumoPropostaCorretiva from "./ResumoPropostaCorretiva";

const PropostaCorretiva = ({
  dadosCard,
  dadosCliente,
  loja,
  buscaPropostas,
  tiposServicos,
  formasPagamento,
  formaPagamentoPadrao,
  contasBancariasLojas,
  setActiveStepPendencias,
  activeStepPendencias,
}: any) => {
  const [isLoading, setIsLoading] = useState(false);
  const [isLoaded, setIsLoaded] = useState(false);
  // const [stepAtual, setStepAtual] = useState(0);
  const [step, setStep] = useState(0);
  const [blockNextStep, setBlockNextStep] = useState(false);
  const [defaultValues, setDefaultValues] = useState<any>();

  const [custosExtras, setCustosExtras] = useState<any[]>([]);
  const [keyCustosExtras, setKeyCustosExtras] = useState(0);

  const [mostrarPdf, setMostrarPdf] = useState(false);
  const [dadosProposta, setDadosProposta] = useState<any>();
  const [proposta, setProposta] = useState<any>();

  const [vedndedorNegocio, setVedndedorNegocio] = useState<any>();

  const [camposPersonalizadosBd, setCamposPersonalizadosBd] = useState<any>([]);

  const [openModalEmail, setOpenModalEmail] = useState(false);
  const [openModalWhatsApp, setOpenModalWhatsApp] = useState(false);
  const [loadingEmail, setLoadingEmail] = useState(false);
  const [isLoadingWhatsApp, setIsLoadingWhatsApp] = useState(false);

  const [dots, setDots] = useState(0);
  const [isSavingProposal, setIsSavingProposal] = useState(false);
  const [statusSavingProposta, setStatusSavingProposta] = useState();
  useEffect(() => {
    if (!isSavingProposal) return;
    const id = setInterval(() => {
      setDots((d) => (d + 1) % (3 + 1));
    }, 400);
    return () => clearInterval(id);
  }, [isSavingProposal]);

  const dotsStr = ".".repeat(dots);

  const { relacionarDadosProposta } = useProposalContext();
  const { usuario } = useAuth();
  const { isMobile } = useScreenContext();

  const ColorlibConnector = styled(StepConnector)(({ theme }) => ({
    [`&.${stepConnectorClasses.alternativeLabel}`]: {
      top: 22,
    },
    [`&.${stepConnectorClasses.active}`]: {
      [`& .${stepConnectorClasses.line}`]: {
        backgroundImage:
          "linear-gradient( 95deg,rgb(71,148,250) 0%, rgb(29,120,186) 50%, rgb(60,80,224) 100%)",
      },
    },
    [`&.${stepConnectorClasses.completed}`]: {
      [`& .${stepConnectorClasses.line}`]: {
        backgroundImage:
          "linear-gradient( 95deg,rgb(71,148,250) 0%, rgb(29,120,186) 50%, rgb(60,80,224) 100%)",
      },
    },
    [`& .${stepConnectorClasses.line}`]: {
      height: 3,
      border: 0,
      backgroundColor: "#eaeaf0",
      borderRadius: 1,
      ...theme.applyStyles("dark", {
        backgroundColor: theme.palette.grey[800],
      }),
    },
  }));

  const ColorlibStepIconRoot = styled("div")<{
    ownerState: { completed?: boolean; active?: boolean };
  }>(({ theme }) => ({
    backgroundColor: "#ccc",
    zIndex: 1,
    color: "#fff",
    width: 50,
    height: 50,
    display: "flex",
    borderRadius: "50%",
    justifyContent: "center",
    alignItems: "center",
    ...theme.applyStyles("dark", {
      backgroundColor: theme.palette.grey[700],
    }),
    variants: [
      {
        props: ({ ownerState }) => ownerState.active,
        style: {
          backgroundImage:
            "linear-gradient( 136deg, rgb(71,148,250) 0%, rgb(29,120,186) 50%, rgb(60,80,224) 100%)",
          boxShadow: "0 4px 10px 0 rgba(0,0,0,.25)",
        },
      },
      {
        props: ({ ownerState }) => ownerState.completed,
        style: {
          backgroundImage:
            "linear-gradient( 136deg, rgb(71,148,250) 0%, rgb(29,120,186) 50%, rgb(60,80,224) 100%)",
        },
      },
    ],
  }));

  function ColorlibStepIcon(props: any, index: number) {
    const { active, completed, className } = props;

    return (
      <ColorlibStepIconRoot
        ownerState={{ completed, active }}
        className={className}
      >
        {index + 1}
      </ColorlibStepIconRoot>
    );
  }

  const formDadosGerais = GetForm();
  const formPagamento = GetForm();
  const { handleSubmit: handleWhatsApp, ...formWhatsApp } = GetForm();
  const { handleSubmit: handleEmail, ...formEmail } = GetForm();

  const formValues = formDadosGerais.control._formValues;
  let camposPersonalizadosSearch: any = null;
  let camposPersonalizadosFormat: any = null;

  if (formValues) {
    camposPersonalizadosSearch = Object.fromEntries(
      Object.entries(formValues).filter(
        ([key, value]) =>
          (key.endsWith("_campo_personalizado") || key.endsWith("_cp")) &&
          ((typeof value === "string" && value.trim() !== "") ||
            (Array.isArray(value) &&
              value.every((v) => typeof v === "string" && v.trim() !== ""))),
      ),
    );

    camposPersonalizadosFormat = Object.fromEntries(
      Object.entries(camposPersonalizadosSearch).map(([key, value]) => [
        key.split("^")[1] || key,
        value,
      ]),
    );
  }

  useEffect(() => {
    Promise.all([
      listarUsuarioPeloId(dadosCard.responsaveis["Vendedor"]).then((res) =>
        setVedndedorNegocio(res),
      ),
      obterServico({ id_tipo_servico: dadosCard.tipo_servico_coleta }).then(
        (res) => {
          return res;
        },
      ),
      listarParametros().then((res) => ({
        ...res,
        condicao_pagamento_parametro:
          getTextFromHmlTags(res?.condicao_pagamento_parametro) || "",
      })),
      listarCamposPersonalizados({
        id_coleta: dadosCard?.id_coleta_cliente,
      }).then((res) => {
        setCamposPersonalizadosBd(
          res.filter((a: any) => a.status_campo_personalizado == "1"),
        );
      }),
    ])
      .then((res) => {
        res.pop();
        setDefaultValues({ ...Object.assign({}, ...res), ...dadosCard });
      })
      .finally(() => setIsLoaded(true));

    return () => {
      buscaPropostas();
    };
  }, []);

  // const defaultValues = {
  //   especificacoes_proposta: "esp",
  //   informacoes_adicionais_proposta: "inf",
  //   total_modulos: "tot",
  //   condicao_pagamento: "cond",
  // };

  // const steps: {
  //   name: string;
  //   component: JSX.Element;
  //   submitFn?: (e: any) => any;
  // }[] =
  // const steps: () => {
  //   name: string;
  //   component: JSX.Element;
  //   submitFn?: (e: any) => any;
  // }[] = useCallback(
  //   () =>
  // const steps_old = [
  //   {
  //     name: "Dados",
  //     component: (props: any) => (
  //       <DadosGeraisCorretiva
  //         form={formDadosGerais}
  //         // updateDadosGerados={updateDadosGerados}
  //         defaultValues={{ ...defaultValues, formaPagamentoPadrao }}
  //         blockNextStep={setBlockNextStep}
  //         formasPagamento={formasPagamento}
  //         // isLoaded={isLoaded}
  //         // ucs={ucs}
  //         // dadosCard={dadosCard}
  //         // distribuidores={distribuidores}
  //         // distribuidoresNativos={distribuidoresNativos}
  //         // fabricantes={fabricantes}
  //         // camposPersonalizados={props?.camposPersonalizados}
  //         loja={loja}
  //       />
  //     ),
  //     submitFn: (e: any) => {
  //       formDadosGerais.handleSubmit(async (data: any) => {
  //         if (loja?.usa_precificacao_corretiva_loja == "0") {
  //           formDadosGerais.setValue("valorTotal_proposta", +data?.valorColeta);
  //           formDadosGerais.setValue(
  //             "valorFinalProposta",
  //             FormatFields.formatarNumero(data?.valorColeta),
  //           );
  //         }
  //         if (defaultValues.qtdModulos_coleta != data.totalModulos) {
  //           Swal.fire({
  //             title: "Diferença de módulos",
  //             icon: "warning",
  //             text: "A quantidade de módulos foi alterada e será atualizada no negócio ao gerar a proposta, deseja prosseguir?",
  //             showDenyButton: true,
  //             denyButtonText: "Não",
  //             confirmButtonText: "Sim",
  //           }).then((res) => {
  //             if (res.isConfirmed) {
  //               setStep(step + 1);
  //             }
  //           });
  //         } else {
  //           setStep(step + 1);
  //         }
  //       })(e);
  //     },
  //     // submitFn: (e: any) => setStep(step + 1),
  //     // handleSubmit(async (data: any) => {
  //     //   setIsLoading(true);

  //     //   const {
  //     //     comissao_indicacao_loja,
  //     //     comissao_preVendedor_loja,
  //     //     comissao_gerente_loja,
  //     //   } = form.control._formValues.loja;
  //     //   data = {
  //     //     ...data,
  //     //     comissao_indicacao_loja,
  //     //     comissao_preVendedor_loja,
  //     //     comissao_gerente_loja,
  //     //   };
  //     //   return submitSimulador(data)
  //     //     .then(() => {
  //     //       // setStep(step + 1);
  //     //     })
  //     //     .catch((err) => {})
  //     //     .finally(() => setIsLoading(false));
  //     // })(e),
  //   },
  //   ...(loja?.usa_precificacao_corretiva_loja == "1"
  //     ? [
  //         {
  //           name: "Custos Extras",
  //           component: (
  //             <div className="w-full flex flex-col items-center justify-center">
  //               <MarkupCustosExtrasProposta
  //                 form={formDadosGerais}
  //                 blockNextStep={setBlockNextStep}
  //                 valorColeta={formDadosGerais.control._formValues?.valorColeta}
  //                 dadosCard={dadosCard}
  //                 dadosCliente={dadosCliente}
  //                 // camposPersonalizados={props?.camposPersonalizados}
  //               />
  //             </div>
  //           ),
  //           // submitFn: submitCustosExtras,
  //         },
  //         {
  //           name: "Precificação",
  //           component: (
  //             <div className="w-full flex flex-col items-center justify-center">
  //               {/* <ResultadoPrecificacao resultadoPrecificacao={resultadoSimulador} /> */}
  //               {/* <ResultadoPrecificacao resultadoPrecificacao={{ nan: NaN }} /> */}
  //               <PrecificacaoProposta
  //                 form={formDadosGerais}
  //                 blockNextStep={setBlockNextStep}
  //                 valorColeta={formDadosGerais.control._formValues?.valorColeta}
  //                 dadosCard={dadosCard}
  //                 dadosCliente={dadosCliente}
  //                 // camposPersonalizados={props?.camposPersonalizados}
  //               />
  //             </div>
  //           ),
  //           // submitFn: submitCustosExtras,
  //         },
  //       ]
  //     : []),
  //   {
  //     name: "Observações",
  //     component: (
  //       <ObservacaoColeta
  //         form={formDadosGerais}
  //         // camposPersonalizados={props?.camposPersonalizados}
  //       />
  //     ),
  //     submitFn: (e: any) => {
  //       const validade_proposta = new Date();
  //       validade_proposta.setDate(
  //         validade_proposta.getDate() +
  //           +defaultValues.tempo_validade_proposta_parametro,
  //       );
  //       formDadosGerais.setValue(
  //         "validade_proposta",
  //         getDateTimeBrasil({
  //           day: "2-digit",
  //           month: "2-digit",
  //           year: "numeric",
  //         }),
  //       );
  //       setStep(step + 1);
  //     },
  //   },
  //   {
  //     name: "Forma de Pagamento",
  //     component: (
  //       <FormPagamentoManutencoesProposta
  //         formasPagamento={formasPagamento}
  //         loja={loja}
  //         contasBancariasLojas={contasBancariasLojas}
  //         dadosCard={dadosCard}
  //         proposta={{
  //           ...formDadosGerais?.control?._formValues,
  //           valorTotal_proposta:
  //             formDadosGerais?.control?._formValues?.ajusteValorFinalProposta,
  //           codForma_pagamento_proposta:
  //             formDadosGerais?.control?._formValues?.codForma_pagamento_proposta
  //               ?.value,
  //         }}
  //         // onSubmitFunction={confirmarProposta}
  //         formaPagamentoPadrao={formaPagamentoPadrao}
  //         form={formPagamento}
  //       />
  //     ),
  //     submitFn: (e: any) => {
  //       formPagamento.handleSubmit(async (data: any) => {
  //         // data["id_proposta"] = proposta?.id_proposta;
  //         // data["cliente_proposta"] = proposta?.cliente_proposta;
  //         // if (
  //         //   formaPagamentoPadrao?.cod_forma_pagamento !=
  //         //   data?.codForma_pagamento_proposta
  //         // ) {
  //         //   data["forma_pagamento_atualizada"] = true;
  //         // }
  //         // formDadosGerais?.setValue("informacoes_pagamento", data);
  //         Object.keys(data).map((key) => {
  //           if (key != "codForma_pagamento_proposta") {
  //             formDadosGerais?.setValue(key, data[key]);
  //           }
  //         });
  //         formDadosGerais?.setValue(
  //           "codForma_pagamento_proposta",
  //           formPagamento?.control?._formValues?.codForma_pagamento_proposta,
  //         );
  //         setStep(step + 1);
  //       })(e);
  //     },
  //     // submitFn: (e: any) => setStep(step + 1),
  //     // handleSubmit(async (data: any) => {
  //     //   setIsLoading(true);

  //     //   const {
  //     //     comissao_indicacao_loja,
  //     //     comissao_preVendedor_loja,
  //     //     comissao_gerente_loja,
  //     //   } = form.control._formValues.loja;
  //     //   data = {
  //     //     ...data,
  //     //     comissao_indicacao_loja,
  //     //     comissao_preVendedor_loja,
  //     //     comissao_gerente_loja,
  //     //   };
  //     //   return submitSimulador(data)
  //     //     .then(() => {
  //     //       // setStep(step + 1);
  //     //     })
  //     //     .catch((err) => {})
  //     //     .finally(() => setIsLoading(false));
  //     // })(e),
  //   },
  //   {
  //     name: "Resumo",
  //     component: (
  //       <ResumoPropostaCorretiva
  //         id_coleta={dadosCard.id_coleta_cliente}
  //         proposta={proposta}
  //         nome_usuario={usuario?.nome_usuario}
  //         data_geracao_proposta={getDateTimeBrasil({
  //           hour: undefined,
  //           minute: undefined,
  //           second: undefined,
  //         })}
  //         validade_proposta={formValues.validade_proposta}
  //         qtd_visualizacoes_proposta={0}
  //         valorTotal_proposta={
  //           +FormatFields.desformatarNumeros(formValues.valorFinalProposta)
  //         }
  //         valor_desconto={formValues.valorDesconto}
  //         valor_total_sem_desconto={
  //           +FormatFields.desformatarNumeros(formValues.valorDesconto) +
  //           +FormatFields.desformatarNumeros(formValues.valorFinalProposta)
  //         }
  //         valor_acrescimo={
  //           +FormatFields.desformatarNumeros(formValues.valorAcrescimo)
  //         }
  //         valor_total_sem_acrescimo={
  //           +FormatFields.desformatarNumeros(formValues.valorFinalProposta) -
  //           +FormatFields.desformatarNumeros(formValues.valorAcrescimo)
  //         }
  //         obs_negocio={dadosCard.obs_coleta}
  //         especificacoes={formValues.especificacoes}
  //         informacoes_adicionais_proposta={
  //           formValues.informacoes_adicionais_proposta
  //         }
  //         totalModulos={formValues.totalModulos}
  //         forma_pagamento_proposta={
  //           formValues.codForma_pagamento_proposta?.label
  //         }
  //         obs_proposta={formValues.obsColeta}
  //       />
  //     ),
  //     // submitFn: submitCustosExtras,
  //   },
  // ];
  const steps = [
    {
      name: "Dados",
      component: DadosGeraisCorretiva,
      commonProps: {
        form: formDadosGerais,
        defaultValues: { ...defaultValues, formaPagamentoPadrao },
        blockNextStep: setBlockNextStep,
        formasPagamento: formasPagamento,
        loja: loja,
      },
      submitFn: (e: any) => {
        formDadosGerais.handleSubmit(async (data: any) => {
          if (loja?.usa_precificacao_corretiva_loja == "0") {
            formDadosGerais.setValue("valorTotal_proposta", +data?.valorColeta);
            formDadosGerais.setValue(
              "valorFinalProposta",
              FormatFields.formatarNumero(data?.valorColeta),
            );
          }
          if (defaultValues.qtdModulos_coleta != data.totalModulos) {
            Swal.fire({
              title: "Diferença de módulos",
              icon: "warning",
              text: "A quantidade de módulos foi alterada e será atualizada no negócio ao gerar a proposta, deseja prosseguir?",
              showDenyButton: true,
              denyButtonText: "Não",
              confirmButtonText: "Sim",
            }).then((res) => {
              if (res.isConfirmed) {
                setStep(step + 1);
              }
            });
          } else {
            setStep(step + 1);
          }
        })(e);
      },
    },
    ...(loja?.usa_precificacao_corretiva_loja == "1"
      ? [
          {
            name: "Custos Extras",
            component: MarkupCustosExtrasProposta,
            commonProps: {
              form: formDadosGerais,
              blockNextStep: setBlockNextStep,
              valorColeta: formDadosGerais.control._formValues?.valorColeta,
              dadosCard: dadosCard,
              dadosCliente: dadosCliente,
            },
          },
          {
            name: "Precificação",
            component: PrecificacaoProposta,
            commonProps: {
              form: formDadosGerais,
              blockNextStep: setBlockNextStep,
              valorColeta: formDadosGerais.control._formValues?.valorColeta,
              dadosCard: dadosCard,
              dadosCliente: dadosCliente,
            },
          },
        ]
      : []),
    {
      name: "Observações",
      component: ObservacaoColeta,
      commonProps: {
        form: formDadosGerais,
      },
      submitFn: (e: any) => {
        const validade_proposta = new Date();
        validade_proposta.setDate(
          validade_proposta.getDate() +
            +defaultValues.tempo_validade_proposta_parametro,
        );
        formDadosGerais.setValue(
          "validade_proposta",
          getDateTimeBrasil({
            day: "2-digit",
            month: "2-digit",
            year: "numeric",
          }),
        );
        setStep(step + 1);
      },
    },
    {
      name: "Forma de Pagamento",
      component: FormPagamentoManutencoesProposta,
      commonProps: {
        formasPagamento: formasPagamento,
        loja: loja,
        contasBancariasLojas: contasBancariasLojas,
        dadosCard: dadosCard,
        proposta: {
          ...formDadosGerais?.control?._formValues,
          valorTotal_proposta:
            formDadosGerais?.control?._formValues?.ajusteValorFinalProposta,
          codForma_pagamento_proposta:
            formDadosGerais?.control?._formValues?.codForma_pagamento_proposta
              ?.value,
        },
        formaPagamentoPadrao: formaPagamentoPadrao,
        form: formPagamento,
      },
      submitFn: (e: any) => {
        formPagamento.handleSubmit(async (data: any) => {
          // data["id_proposta"] = proposta?.id_proposta;
          // data["cliente_proposta"] = proposta?.cliente_proposta;
          // if (
          //   formaPagamentoPadrao?.cod_forma_pagamento !=
          //   data?.codForma_pagamento_proposta
          // ) {
          //   data["forma_pagamento_atualizada"] = true;
          // }
          // formDadosGerais?.setValue("informacoes_pagamento", data);
          Object.keys(data).map((key) => {
            if (key != "codForma_pagamento_proposta") {
              formDadosGerais?.setValue(key, data[key]);
            }
          });
          formDadosGerais?.setValue(
            "codForma_pagamento_proposta",
            formPagamento?.control?._formValues?.codForma_pagamento_proposta,
          );
          setStep(step + 1);
        })(e);
      },
    },
    {
      name: "Resumo",
      component: ResumoPropostaCorretiva,
      commonProps: {
        id_coleta: dadosCard.id_coleta_cliente,
        proposta: proposta,
        nome_usuario: usuario?.nome_usuario,
        data_geracao_proposta: getDateTimeBrasil({
          hour: undefined,
          minute: undefined,
          second: undefined,
        }),
        validade_proposta: formValues.validade_proposta,
        qtd_visualizacoes_proposta: 0,
        valorTotal_proposta: +FormatFields.desformatarNumeros(
          formValues.valorFinalProposta,
        ),
        valor_desconto: formValues.valorDesconto,
        valor_total_sem_desconto:
          +FormatFields.desformatarNumeros(formValues.valorDesconto) +
          +FormatFields.desformatarNumeros(formValues.valorFinalProposta),
        valor_acrescimo: +FormatFields.desformatarNumeros(
          formValues.valorAcrescimo,
        ),
        valor_total_sem_acrescimo:
          +FormatFields.desformatarNumeros(formValues.valorFinalProposta) -
          +FormatFields.desformatarNumeros(formValues.valorAcrescimo),
        obs_negocio: dadosCard.obs_coleta,
        especificacoes: formValues.especificacoes,
        informacoes_adicionais_proposta:
          formValues.informacoes_adicionais_proposta,
        totalModulos: formValues.totalModulos,
        forma_pagamento_proposta: formValues.codForma_pagamento_proposta?.label,
        obs_proposta: formValues.obsColeta,
      },
    },
  ];
  //   ,
  //   [defaultValues]
  // );

  const StepComponent = steps[step]?.component;

  const camposDoStepAtual = useMemo(() => {
    const stepNome = (steps[step]?.name ?? "").toLowerCase();

    return camposPersonalizadosBd.filter((campo: any) => {
      const descricao = (
        campo.descricao_proposta_personalizado ?? ""
      ).toLowerCase();
      const etapa = (
        campo.etapaProposta_campo_personalizado ?? ""
      ).toLowerCase();

      return (
        campo.local_campo_personalizado === "1" &&
        ((descricao && stepNome.includes(descricao)) ||
          (etapa && stepNome.includes(etapa)))
      );
    });
  }, [step, camposPersonalizadosBd]);

  const botoes = [
    // {
    //   label: "Editar dados",
    //   icon: <BsArrowLeftShort size={24} />,
    //   className:
    //     "bg-primary max-sm:w-full flex items-center  rounded-md mr-5 py-2",
    //   onClick: () => {
    //     setMostrarPdf(false);
    //     setEdicaoDados(true);
    //   },
    //   mostrar: !inCard,
    // },
    {
      label: "Enviar por Whatsapp",
      icon: <BiLogoWhatsapp size={isMobile ? 17 : 24} />,
      className:
        "bg-success  max-sm:mb-2 max-sm:px-2 max-sm:!text-xs flex items-center rounded-md py-2",
      onClick: () => {
        const dados: any = {
          caminho_proposta: dadosProposta.caminho_proposta,
          aprovacao_cliente: dadosProposta.aprovacao_cliente,
          coleta_proposta: dadosProposta.coleta_proposta,
          id_proposta: dadosProposta.id_proposta,
          status_proposta: dadosProposta.status_proposta,
          id_cliente: dadosCliente["id_cliente"],
          id_card: dadosCard.id,
        };
        for (const key in dados) {
          formWhatsApp.setValue(key as never, dados[key] as never);
        }

        formWhatsApp.setValue(
          "whatsapp_cliente" as never,
          dadosCliente.telefone1_cliente as never,
        );
        setOpenModalWhatsApp(true);
        // const dados = {
        //   caminho_proposta: dadosProposta.caminho_proposta,
        //   aprovacao_cliente: 0,
        //   coleta_proposta: id_coleta,
        //   id_proposta: dadosProposta.id_proposta,
        //   status_proposta: 1,
        //   id_cliente: inCard ? dadosCliente["id_cliente"] : idCliente,
        //   id_card: dadosCard.id,
        // };
        // enviarLink(dados);
      },
      mostrar: statusSavingProposta === 1,
    },
    {
      label: "Enviar por E-mail",
      icon: <HiOutlineMail size={isMobile ? 17 : 24} />,
      className:
        "bg-primary max-sm:!text-xs max-sm:!mt-2 flex max-sm:px-2 items-center max-sm:my-2 rounded-md py-2 gap-1",
      onClick: () => {
        setOpenModalEmail(true);
      },
      mostrar: statusSavingProposta === 1,
    },
    {
      label: "Baixar PDF",
      icon: <BsFileEarmarkPdf size={isMobile ? 17 : 20} />,
      className:
        "bg-danger max-sm:!text-xs max-sm:px-2 flex items-center max-sm:my-2 rounded-md py-2 gap-1",
      onClick: handleDownload,
      mostrar: statusSavingProposta === 1,
    },
    {
      label: "Salvar PDF Novamente",
      icon: <BsFileEarmarkPdf size={isMobile ? 17 : 20} />,
      className:
        "bg-danger max-sm:!text-xs max-sm:px-2 flex items-center animate-pulse max-sm:my-2 rounded-md py-2 gap-1",
      onClick: handleDownload,
      mostrar: true && statusSavingProposta === 0,
    },
  ];

  function handleDownload() {
    const link = document.createElement("a");
    link.href = dadosProposta.linkProposta;

    link.setAttribute(
      "download",
      dadosProposta.caminho_proposta?.split("/").pop(),
    );
    link.setAttribute("target", "_blank");
    link.click();
  }

  const onSubmitEmail = (data: FieldValues) => {
    setLoadingEmail(true);
    data["id_proposta"] = dadosProposta.id_proposta;
    data["id_cliente"] = dadosCliente["id_cliente"];
    data["id_usuario"] = usuario.id_usuario;
    data["id_card"] = dadosCard.id;

    enviarLinkPropostaEmail(data)
      .then(() => {
        setOpenModalEmail(false);
        // reListarDadosKanban();
      })
      .finally(() => setLoadingEmail(false));
  };

  const enviarLink = (data: any) => {
    return enviarLinkProposta(data).then((e) => {
      // reListarDadosKanban();
      window.open(e["Whatsapp"]);
    });
  };

  const onSubmitWhatsApp = (data: FieldValues) => {
    setIsLoadingWhatsApp(true);

    data["id_usuario"] = usuario.id_usuario;
    // Swal.fire({
    //   title: "Sucesso",
    //   html: "Em breve você sera redirecionado!",
    //   didOpen: () => {
    //     Swal.showLoading();
    //   },
    //   timer: 6700,
    // }).then((result) => {
    //   if (result.dismiss === Swal.DismissReason.timer) {
    //   }
    // });
    const loadingLink = new Promise((resolve, reject) => {
      enviarLink(data)
        .then(() => {
          setOpenModalWhatsApp(false);
          // notificarNotificacao();
          resolve("Concluídio");
        })
        .catch((err) => {
          reject(err);
        })
        .finally(() => {
          setIsLoadingWhatsApp(false);
        });
    });

    toast
      .promise(loadingLink, {
        pending: {
          render(data: any) {
            return "Aguarde";
          },
        },
        success: {
          render(data: any) {
            return "Link criado!";
          },
        },
        error: {
          render(data: any) {
            return data.data;
          },
        },
      })
      .finally(() => setIsLoadingWhatsApp(false));
  };

  async function generateProposalPdf() {
    setIsLoading(true);

    const form = formDadosGerais;
    const data = form.control._formValues;
    const dataColeta: any = {
      ...data,
      id_coleta: dadosCard?.id_coleta_cliente,
      // idCliente: inCard ? dadosCliente["id_cliente"] : data.idCliente,
      idCliente: dadosCliente["id_cliente"],
      tipoPessoa_cliente: dadosCliente["tipoPessoa_cliente"],
      id_vendedor: dadosCard["responsaveis"]["Vendedor"],
      responsaveis: dadosCard["responsaveis"],
      // instituicao_financeira: data.instituicao_financeira
      //   .map((instituicao: any) => instituicao.id_inst)
      //   .join(","),
      instituicao_financeira: data.instituicao_financeira,
      ver_foto_vendedor: defaultValues.ver_foto_vendedor_parametro,
      idUsuario: usuario?.id_usuario,
      codForma_pagamento_proposta: data?.codForma_pagamento_proposta?.value,
    };

    ///
    const camposPersonalizados = Object.keys(data).filter(
      (key) => key.endsWith("_campo_personalizado") || key.endsWith("_cp"),
    );
    // listarParametros().then((parametros: any) => {
    const formatarNumero = FormatFields.formatarNumero;

    const dataProposta = {
      ...dataColeta,
      parametros: defaultValues,
      id_card: dadosCard.id,
      resultadoPrecificacao_proposta: dataColeta.resultadoPrecificacao
        ? JSON.stringify(dataColeta.resultadoPrecificacao)
        : "",
      ...camposPersonalizados.reduce((acc: any, key) => {
        acc[key] = data[key]; // Adiciona o campo ao objeto
        return acc;
      }, {}),
      // estimativa_geracao_mensal: [
      //   ...dataColeta.estimativa_geracao_mensal,
      //   +dataColeta.estimativa_geracao,
      // ],
      // media_consumos_ucs_mensal: [
      //   ...dataColeta.media_consumos_ucs_mensal,
      //   +dataColeta.consumoTotal,
      // ],
      id_loja: dadosCard?.id_loja_coleta,
      id_tipo_negocio: dadosCard?.tipoNegocio_coleta,
      tipoNegocio_coleta: dadosCard?.tipoNegocio_coleta,
    };

    const validade_proposta = new Date();
    validade_proposta.setDate(
      validade_proposta.getDate() +
        +defaultValues.tempo_validade_proposta_parametro,
    );

    // const outrosCustos_Cosip = dataProposta.ucs.reduce(
    //   (acc: number, uc: any) => {
    //     return (acc += +uc.cosip_uc_coleta + +uc.outros_custos_uc_coleta);
    //   },
    //   0
    // );

    // const tipoLigacao =
    //   dadosCard.tipoLigacao_coleta == "1"
    //     ? 30
    //     : dadosCard.tipoLigacao_coleta == "2"
    //       ? 50
    //       : 100;

    // const valorMensalSemSolar =
    //   (dataProposta.consumoTotal < tipoLigacao
    //     ? tipoLigacao
    //     : dataProposta.consumoTotal *
    //       +FormatFields.desformatarNumeros(
    //         dataProposta.precoTotal_tarifa
    //       )) + outrosCustos_Cosip;

    // const valorMensalComSolar =
    //   (dataProposta.consumoTotal - +dataProposta.estimativa_geracao <
    //   tipoLigacao
    //     ? tipoLigacao
    //     : dataProposta.consumoTotal -
    //       +dataProposta.estimativa_geracao *
    //         +FormatFields.desformatarNumeros(
    //           dataProposta.precoTotal_tarifa
    //         )) + outrosCustos_Cosip;

    // const valorMensalEconomia = valorMensalSemSolar - valorMensalComSolar;

    // const potencia_kit = Number(
    //   dataProposta.kitManual
    //     ? +dataProposta.potenciaKwp
    //     : +dataProposta.kitEscolhido?.potencia_kit
    // );

    // const tabela_geracao_val = {
    //   geracoes: dataProposta.estimativa_geracao_mensal.map(
    //     (geracao: any) => `${formatarNumero(+geracao)} kWh`
    //   ),
    //   consumos: dataProposta.media_consumos_ucs_mensal.map(
    //     (consumo: any) => `${formatarNumero(+consumo)} kWh`
    //   ),
    //   consumos_instantaneos: dataProposta.media_consumos_ucs_mensal.map(
    //     (consumo: any) =>
    //       `${formatarNumero(+consumo * (+dadosCard.simultaneidade_coleta / 100))} kWh`
    //   ),
    //   energias_ingetadas: dataProposta.estimativa_geracao_mensal.map(
    //     (geracao: any, index_geracao: number) =>
    //       `${formatarNumero(
    //         +geracao -
    //           +dataProposta.media_consumos_ucs_mensal.map(
    //             (consumo: any) =>
    //               +consumo * (+dadosCard.simultaneidade_coleta / 100)
    //           )[index_geracao] >=
    //           0
    //           ? +geracao -
    //               +dataProposta.media_consumos_ucs_mensal.map(
    //                 (consumo: any) =>
    //                   +consumo * (+dadosCard.simultaneidade_coleta / 100)
    //               )[index_geracao]
    //           : 0
    //       )} kWh`
    //   ),
    //   porcentagens_geracaoes: dataProposta.estimativa_geracao_mensal.map(
    //     (geracao: any, index_geracao: number) =>
    //       `${formatarNumero((+geracao / +dataProposta.media_consumos_ucs_mensal[index_geracao]) * 100)} %`
    //   ),
    // };

    // const meses = [
    //   "Janeiro",
    //   "Fevereiro",
    //   "Março",
    //   "Abril",
    //   "Maio",
    //   "Junho",
    //   "Julho",
    //   "Agosto",
    //   "Setembro",
    //   "Outubro",
    //   "Novembro",
    //   "Dezembro",
    //   "Média",
    // ];

    // const mesesSigla = [
    //   "JAN",
    //   "FEV",
    //   "MAR",
    //   "ABR",
    //   "MAI",
    //   "JUN",
    //   "JUL",
    //   "AGO",
    //   "SET",
    //   "OUT",
    //   "NOV",
    //   "DEZ",
    //   "MÉD",
    // ];

    // const tabela_geracao = meses.reduce((acc: any[], curr, currIndex) => {
    //   return [
    //     ...acc,
    //     {
    //       mes: curr,
    //       mesSigla: mesesSigla[currIndex],
    //       geracao: tabela_geracao_val["geracoes"][currIndex],
    //       consumo: tabela_geracao_val["consumos"][currIndex],
    //       consumo_instantaneo:
    //         tabela_geracao_val["consumos_instantaneos"][currIndex],
    //       energia_injetada:
    //         tabela_geracao_val["energias_ingetadas"][currIndex],
    //       porcentagem_geracao:
    //         tabela_geracao_val["porcentagens_geracaoes"][currIndex],
    //     },
    //   ];
    // }, []);
    const pdfData = {
      min_modulos: dataProposta.minModulos,
      max_modulos: dataProposta.maxModulos,
      nome_cliente: dataProposta.nome,
      // nome_vendedor: session.nome_usuario,
      nome_vendedor: vedndedorNegocio.nome_usuario,
      telefone_vendedor: vedndedorNegocio.telefone1_usuario,
      email_vendedor: vedndedorNegocio.email_usuario,
      validade_proposta: getDateTimeBrasil(
        {
          day: "2-digit",
          month: "2-digit",
          year: "numeric",
        },
        validade_proposta,
      ),
      numero_proposta: undefined,
      numero_negocio: dataProposta.id_coleta,
      disjuntor_coleta: dataProposta.disjuntor_proposta,
      // email_cliente: "email@mockado.com", // acrdito que seja o email de contato da empresa
      telefone_cliente: dataProposta.telefone, // necessário
      // cidade_cliente: dataProposta.cidade.label,
      cidade_cliente: dadosCliente.cidade_cliente,
      distribuidora_energia: dataProposta.concessionaria_proposta,
      ligacao_cliente: dataProposta.nome_tipoLigacao_proposta,
      // media_energia_mensal: dataProposta.mediaConsumo, // Média de energia mensal (Valores)
      // media_energia_mensal: dataProposta.consumoTotal, // Média de energia mensal (Valores)
      // Média de energia mensal (Totais kWh/mês)
      // img_grafico_rsi: dataProposta.chartRsi.imgURI, // Gráfico de Retorno sobre o investimento:
      img_grafico_rsi: "", // Gráfico de Retorno sobre o investimento:
      // img_grafico_geracao: dataProposta.chartGeracao.imgURI,
      // potencia_kit: formatarNumero(
      //   dataProposta.kitManual
      //     ? +dataProposta.potenciaKwp
      //     : +dataProposta.kitEscolhido?.potencia_kit
      // ),
      ...camposPersonalizados.reduce((acc: any, key) => {
        acc[key] = data[key]; // Adiciona o campo ao objeto
        return acc;
      }, {}),
      potencia_modulos: dataProposta.potencia_modulo,
      potencia_inversores: dataProposta.potencia_inversores,
      // Dados da Estrutura (pode ter várias, guardar um espaço para ele)
      // Linha
      // Estrutura
      quantidade_modulos: dataProposta.totalModulos, // Arrumar a quantidade por linha
      // Tabela de produtos do kit (similar ao contrato)
      // Sobre os itens do kit com o:
      valor_bruto: formatarValor(
        +dataProposta.resultadoPrecificacao?.preco_venda,
      ),
      porcentagem_desconto: formatarValor(
        dataProposta.porcentagemValorFinal
          ? +FormatFields.desformatarNumeros(dataProposta.porcentagemValorFinal)
          : 0,
      ),
      valor_final: formatarValor(
        +FormatFields.desformatarNumeros(dataProposta.valorFinalProposta),
      ),
      observacoes: dataProposta.obsColeta,
      // componentes_tabela_kit_val: dataProposta.componente,
      componentes_tabela_kit_val: dataProposta.componentesKit,
      tabela_orientacoes_val: dataProposta.distribuicaoDosModulos,
      // tabela_geracao_val,
      // tabela_geracao,
      // componentes_tabela_estrutura_val: dataProposta.estruturasForm.map(
      //   (e: any) => ({
      //     ...e,
      //     label: e.suporte.label,
      //     value: e.modulosPorLinha,
      //   })
      // ),
      nome_negocio: dadosCard.nome_negocio_coleta,
      // dataProposta.nome_negocio || dataProposta.escolha_negocio.label,
      // telhado: dataProposta.telhado?.label || dataProposta?.structure?.label,
      concessionaria: dataProposta.concessionaria_proposta,
      instituicao_financeira: data.instituicao_financeira,
      // medias_energia_beneficiarias:
      //   dataProposta.mediaConsumoBeneficiaria || [],
      // nro_ucs_beneficiarias: dataProposta.nrUcBeneficiaria || [],
      // uc_cliente: dataProposta.uc_cliente,
      // media_consumoTotal: formatarNumero(+dataProposta.consumoTotal),
      // consumoTotal_anual: (dataProposta.consumoTotal * 12).toFixed(2),
      // estimativa_geracao: formatarNumero(
      //   +(+dataProposta.estimativa_geracao).toFixed(2)
      // ),
      // geracao_anual: (+dataProposta.estimativa_geracao * 12).toFixed(2),
      // abatimento: formatarNumero(+dataProposta.abatimento),
      // custo_por_wp: formatarValor(
      //   +FormatFields.desformatarNumeros(dataProposta.valorFinalProposta) /
      //     (Number(
      //       formValues.kitManual
      //         ? formValues.potenciaKwp
      //         : formValues.kitEscolhido?.potencia_kit
      //     ) *
      //       1000)
      // ),
      area_ocupada: formatarNumero(dataProposta.area_ocupada),
      //     numero_uc_geradora: dataProposta.ucs[0]?.uc,
      //     media_consumo_uc_geradora: parseFloat(
      //       +dataProposta.ucs[0]?.valor == +dataProposta.ucs[0]?.valor
      //         ? dataProposta.ucs[0]?.valor
      //         : String(
      //             dataProposta.ucs[0]?.valor.reduce(
      //               (acc: number, curr: string) => acc + +curr,
      //               0
      //             ) /
      //               dataProposta.ucs[0].valor.filter(
      //                 (val: number | string) => val !== ""
      //               ).length
      //           )
      //     ).toFixed(2),
      //     valor_conta_energia_geradora: formatarValor(
      //       (+dataProposta.ucs[0]?.valor == +dataProposta.ucs[0]?.valor
      //         ? dataProposta.ucs[0]?.valor
      //         : dataProposta.ucs[0]?.valor.reduce(
      //             (acc: number, curr: string) => acc + +curr,
      //             0
      //           ) /
      //           dataProposta.ucs[0].valor.filter(
      //             (val: number | string) => val !== ""
      //           ).length) *
      //         +FormatFields.desformatarNumeros(dataProposta.precoTotal_tarifa)
      //     ),
      //     ucs_beneficiarias: dataProposta.ucs
      //       .filter((_: any, index: number) => index != 0)
      //       .map(
      //         (uc: any) =>
      //           `${uc.uc}: ${
      //             +uc.valor == +uc.valor
      //               ? +uc.valor
      //               : uc.valor.reduce(
      //                   (acc: number, curr: string) => acc + +curr,
      //                   0
      //                 ) /
      //                 uc.valor.filter((val: number | string) => val !== "").length
      //           }`
      //       ).join(`
      // `),
      //     tabela_ucs: dataProposta.ucs.map((uc: any) => ({
      //       ...uc,
      //       concessionaria: dadosCard.nome_concessionaria,
      //       valor:
      //         formatarNumero(
      //           +uc.valor == +uc.valor
      //             ? +uc.valor
      //             : uc.valor.reduce((acc: number, curr: string) => acc + +curr, 0) /
      //                 uc.valor.filter((val: number | string) => val !== "").length
      //         ) + " kWh",
      //       conta: formatarValor(
      //         (+uc.valor == +uc.valor
      //           ? +uc.valor
      //           : uc.valor.reduce((acc: number, curr: string) => acc + +curr, 0) /
      //             uc.valor.filter((val: number | string) => val !== "").length) *
      //           +FormatFields.desformatarNumeros(dataProposta.precoTotal_tarifa)
      //       ),
      //     })),
      //     tabela_ubs: dataProposta.ucs
      //       .filter((_: any, index: number) => index != 0)
      //       .map((uc: any) => ({
      //         ...uc,
      //         concessionaria: dadosCard.nome_concessionaria,
      //         valor:
      //           formatarNumero(
      //             +uc.valor == +uc.valor
      //               ? +uc.valor
      //               : uc.valor.reduce(
      //                   (acc: number, curr: string) => acc + +curr,
      //                   0
      //                 ) /
      //                   uc.valor.filter((val: number | string) => val !== "").length
      //           ) + " kWh",
      //         conta: formatarValor(
      //           (+uc.valor == +uc.valor
      //             ? +uc.valor
      //             : uc.valor.reduce((acc: number, curr: string) => acc + +curr, 0) /
      //               uc.valor.filter((val: number | string) => val !== "").length) *
      //             +FormatFields.desformatarNumeros(dataProposta.precoTotal_tarifa)
      //         ),
      //       })),
      garantia_modulos: calcularAnosEMeses(
        +(
          dataProposta.garantia_modulo ||
          defaultValues.garantia_modulos_parametro
        ),
      ),
      garantia_inversores: calcularAnosEMeses(
        +(
          dataProposta.garantia_inversor ||
          defaultValues.garantia_inversores_parametro
        ),
      ),
      garantia_servicos: calcularAnosEMeses(
        +defaultValues.garantia_servicos_parametro,
      ),
      garantia_estruturas: calcularAnosEMeses(
        dataProposta.garantia_estrutura ||
          +defaultValues.garantia_estruturas_parametro,
      ),
      payback_rsi: dataProposta.payback,
      // Novas Tags
      tabela_rsi_val: dataProposta.tabela_rsi,
      endereco_instalacao: dadosCard.endereco_instalacao_coleta,
      endereco_cliente: `${dadosCliente.rua_cliente ? dadosCliente.rua_cliente + ", " : ""}${
        dadosCliente.nro_cliente ? dadosCliente.nro_cliente + " - " : ""
      }${dadosCliente.bairro_cliente ? dadosCliente.bairro_cliente + ", " : ""}${
        dadosCliente.cidade_cliente ? dadosCliente.cidade_cliente + " - " : ""
      }${
        dadosCliente.estado_cliente ? dadosCliente.estado_cliente + ", " : ""
      }${dadosCliente.cep_cliente ? dadosCliente.cep_cliente : ""}`,
      eficiencia_modulos_25anos: `${
        dataProposta.modulo_proposta?.eficiencia_25anos_item ||
        defaultValues.eficiencia_25anos_modulo_parametro
      }%`,
      periodoEficiencia:
        dataProposta.modulo_proposta?.anos_eficiencia_item ||
        defaultValues.anos_eficiencia_modulo_parametro,
      modelo_modulo: dataProposta.modulo_proposta?.modelo_item,
      cpfcnpj_cliente: dataProposta.cpfcnpj_cliente,
      // tabela_inversores: dataProposta.componentesKit.filter(
      //   (e: any) => e.tipo_item == "8"
      // ),
      // // tabela_economia: [
      // //   {
      // //     sem: formatarValor(valorMensalSemSolar * 12) + " / ano",
      // //     com: formatarValor(valorMensalComSolar * 12) + " / ano",
      // //     economia: formatarValor(valorMensalEconomia * 12) + " / ano",
      // //   },
      // //   {
      // //     sem: formatarValor(valorMensalSemSolar) + " / mês",
      // //     com: formatarValor(valorMensalComSolar) + " / mês",
      // //     economia: formatarValor(valorMensalEconomia) + " / mês",
      // //   },
      // // ],
      // estimativa_geracao_por_placa: formatarNumero(
      //   (+dataProposta.estimativa_geracao / +dataProposta.totalModulos).toFixed(
      //     2
      //   )
      // ),
      // face_telhado: dataProposta.distribuicaoDosModulos
      //   .map(
      //     (orientacaoDistribuicao: any) =>
      //       orientacoes.find(
      //         (orientacao: any) =>
      //           orientacao.id_orientacao == orientacaoDistribuicao.orientacao
      //       )?.nome_orientacao
      //   )
      //   .join(", "),
      // dias_prazo_entrega:
      //   defaultValues.tabelaPrazos.find(
      //     (prazo: any) =>
      //       +prazo.potencia_inicial_prazo <= potencia_kit &&
      //       +prazo.potencia_final_prazo >= potencia_kit
      //   )?.dias_prazo || "0",
      // tabela_distribuicao_modulos: dataProposta.distribuicaoDosModulos,
      // media_irradiacao_diaria: formatarNumero(
      //   dataProposta.irradiacao_mensal?.reduce(
      //     (acc: number, curr: number) => (acc += curr),
      //     0
      //   ) / 365
      // ),
      especificacoes_manutencao: dataProposta.especificacoes,
      informacoes_adicionais_manutencao:
        dataProposta.informacoes_adicionais_proposta,
      total_modulos_manutencao: dataProposta.totalModulos,
      condicao_pagamento_manutencao: data?.codForma_pagamento_proposta?.label,
    };

    setMostrarPdf(true);
    // setTesteProposta(pdfData);
    setIsLoading(false);
    setDadosProposta(dataProposta);
    setProposta(pdfData);
    // reListarDadosKanban();
    // });

    ///

    // await cadastrarProposta(dataColeta).then((res: any) => {
    //   setMostrarPdf(true);
    //   setDadosProposta(res.body);
    //   setIsLoading(false);
    //   reListarDadosKanban();
    // });
  }

  return isLoaded ? (
    !mostrarPdf ? (
      <div>
        <div className="pb-1">
          <div className="font-bold text-lg w-fit" style={{ margin: "0 auto" }}>
            {tiposServicos?.find(
              (tipo: any) =>
                tipo.id_tipo_servico == dadosCard.tipo_servico_coleta,
            )?.nome_tipo_servico || "Sem tipo de serviço"}
          </div>
          <div className="w-fit" style={{ margin: "0 auto" }}>
            Quantidade de modulos: {dadosCard?.qtdModulos_coleta}
          </div>
        </div>
        <Stepper
          alternativeLabel
          connector={<ColorlibConnector />}
          activeStep={
            // isMobile
            //   ? activeStep == 0
            //     ? activeStep
            //     : activeStep == stepsOriginals.length - 1
            //       ? 2
            //       : 1
            //   :
            step
          }
          // className="mb-2 "
        >
          {steps.map((s, index) => {
            return (
              <Step
                key={index}
                completed={index < step}
                // style={{
                //   display: steps.includes(label) ? "block" : "none",
                // }}
              >
                <StepButton
                  onClick={() => setStep(index)}
                  style={{
                    margin: "0",
                    padding: "0",
                  }}
                >
                  <StepLabel
                    StepIconComponent={(e) => ColorlibStepIcon(e, index)}
                    className="text-black !text-xs dark:text-white "
                  >
                    {s.name}
                  </StepLabel>
                </StepButton>
              </Step>
            );
          })}
        </Stepper>
        <div className="pb-2 flex w-full justify-between">
          <div>
            <Button
              type="button"
              className={`flex border-[1px] border-[#cbced4] bg-primary hover:brightness-90 px-9 h-9 items-center rounded-lg ${!(step > 0) && "hidden"}`}
              color="inherit"
              // disabled={activeStep === 0}
              // onClick={handleBack}
              onClick={() => setStep((prev) => prev - 1)}
              loading={isLoading}
              sx={{ mr: 1 }}
            >
              Voltar
            </Button>
          </div>
          <Button
            // disabled={stepperActiveManagement}
            className={`flex border-[1px] border-[#cbced4] bg-primary hover:brightness-90 px-9 h-9 items-center rounded-lg ${!(step < steps.length - 1) && "hidden"}`}
            type="button"
            // onClick={handleNext}
            disabled={blockNextStep}
            loading={isLoading}
            onClick={(e: any) => {
              if (steps[step]?.submitFn) {
                steps[step]?.submitFn?.(e);
              } else {
                setStep((prev) => prev + 1);
              }
            }}
            sx={{ mr: 1 }}
          >
            Próximo
          </Button>
          <Button
            // disabled={stepperActiveManagement}
            className={`flex border-[1px] border-[#cbced4] bg-primary hover:brightness-90 px-9 h-9 items-center rounded-lg ${step != steps.length - 1 && "hidden"}`}
            type="button"
            // onClick={handleNext}
            disabled={blockNextStep}
            loading={isLoading}
            onClick={(e: any) => {
              // if (steps[step]?.submitFn) {
              //   steps[step]?.submitFn?.(e);
              // } else {
              //   setStep((prev) => prev + 1);
              // }

              generateProposalPdf().finally(() => setIsLoading(false));
            }}
            sx={{ mr: 1 }}
          >
            Finalizar
          </Button>
        </div>
        {steps[step]?.name}
        <StepComponent
          {...steps[step]?.commonProps}
          {...{
            camposPersonalizados: camposPersonalizadosBd
              .filter(
                (campo: any) =>
                  campo.local_campo_personalizado === "1" &&
                  (steps[step]?.name
                    ?.toLowerCase()
                    ?.includes(
                      campo.descricao_proposta_personalizado?.toLowerCase(),
                    ) ||
                    steps[step]?.name
                      ?.toLowerCase()
                      ?.includes(
                        campo.etapaProposta_campo_personalizado?.toLowerCase(),
                      )),
              )
              .some((campo: any) => campo) ? (
              <CamposPersonalizados
                key={step}
                dataCard={dadosCard}
                formulario={formDadosGerais}
                idLoja={dadosCard.id_loja_coleta}
                locaisProposta={steps}
                localAtualProposta={step}
                localCampo="1"
                tipoNegocio={dadosCard?.tipoNegocio_coleta}
                showBorderContainer
              />
            ) : (
              <></>
            ),
            camposPersonalizadosData: camposDoStepAtual,
          }}
        />
        {/* {true ? (
          steps[step]?.component
        ) : (
          <div className="flex relative mt-[10%] overflow-hidden items-center justify-center">
            <LoaderSun />
          </div>
        )} */}
        {/* <div
          className={`border ${
            camposPersonalizadosBd
              .filter(
                (campo: any) =>
                  campo.local_campo_personalizado === "1" &&
                  (steps[step!]?.name?.includes(
                    campo.descricao_proposta_personalizado,
                  ) ||
                    steps[step!]?.name?.includes(
                      campo.etapaProposta_campo_personalizado,
                    )),
              )
              .some((campo: any) => campo)
              ? "block"
              : "hidden"
          } p-2 mt-4 pt-5 relative rounded-md border-stroke`}
        >
          <span className="px-1 absolute -top-3 bg-white">
            Campos Personalizados
          </span>
          <CamposPersonalizados
            dataCard={dadosCard}
            formulario={formDadosGerais}
            locaisProposta={steps}
            localAtualProposta={step}
            localCampo="1"
            tipoNegocio={dadosCard?.tipoNegocio_coleta}
          />
        </div> */}
      </div>
    ) : (
      <>
        {isSavingProposal && (
          <span className="flex text-center justify-center ">
            <span className="bg-slate-200 font-semibold text-black px-9 p-3 rounded-md inline-flex items-center">
              <span className="mr-2">Salvando Proposta</span>
              <span aria-hidden="true">{dotsStr}</span>
              <span className="sr-only" aria-live="polite">
                {dots} ponto{dots === 1 ? "" : "s"}
              </span>
            </span>
          </span>
        )}
        <div>
          <h1 className="text-2xl max-sm:text-sm text-center m-4 font-medium">
            Proposta Comercial Nº {dadosProposta.id_proposta} / Rev.{" "}
            {dadosProposta.revisao} - Cliente {dadosCliente.nome_cliente}
          </h1>
          <Divider />
          <div className="flex md:gap-2 max-sm:gap-1  justify-center pb-4">
            {botoes.map(
              (botao, index) =>
                botao.mostrar && (
                  <Button
                    key={index}
                    className={botao.className + ``}
                    onClick={botao.onClick}
                  >
                    {botao.icon}
                    {botao.label}
                  </Button>
                ),
            )}
          </div>
          {loja?.tipoAssintatura_loja === "1" ? (
            <FormPropostaDrive
              parametros={defaultValues}
              dadosProposta={proposta}
              dadosFormProposta={dadosProposta}
              usuario={usuario}
              camposPersonalizados={camposPersonalizadosSearch}
              dadosCliente={dadosCliente}
              setStatusSavingProposta={setStatusSavingProposta}
              setIsSavingProposal={setIsSavingProposal}
              setDadosProposta={setDadosProposta}
              relacionarDados={relacionarDadosProposta}
              setMostrarPdf={setMostrarPdf}
              dadosCard={dadosCard}
              setActiveStepPendencias={setActiveStepPendencias}
              activeStepPendencias={activeStepPendencias}
              loja={loja}
            />
          ) : (
            <FormProposta
              dadosProposta={proposta}
              dadosFormProposta={dadosProposta}
              setDadosProposta={setDadosProposta}
              relacionarDados={relacionarDadosProposta}
              setMostrarPdf={setMostrarPdf}
              dadosCard={dadosCard}
              // setActiveStepPendencias={setActiveStepPendencias}
              // activeStepPendencias={activeStepPendencias}
            />
          )}
          <ModalComponente
            hasForm={false}
            header="Enviar E-mail"
            defaultW="w-[400px]"
            opened={openModalEmail}
            onClose={() => setOpenModalEmail(!openModalEmail)}
            hasSaveButton={false}
          >
            <div className="mt-5">
              <div className="bg-secondaryMenu bg-opacity-30 text-black-2 rounded-lg text-center text-lg mb-5">
                <span>
                  Por favor, preencha o:
                  <strong>
                    <i>Email</i>
                  </strong>
                </span>
              </div>

              <form
                className="flex flex-col gap-5"
                onSubmit={handleEmail(onSubmitEmail)}
              >
                <Input
                  formulario={formEmail}
                  label="Email"
                  name="email_cliente"
                  error="Preencha o Motivo"
                  required
                />
                <Button
                  type="submit"
                  disabled={loadingEmail}
                  className="w-full bg-primary mt-5"
                >
                  Enviar
                </Button>
              </form>
            </div>
          </ModalComponente>
          <ModalComponente
            hasForm={false}
            header="Enviar WhatsApp"
            defaultW="w-[400px]"
            opened={openModalWhatsApp}
            onClose={() => setOpenModalWhatsApp(!openModalWhatsApp)}
            hasSaveButton={false}
          >
            <div className="mt-5">
              <div className="bg-secondaryMenu bg-opacity-30 text-black-2 rounded-lg text-center text-lg mb-5">
                <span>
                  Por favor, preencha o:{" "}
                  <strong>
                    <i>WhatsApp</i>
                  </strong>
                </span>{" "}
              </div>

              <form
                className="flex flex-col gap-5"
                onSubmit={handleWhatsApp(onSubmitWhatsApp)}
              >
                <Input
                  formulario={formWhatsApp}
                  label="WhatsApp"
                  name="whatsapp_cliente"
                  mascara="telefone"
                  error="Informe o WhatsApp"
                  required
                />
                <Button
                  loading={isLoadingWhatsApp}
                  className="w-full bg-primary mt-5"
                >
                  Salvar
                </Button>
              </form>
            </div>
          </ModalComponente>
        </div>
      </>
    )
  ) : (
    <div className="flex relative mt-[10%] overflow-hidden items-center justify-center">
      <LoaderSun />
    </div>
  );
};

export default PropostaCorretiva;