import { checkTemplate, CUSTOM_A4_PDF, Template } from "@pdfme/common";
import { Designer } from "@pdfme/ui";
import { useEffect, useRef, useState } from "react";

import LoaderSun from "@/components/common/Loader/LoaderSun";
import { Menubar } from "@/components/ui/menubar";
import { obterKitPorBudget_id } from "@/requests/CRM/APIHelte/obterKitPorBudget_id";
import { listarComponentesKitByKitId } from "@/requests/CRUD/ColetaDados/cadastroColetaDados";
import extenso from "extenso";

import Button from "@/components/Forms/Button";
import { deletarOrdemServico } from "@/requests/CRM/PosvOrdensServico/deletarOrdemServico";
import { listarUltimoIdOrdemServico } from "@/requests/CRM/PosvOrdensServico/listarUltimoIdOrdemServico";
import { salvarBaixaOrdemServicoInstalador } from "@/requests/CRM/PosvOrdensServico/salvarBaixaOrdemServicoInstalador";
import { salvarOrdemServico } from "@/requests/CRM/PosvOrdensServico/salvarOrdemServico";
import { listarUcsColeta } from "@/requests/CRM/UCs/listarUcsColeta";
import { obterFinanciadorNegocio } from "@/requests/CRUD/Cliente/obterFinanciadorNegocio";
import { addConclusaoPendencia } from "@/requests/CRUD/ConclusaoPendencia/conclusaoPendencia";
import { listarLojas } from "@/requests/CRUD/Lojas/listarLojas";
import { obterDistribuicaoModulos } from "@/requests/CRUD/Propostas/obterDistribuicaoModulos";
import { listarUsuarioPeloId } from "@/requests/CRUD/Usuario/listarUsuarios";
import { baixarAwsBase64 } from "@/requests/common/Aws/baixarAws";
import { useOrdemServicoContext } from "@/src/contexts/OrdemServicoContext";
import { useScreenContext } from "@/src/contexts/ScreenContext";
import { useAuth } from "@/src/contexts/authContext";
import { useKanbanContext } from "@/src/contexts/kanbanContext";
import { formatarValor, FormatFields, getDateBrasil } from "@/utils";
import {
  generatePDF,
  getFontsData,
  getPlugins,
  getTemplate,
  openBlob,
  readFile,
  splitBase64,
} from "@/utils/pdfme/helper";
import axios from "axios";
import { Maximize, Minimize } from "lucide-react";
import Image from "next/image";
import { PDFDocument } from "pdf-lib";
import { BsFileEarmarkPdf } from "react-icons/bs";
import { FaFileUpload, FaRegFilePdf } from "react-icons/fa";
import { toast } from "react-toastify";
import LoaderGif from "../../../../public/images/loaders/loader2.gif";
import VisualizarDocGerado from "../documentos_gerados/visualizacaoDocumentoGerado";

type Mode = "form" | "viewer";
let osIdTemporario = 0;
let osSalvo = false;

const FormTemplateGeracaoOS = ({
  dadosCard,
  dadosCliente,
  proposta,
  contrato,
  reloadOrdensServico,
  camposPersonalizados,
  lojas,
  setActiveStepAtual,
  cronogramaInstalacao,
  setIsLoading,
  activeStep,
  templateString,
  ordensServico,
  dataFormGeracaoOS,
  dataFormBaixaOSInstalador,
  agendamento,
  usuarios,
  responsabilidaesFinanceiras,

  // setPdf,
  setStep,
  botoes,
  tipoServicoName,
}: any) => {
  const uiRef = useRef<HTMLDivElement | null>(null);
  // const ui = useRef<Designer | Viewer | null>(null);
  const ui = useRef<Designer | null>(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const [isFullscreen, setIsFullscreen] = useState(false);
  const otherRef = useRef<HTMLDivElement | null>(null);
  const [pdf, setPdf] = useState<any>();

  const [isSavingOS, setIsSavingOS] = useState(true);
  const [caminhoPdfGerado, setCaminhoPdfGerado] = useState("");

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

  // Passo 2: Formatando as chaves para pegar apenas a parte depois do `^`
  const camposPersonalizadosFormat = Object.fromEntries(
    Object.entries(camposPersonalizadosSearch).map(([key, value]) => [
      key.split("^")?.pop(),
      value,
    ])
  );

  const { valuesSession, usuario } = useAuth();
  const { reListarDadosKanban } = useKanbanContext();
  const { isMobile } = useScreenContext();

  // const { relacionarDadosContrato } = useContractContext();
  const {
    relacionarDadosOrdemServico,
    camposRelacionamentosOrdensServico,
    camposPersonalizadosRelacionamentosOrdensServico,
  } = useOrdemServicoContext();

  const formatarNumero = FormatFields.formatarNumero;

  const initTemplate = async () => {
    let template: Template = getTemplate();
    try {
      // const templateString = localStorage.getItem("template");

      const data = {
        id_tipo_negocio: dadosCard.tipoNegocio_coleta,
        id_loja: dadosCard.id_loja_coleta,
      };

      const financiador = await obterFinanciadorNegocio({
        id_coleta: dadosCard.id_coleta_cliente,
      });

      const clienteOuFinanciador = financiador
        ? {
            ...dadosCliente,
            ...financiador,
            tipoPessoa_cliente: financiador.tipoPessoa_financiador,
            nome_cliente: financiador.nome_financiador,
            cpfcnpj_cliente: financiador.cpfcnpj_financiador,
            // id_coleta_cliente: "",
            nro_cliente: financiador.nro_financiador,
            cidade_cliente: financiador.cidade_financiador,
            estado_cliente: financiador.estado_financiador,
            cep_cliente: financiador.cep_financiador,
            rua_cliente: financiador.rua_financiador,
            bairro_cliente: financiador.bairro_financiador,
            comp_cliente: financiador.comp_financiador,
            nomeEmpresa_cliente: financiador.nomeEmpresa_financiador,
            logradouroEmpresa_cliente:
              financiador.logradouroEmpresa_financiador,
            complementoEmpresa_cliente:
              financiador.complementoEmpresa_financiador,
            bairroEmpresa_cliente: financiador.bairroEmpresa_financiador,
            cepEmpresa_cliente: financiador.cepEmpresa_financiador,
            cidadeEmpresa_cliente: financiador.cidadeEmpresa_financiador,
            ufEmpresa_cliente: financiador.ufEmpresa_financiador,
            nomeResponsavelFisico_cliente:
              financiador.nomeResponsavelFisico_financiador,
            cpfResponsavel_cliente: financiador.cpfResponsavel_financiador,
          }
        : dadosCliente;

      if (!dataFormGeracaoOS?.id_pvos) {
        const osId = Number(await listarUltimoIdOrdemServico());

        // setContratoIdTemporario(osId);
        osIdTemporario = osId;
      }

      let apiKit: any = {};

      const componentes = ["2", "4"].includes(dadosCard?.tipoNegocio_coleta)
        ? []
        : await (proposta.api_kit_proposta == "1"
            ? obterKitPorBudget_id(proposta.kit_proposta).then((res) => {
                apiKit = res;
                return res.products.map((componente: any) => {
                  const isModuloOuInversor =
                    componente.category.name.toLowerCase().includes("módulo") ||
                    componente.category.name.toLowerCase().includes("modulo") ||
                    componente.category.name.toLowerCase().includes("inversor");
                  return {
                    name: componente.name,
                    category: componente.category.name,
                    qtd: isModuloOuInversor ? componente.qtd : "INCLUSO",
                  };
                });
              })
            : listarComponentesKitByKitId(proposta.kit_proposta).then(
                (res: any) =>
                  res.componentesKit
                    .filter((componente: any) => componente.descricao)
                    .map((componente: any) => {
                      const elementos = [1, 2, 3, 4];
                      const isModuloOuInversor =
                        componente.nome == "Módulos" ||
                        componente.categoria
                          ?.toLowerCase()
                          .includes("módulo") ||
                        componente.categoria
                          ?.toLowerCase()
                          .includes("modulo") ||
                        componente.categoria
                          ?.toLowerCase()
                          .includes("inversor") ||
                        componente.tipo_item == "8"; // tipo_item 8 é inversor

                      const qtdCalculada =
                        componente.nome == "Módulos"
                          ? elementos.reduce(
                              (accumulator, currentValue) =>
                                accumulator +
                                +proposta[`qtdModulos${currentValue}_proposta`],
                              0
                            )
                          : componente.qtd;

                      return {
                        ...componente,
                        name: componente.descricao,
                        category: componente.categoria,
                        qtd: isModuloOuInversor ? qtdCalculada : "INCLUSO",
                      };
                    })
              ));

      let localizacao = "";

      if (dadosCard.latitude && dadosCard.longitude) {
        const googleMapsApiKey = "AIzaSyDGmjm0xgXvIWV8ZO6tCvTDiN3-AvGzmVc";
        localizacao = await axios
          .get(
            `https://maps.googleapis.com/maps/api/geocode/json?latlng=${dadosCard.latitude},${dadosCard.longitude}&key=${googleMapsApiKey}`
          )
          .then((res) => {
            console.log("res: ", res);
            return res.data.results[0].formatted_address;
          });
      }
      const ucTable = await listarUcsColeta(dadosCard.id_coleta_cliente).then(
        (res) => {
          let ucsColeta: any = [];
          const ucsBeneficiarias = res.filter((uc: any) => {
            if (uc.isGeradora_uc_coleta != "0") {
              ucsColeta.push(uc);
            }
            return uc.isGeradora_uc_coleta == "0";
          });
          if (ucsColeta[0] == undefined) {
            ucsColeta.push({
              id_uc_coleta: "",
              codColeta_uc_coleta: dadosCard.id_coleta_cliente,
              isGeradora_uc_coleta: 1,
              numero_uc_coleta: dadosCard.uc_coleta,
              valor: 0,
            });
          }

          ucsColeta = [...ucsColeta, ...ucsBeneficiarias];

          const ucsForm = ucsColeta.map((uc: any, index: number) => {
            const valor =
              +uc.valor == +uc.valor
                ? +uc.valor
                : uc.valor.reduce(
                    (acc: number, curr: string) => acc + +curr,
                    0
                  ) /
                  uc.valor.filter((val: number | string) => val !== "").length;
            return {
              id_uc_coleta: uc.id_uc_coleta,
              uc: !uc.numero_uc_coleta ? "" : uc.numero_uc_coleta,
              nome:
                uc.isGeradora_uc_coleta == "1"
                  ? "UG " + (!uc.numero_uc_coleta ? "" : uc.numero_uc_coleta)
                  : "UB " + (!uc.numero_uc_coleta ? "" : uc.numero_uc_coleta),
              key: index,
              tipoValor: +uc.valor == +uc.valor ? "Média" : "Mensal",
              concessionaria: dadosCard.nome_concessionaria,
              valor: formatarNumero(valor) + "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) * +proposta.precoDigitadoTarifa_proposta
              ),
              tipo: uc.isGeradora_uc_coleta == "1" ? "GERADORA" : "BENEFICIADA",
              valor_bruto: valor,
            };
          });
          return ucsForm;
        }
      );
      const dadosLoja: any = await listarLojas().then((res: any) =>
        res.find((loja: any) => loja.id_loja == dadosCard.id_loja_coleta)
      );

      const caucularDiaInstalacao = (kit: any, cronogramaInstalacao: any[]) => {
        const potencia_kit = parseFloat(
          proposta.api_kit_proposta == 1
            ? kit.potency
            : proposta.potenciaSistema_proposta
        );

        const resultado = cronogramaInstalacao.find((cronograma) => {
          if (
            parseFloat(cronograma.potencia_inicial_prazo) <= potencia_kit &&
            parseFloat(cronograma.potencia_final_prazo) >= potencia_kit
          )
            return true;
        });

        if (!resultado) {
          console.log("resultado: 90");
          return "90";
        }

        console.log("resultado: ", resultado);
        return resultado.dias_prazo;
      };

      const formatarMensagem = (dados: any) => {
        return dados.tipoPessoa_cliente
          ? `${dados.nome_cliente}, brasileiro(a), inscrito(a) no CPF:${dados.cliente_cpf}, com endereço: ${[
              dados.rua_moradia_cliente,
              dados.numero_moradia_cliente,
              dados.complemento_moradia_cliente,
              dados.bairro_moradia_cliente,
              dados.cidade_moradia_cliente,
              dados.estado_moradia_cliente,
              dados.cep_moradia_cliente,
            ]
              .filter(Boolean)
              .join(", ")}.`
          : `${dados.razao_social_cliente}, pessoa jurídica, inscrita no CNPJ sob o nº ${dados.cliente_cnpj}, com sede na ${[
              dados.rua_empresa_cliente,
              dados.numero_empresa_cliente,
              dados.complemento_empresa_cliente,
              dados.bairro_empresa_cliente,
              dados.cidade_empresa_cliente,
              dados.estado_empresa_cliente,
              dados.cep_empresa_cliente,
            ]
              .filter(Boolean)
              .join(
                ", "
              )}, neste ato representada por, Sr(a). ${dados.nome_responsavel_empresa_cliente}, CPF: ${dados.cpf_responsavel_empresa_cliente}.`;
      };
      const lojaAtual = lojas.find(
        (loja: any) => loja.id_loja == dadosCard.id_loja_coleta
      );

      const orientacoes_proposta = await obterDistribuicaoModulos(
        proposta?.id_proposta
      );

      const inversores_proposta = componentes.filter(
        (componente: any) => componente?.tipo_item == "8"
      );
      const [qtd_min_modulos, qtd_max_modulos] = inversores_proposta.reduce(
        (acc: [number, number], inversor: any) => {
          const potenciaInversorW = parseFloat(inversor.potencia_item) * 1000; // Converte kW para W
          const underload = +inversor.underload_item / 100; // 70% -> 0.7
          const overload = +inversor.overload_item / 100; // 150% -> 1.5
          const potenciaModulo = +proposta?.potencia_modulo_proposta;
          const qtdItem = parseInt(inversor.qtd_item) || 1;

          let minModulos =
            (potenciaInversorW * qtdItem * underload) / potenciaModulo;
          minModulos = Math.floor(minModulos);

          let maxModulos =
            (potenciaInversorW * qtdItem * overload) / potenciaModulo;

          if (inversor.tipoInversor_item == "micro_inversor") {
            maxModulos = Math.floor(
              (potenciaInversorW * overload) / potenciaModulo
            );

            maxModulos =
              maxModulos > +inversor.qtdModulos_max_item
                ? +inversor.qtdModulos_max_item
                : maxModulos;

            maxModulos = maxModulos * qtdItem;
          }

          maxModulos = Math.floor(maxModulos);

          return [acc[0] + minModulos, acc[1] + maxModulos];
        },
        [0, 0]
      );

      const qtd_expansivel_modulos = String(
        qtd_max_modulos - +proposta?.modulosDigitado_proposta
      );

      let instalador: any = {};
      if (!!dadosCard?.responsaveis?.["Instalador"]) {
        console.log("instalador: ", dadosCard?.responsaveis?.["Instalador"]);
        await listarUsuarioPeloId(dadosCard?.responsaveis?.["Instalador"]).then(
          (usuarioInstalador) => {
            instalador = usuarioInstalador;
          }
        );
      }
      console.log("verificar endereco", dadosCard);
      // let templateJson = templateString
      //   ? await relacionarDadosContrato(JSON.parse(templateString), {
      //       // ...dadosCliente,
      //       ...proposta,
      //       ...dadosCard,
      //       ...camposPersonalizadosFormat,
      //       ...clienteOuFinanciador,
      //       valorTotal_proposta: formatarValor(proposta.valorTotal_proposta),
      //       valor_extenso_proposta: extenso(+proposta.valorTotal_proposta, {
      //         mode: "currency",
      //       }),
      //       localizacao_instalacao:
      //         dadosCard.endereco_instalacao_coleta || localizacao,
      //       potencia_kit:
      //         proposta.api_kit_proposta == 1
      //           ? apiKit.potency
      //           : proposta.potenciaSistema_proposta,
      //       tabela_kit_val: componentes,
      //       // revisaoContrato: coletaContratos.length + 1,
      //       osId,
      //       tabela_ucs: ucTable,
      //       tabela_ubs: ucTable.filter((uc: any, i: number) => i > 0),
      //       media_consumo_ucs_beneficiarias: formatarNumero(
      //         ucTable
      //           .filter((uc: any, i: number) => i > 0)
      //           .reduce(
      //             (acc: number, uc: any) => acc + Number(uc.valor_bruto),
      //             0
      //           )
      //       ),
      //       numero_uc_geradora: dadosCard.uc_coleta_numero,
      //       media_consumoTotal: formatarNumero(+proposta.consumoTotal_proposta),
      //       consumoTotal_anual: formatarNumero(
      //         (+proposta.consumoTotal_proposta * 12).toFixed(2)
      //       ),
      //       // sasa start
      //       dias_cronograma_instalacao: caucularDiaInstalacao(
      //         apiKit,
      //         cronogramaInstalacao
      //       ),
      //       endereco_loja: `${lojaAtual.endereco_loja}, ${lojaAtual.numero_loja}, ${lojaAtual.complemento_loja}, Bairro ${lojaAtual.bairro_loja}`,
      //       cep_loja: `${lojaAtual.cep_loja}`,
      //       cidade_loja: `${lojaAtual.cidade_loja}`,
      //       estado_loja: `${lojaAtual.estado_loja}`,
      //       proprietario_loja: `${lojaAtual.proprietario_loja}`,
      //       nome_loja: `${lojaAtual.razaosocial_loja}`,
      //       tipoPessoa_cliente: `${clienteOuFinanciador?.tipoPessoa_cliente == "F" ? "CPF" : "CNPJ"}`,
      //       email_loja: `${lojaAtual.email_loja}`,
      //       mensagem_contratante: formatarMensagem({
      //         tipoPessoa_cliente:
      //           clienteOuFinanciador.tipoPessoa_cliente == "F",
      //         nome_cliente: clienteOuFinanciador.nome_cliente,
      //         cliente_cpf: clienteOuFinanciador.cpfcnpj_cliente,
      //         rua_moradia_cliente: clienteOuFinanciador.rua_cliente,
      //         bairro_moradia_cliente: clienteOuFinanciador.bairro_cliente,
      //         numero_moradia_cliente: clienteOuFinanciador.nro_cliente,
      //         cidade_moradia_cliente: clienteOuFinanciador.cidade_cliente,
      //         complemento_moradia_cliente: clienteOuFinanciador.comp_cliente,
      //         estado_moradia_cliente: clienteOuFinanciador.estado_cliente,
      //         cep_moradia_cliente: clienteOuFinanciador.cep_cliente,
      //         razao_social_cliente: clienteOuFinanciador.nomeEmpresa_cliente,
      //         cliente_cnpj: clienteOuFinanciador.cpfcnpj_cliente,
      //         rua_empresa_cliente:
      //           clienteOuFinanciador.logradouroEmpresa_cliente,
      //         numero_empresa_cliente:
      //           clienteOuFinanciador.numeroEmpresa_cliente ?? "",
      //         complemento_empresa_cliente:
      //           clienteOuFinanciador.complementoEmpresa_cliente ?? "",
      //         bairro_empresa_cliente:
      //           clienteOuFinanciador.bairroEmpresa_cliente,
      //         cep_empresa_cliente: clienteOuFinanciador.cepEmpresa_cliente,
      //         cidade_empresa_cliente:
      //           clienteOuFinanciador.cidadeEmpresa_cliente,
      //         estado_empresa_cliente: clienteOuFinanciador.ufEmpresa_cliente,
      //         nome_responsavel_empresa_cliente:
      //           clienteOuFinanciador.nomeResponsavelFisico_cliente,
      //         cpf_responsavel_empresa_cliente:
      //           clienteOuFinanciador.cpfResponsavel_cliente,
      //       }),
      //       // sasa end
      //       estimativa_geracao: formatarNumero(
      //         +(+proposta.estimativa_proposta).toFixed(2)
      //       ),
      //       geracao_anual: (+proposta.estimativa_proposta * 12).toFixed(2),
      //       media_consumo_uc_geradora:
      //         ucTable[0]?.valor == ucTable[0]?.valor
      //           ? ucTable[0]?.valor
      //           : String(
      //               ucTable[0]?.valor.reduce(
      //                 (acc: number, curr: string) => acc + +curr,
      //                 0
      //               ) /
      //                 ucTable[0].valor.filter(
      //                   (val: number | string) => val !== ""
      //                 ).length
      //             ),
      //       agencia_loja: dadosLoja["agencia_loja"],
      //       conta_loja: dadosLoja["conta_loja"],
      //       pix_loja: dadosLoja["pix_loja"],
      //       complementos_bancarios_loja:
      //         dadosLoja["complementos_bancarios_loja"],
      //       cnpj_loja: dadosLoja["cnpj_loja"],
      //       orientacao_proposta: orientacoes_proposta?.[0]?.nome_orientacao,
      //       qtd_expansivel_modulos: qtd_expansivel_modulos,
      //       instalador_nome_empresa_terceirizada:
      //         instalador?.nome_empresa_terceirizada,
      //       instalador_cnpj_empresa_terceirizada:
      //         instalador?.cnpj_empresa_terceirizada,
      //       instalador_rua_empresa_terceirizada:
      //         instalador?.rua_empresa_terceirizada,
      //       instalador_numero_empresa_terceirizada:
      //         instalador?.numero_empresa_terceirizada,
      //       instalador_bairro_empresa_terceirizada:
      //         instalador?.bairro_empresa_terceirizada,
      //       instalador_cidade_empresa_terceirizada:
      //         instalador?.cidade_empresa_terceirizada,
      //       instalador_estado_empresa_terceirizada:
      //         instalador?.estado_empresa_terceirizada,
      //       instalador_cep_empresa_terceirizada:
      //         instalador?.cep_empresa_terceirizada,
      //     })
      //   : getTemplate();

      let templateJson = getTemplate();

      try {
        if (templateString) {
          const templateOriginal = JSON.parse(templateString);
          // const basePdfOriginal = templateOriginal?.basePdf;
          if (dataFormGeracaoOS?.caminho_os_pvos) {
            await baixarAwsBase64(dataFormGeracaoOS?.caminho_os_pvos).then(
              async (result) => {
                const resultObject =
                  typeof result === "string" ? JSON.parse(result) : result;

                const pdfBase64Original = resultObject.base64;
                templateOriginal["basePdf"] =
                  `data:application/pdf;base64,${pdfBase64Original}`;

                const schemasOriginal = templateOriginal["schemas"];
                const pdfDoc = await PDFDocument.load(
                  Buffer.from(pdfBase64Original, "base64")
                );

                if (!dataFormGeracaoOS?.regerarOS) {
                  templateOriginal["schemas"] = schemasOriginal?.map(
                    (page: any[]) => {
                      return page?.filter((schema: any) => {
                        return schema?.name?.includes("assinatura"); // colocar apenas o schema da assinatura no novo template
                      });
                    }
                  );
                }

                // const pages = pdfDoc.getPages();

                // templateOriginal["schemas"] = pages.map((page) => []); // descomentar para limpar os schemas
              }
            );
          }
          await Promise.all(
            dataFormGeracaoOS?.anexos
              ? dataFormGeracaoOS?.anexos?.map(
                  async (anexo: File, indexAnexo: number) => {
                    if (anexo?.type == "application/pdf") {
                      return readFile(anexo, "dataURL").then(
                        async (newPagePdfdata: any) => {
                          const templateAtual = templateOriginal;
                          const pdfBase64data: any = templateAtual.basePdf;

                          const pdfBase64 = splitBase64(pdfBase64data);
                          const newPagePdf = splitBase64(newPagePdfdata);

                          if (pdfBase64 == null || newPagePdf == null) {
                            return toast.error("Falha ao ler o pdf base");
                          }
                          const pdfDoc = await PDFDocument.load(
                            Buffer.from(pdfBase64, "base64")
                          );
                          const newDoc = await PDFDocument.load(
                            Buffer.from(newPagePdf, "base64")
                          );

                          const pages = pdfDoc.getPages();
                          const newPages = newDoc.getPages();

                          const schemas = templateAtual.schemas;

                          for (let i = 0; i < newPages.length; i++) {
                            const [existingPage] = await pdfDoc.copyPages(
                              newDoc,
                              [i]
                            );
                            pdfDoc.addPage(existingPage);
                            pages.push(newPages[i]);
                            schemas.push([]);
                          }

                          const newPdf = await pdfDoc.save();
                          const newPdfBase64 =
                            Buffer.from(newPdf).toString("base64");

                          templateOriginal["basePdf"] =
                            `data:application/pdf;base64,${newPdfBase64}`;
                          templateOriginal["schemas"] = schemas;

                          // designer.current.updateTemplate(
                          //   Object.assign(cloneDeep(designer.current.getTemplate()), {
                          //     basePdf: `data:application/pdf;base64,${newPdfBase64}`,
                          //     schemas,
                          //   })
                          // );
                        }
                      );
                    } else if (
                      ["image/jpg", "image/jpeg", "image/png"].includes(
                        anexo?.type
                      )
                    ) {
                      return readFile(anexo, "dataURL").then(
                        async (newImageData: any) => {
                          const templateAtual = templateOriginal;
                          const pdfBase64data: any = templateAtual.basePdf;

                          const pdfBase64 = splitBase64(pdfBase64data);
                          const newPagePdf = splitBase64(
                            CUSTOM_A4_PDF as string
                          );

                          if (pdfBase64 == null || newPagePdf == null) {
                            return toast.error("Falha ao ler o pdf base");
                          }
                          const pdfDoc = await PDFDocument.load(
                            Buffer.from(pdfBase64, "base64")
                          );
                          const newDoc = await PDFDocument.load(
                            Buffer.from(newPagePdf, "base64")
                          );

                          const pages = pdfDoc.getPages();
                          const newPages = newDoc.getPages();

                          const schemas = templateAtual.schemas;

                          for (let i = 0; i < newPages.length; i++) {
                            const [existingPage] = await pdfDoc.copyPages(
                              newDoc,
                              [i]
                            );
                            pdfDoc.addPage(existingPage);
                            pages.push(newPages[i]);
                            schemas.push([
                              {
                                name: `anexo-${indexAnexo}`,
                                type: "image",
                                content: newImageData,
                                position: { x: 0, y: 0 },
                                width: 210.06,
                                height: 297,
                                rotate: 0,
                                opacity: 1,
                                required: false,
                              },
                            ]);
                          }

                          const newPdf = await pdfDoc.save();
                          const newPdfBase64 =
                            Buffer.from(newPdf).toString("base64");

                          templateOriginal["basePdf"] =
                            `data:application/pdf;base64,${newPdfBase64}`;
                          templateOriginal["schemas"] = schemas;

                          // designer.current.updateTemplate(
                          //   Object.assign(cloneDeep(designer.current.getTemplate()), {
                          //     basePdf: `data:application/pdf;base64,${newPdfBase64}`,
                          //     schemas,
                          //   })
                          // );
                        }
                      );
                    }
                  }
                )
              : []
          ).then(async () => {
            // // Adiciona a assinatura como última página
            // if (dataFormBaixaOSInstalador?.assinatura) {
            //   const templateAtual = templateOriginal;
            //   const pdfBase64data: any = templateAtual.basePdf;
            //   const pdfBase64 = splitBase64(pdfBase64data);
            //   const newPagePdf = splitBase64(CUSTOM_A4_PDF as string);
            //   if (pdfBase64 == null || newPagePdf == null) {
            //     return toast.error("Falha ao ler o pdf base");
            //   }
            //   const pdfDoc = await PDFDocument.load(
            //     Buffer.from(pdfBase64, "base64")
            //   );
            //   const newDoc = await PDFDocument.load(
            //     Buffer.from(newPagePdf, "base64")
            //   );
            //   const pages = pdfDoc.getPages();
            //   const newPages = newDoc.getPages();
            //   const schemas = templateAtual.schemas;
            //   for (let i = 0; i < newPages.length; i++) {
            //     const [existingPage] = await pdfDoc.copyPages(newDoc, [i]);
            //     pdfDoc.addPage(existingPage);
            //     pages.push(newPages[i]);
            //     schemas.push([
            //       {
            //         name: `assinatura`,
            //         type: "image",
            //         content: dataFormBaixaOSInstalador?.assinatura,
            //         position: { x: 0, y: 0 },
            //         width: 210.06,
            //         height: 297,
            //         rotate: 0,
            //         opacity: 1,
            //         required: false,
            //       },
            //     ]);
            //   }
            //   const newPdf = await pdfDoc.save();
            //   const newPdfBase64 = Buffer.from(newPdf).toString("base64");
            //   templateOriginal["basePdf"] =
            //     `data:application/pdf;base64,${newPdfBase64}`;
            //   templateOriginal["schemas"] = schemas;
            // }
          });

          templateJson = await relacionarDadosOrdemServico(templateOriginal, {
            // ...dadosCliente,
            ...proposta,
            ...dadosCard,
            ...camposPersonalizadosFormat,
            ...clienteOuFinanciador,
            valorTotal_proposta: formatarValor(proposta.valorTotal_proposta),
            valor_extenso_proposta: extenso(+proposta.valorTotal_proposta, {
              mode: "currency",
            }),
            localizacao_instalacao:
              dadosCard.endereco_instalacao_coleta || localizacao,
            potencia_kit:
              proposta.api_kit_proposta == 1
                ? apiKit.potency
                : proposta.potenciaSistema_proposta,
            tabela_kit_val: componentes,
            // revisaoContrato: coletaContratos.length + 1,
            osId: dataFormGeracaoOS?.id_pvos || osIdTemporario,
            tabela_ucs: ucTable,
            tabela_ubs: ucTable.filter((uc: any, i: number) => i > 0),
            media_consumo_ucs_beneficiarias: formatarNumero(
              ucTable
                .filter((uc: any, i: number) => i > 0)
                .reduce(
                  (acc: number, uc: any) => acc + Number(uc.valor_bruto),
                  0
                )
            ),
            numero_uc_geradora: dadosCard.uc_coleta_numero,
            media_consumoTotal: formatarNumero(+proposta.consumoTotal_proposta),
            consumoTotal_anual: formatarNumero(
              (+proposta.consumoTotal_proposta * 12).toFixed(2)
            ),
            // sasa start
            dias_cronograma_instalacao: caucularDiaInstalacao(
              apiKit,
              cronogramaInstalacao
            ),
            endereco_loja: `${lojaAtual.endereco_loja}, ${lojaAtual.numero_loja}, ${lojaAtual.complemento_loja}, Bairro ${lojaAtual.bairro_loja}`,
            cep_loja: `${lojaAtual.cep_loja}`,
            cidade_loja: `${lojaAtual.cidade_loja}`,
            estado_loja: `${lojaAtual.estado_loja}`,
            proprietario_loja: `${lojaAtual.proprietario_loja}`,
            nome_loja: `${lojaAtual.razaosocial_loja}`,
            tipoPessoa_cliente: `${clienteOuFinanciador?.tipoPessoa_cliente == "F" ? "CPF" : "CNPJ"}`,
            email_loja: `${lojaAtual.email_loja}`,
            mensagem_contratante: formatarMensagem({
              tipoPessoa_cliente:
                clienteOuFinanciador.tipoPessoa_cliente == "F",
              nome_cliente: clienteOuFinanciador.nome_cliente,
              cliente_cpf: clienteOuFinanciador.cpfcnpj_cliente,
              rua_moradia_cliente: clienteOuFinanciador.rua_cliente,
              bairro_moradia_cliente: clienteOuFinanciador.bairro_cliente,
              numero_moradia_cliente: clienteOuFinanciador.nro_cliente,
              cidade_moradia_cliente: clienteOuFinanciador.cidade_cliente,
              complemento_moradia_cliente: clienteOuFinanciador.comp_cliente,
              estado_moradia_cliente: clienteOuFinanciador.estado_cliente,
              cep_moradia_cliente: clienteOuFinanciador.cep_cliente,
              razao_social_cliente: clienteOuFinanciador.nomeEmpresa_cliente,
              cliente_cnpj: clienteOuFinanciador.cpfcnpj_cliente,
              rua_empresa_cliente:
                clienteOuFinanciador.logradouroEmpresa_cliente,
              numero_empresa_cliente:
                clienteOuFinanciador.numeroEmpresa_cliente ?? "",
              complemento_empresa_cliente:
                clienteOuFinanciador.complementoEmpresa_cliente ?? "",
              bairro_empresa_cliente:
                clienteOuFinanciador.bairroEmpresa_cliente,
              cep_empresa_cliente: clienteOuFinanciador.cepEmpresa_cliente,
              cidade_empresa_cliente:
                clienteOuFinanciador.cidadeEmpresa_cliente,
              estado_empresa_cliente: clienteOuFinanciador.ufEmpresa_cliente,
              nome_responsavel_empresa_cliente:
                clienteOuFinanciador.nomeResponsavelFisico_cliente,
              cpf_responsavel_empresa_cliente:
                clienteOuFinanciador.cpfResponsavel_cliente,
            }),
            // sasa end
            estimativa_geracao: formatarNumero(
              +(+proposta.estimativa_proposta).toFixed(2)
            ),
            geracao_anual: (+proposta.estimativa_proposta * 12).toFixed(2),
            media_consumo_uc_geradora:
              ucTable[0]?.valor == ucTable[0]?.valor
                ? ucTable[0]?.valor
                : String(
                    ucTable[0]?.valor.reduce(
                      (acc: number, curr: string) => acc + +curr,
                      0
                    ) /
                      ucTable[0].valor.filter(
                        (val: number | string) => val !== ""
                      ).length
                  ),
            agencia_loja: dadosLoja["agencia_loja"],
            conta_loja: dadosLoja["conta_loja"],
            pix_loja: dadosLoja["pix_loja"],
            complementos_bancarios_loja:
              dadosLoja["complementos_bancarios_loja"],
            cnpj_loja: dadosLoja["cnpj_loja"],
            orientacao_proposta: orientacoes_proposta?.[0]?.nome_orientacao,
            qtd_expansivel_modulos: qtd_expansivel_modulos,
            instalador_nome_empresa_terceirizada:
              instalador?.nome_empresa_terceirizada,
            instalador_cnpj_empresa_terceirizada:
              instalador?.cnpj_empresa_terceirizada,
            instalador_rua_empresa_terceirizada:
              instalador?.rua_empresa_terceirizada,
            instalador_numero_empresa_terceirizada:
              instalador?.numero_empresa_terceirizada,
            instalador_bairro_empresa_terceirizada:
              instalador?.bairro_empresa_terceirizada,
            instalador_cidade_empresa_terceirizada:
              instalador?.cidade_empresa_terceirizada,
            instalador_estado_empresa_terceirizada:
              instalador?.estado_empresa_terceirizada,
            instalador_cep_empresa_terceirizada:
              instalador?.cep_empresa_terceirizada,
            qtdModulos_pvos: dataFormGeracaoOS?.qtdModulos_pvos,
            valorTerceiroAbertura_pvos:
              dataFormGeracaoOS?.valorTerceiroAbertura_pvos
                ? formatarValor(dataFormGeracaoOS?.valorTerceiroAbertura_pvos)
                : "",
            respfin_pvos: responsabilidaesFinanceiras?.find(
              (responsabilidade: any) =>
                responsabilidade?.id_respfin ==
                dataFormGeracaoOS?.cod_respfin_pvos
            )?.nome_respfin,
            terceiro_pvos:
              dataFormGeracaoOS?.terceiro_pvos == "0"
                ? "Interno"
                : usuarios?.find(
                    (u: any) =>
                      u?.id_usuario == dataFormGeracaoOS?.terceiro_pvos
                  )?.nome_usuario || "",
            executor_pvos:
              // dataFormGeracaoOS?.codExecutor_pvos == "0"
              //   ? "Interno"
              //   :
              usuarios?.find(
                (u: any) => u?.id_usuario == dataFormGeracaoOS?.codExecutor_pvos
              )?.nome_usuario || "",
            telefone_adicional_pvos: dataFormGeracaoOS?.telefone_adicional_pvos,
            obs_pvos: dataFormGeracaoOS?.obs_pvos,
            data_abertura_pvos: dataFormGeracaoOS?.data_abertura_pvos
              ? getDateBrasil({}, dataFormGeracaoOS?.data_abertura_pvos)
              : getDateBrasil(),
            data_servico_pvos: agendamento?.[`data_${tipoServicoName}_formatada`],
            datafinal_servico_pvos:
              agendamento?.[`data_final_${tipoServicoName}_formatada`],
            user_gerou_pvos:
              usuarios?.find(
                (u: any) => u?.id_usuario == dataFormGeracaoOS?.user_gerou_pvos
              )?.nome_usuario || usuario?.nome_usuario,
            ...(dataFormBaixaOSInstalador?.assinatura
              ? { assinatura: dataFormBaixaOSInstalador?.assinatura }
              : {}),
          });
        }
      } catch (error) {
        console.error(
          "Erro ao adicionar os anexos ou ao relacionar os dados:",
          error
        );
      }

      checkTemplate(templateJson);
      template = templateJson as Template;
      setIsLoaded(true);
    } catch (e) {
      console.error(e);
      toast.error("Erro ao gerar o template");
    }
    return template;
  };

  const [mode, setMode] = useState<Mode>(
    (localStorage.getItem("mode") as Mode) ?? "form"
  );

  useEffect(() => {
    return () => {
      if (!osSalvo && !dataFormGeracaoOS?.id_pvos) {
        deletarOrdemServico({ id_pvos: osIdTemporario });
      }
    };
  }, []);

  useEffect(() => {
    delete dadosCard["content"];
    delete dadosCard["nome_cliente"];
    dadosCard["nome_cliente"] = dadosCliente["nome_cliente"];
    dadosCard["content"] = dadosCliente["nome_cliente"];
    async function loadTemplate() {
      const template = await initTemplate();

      getFontsData()
        .then((font) => {
          if (uiRef.current) {
            ui.current = new Designer({
              domContainer: uiRef.current,
              // @ts-ignore
              template,
              options: {
                font,
                // labels: getLabelsBR,
                theme: {
                  token: {
                    colorPrimary: "#25c2a0",
                  },
                },
              },
              plugins: getPlugins(),
            });

            // ui.current = new (mode === "form" ? Designer : Viewer)({
            //   domContainer: uiRef.current,
            //   template,
            //   options: {
            //     font,
            //     // labels: { clear: "消去" },
            //     theme: {
            //       token: {
            //         colorPrimary: "#25c2a0",
            //       },
            //     },
            //   },
            //   plugins: getPlugins(),
            // });
          }
        })
        .then(() => onSaveFormOS());
    }

    loadTemplate();
    document.addEventListener("fullscreenchange", () => {
      setIsFullscreen(!document.fullscreenElement);
    });
    return () => {
      document.removeEventListener("fullscreenchange", () => {});
    };
    // return () => {
    //     if (ui.current) {
    //         ui.current.destroy();
    //     }
    // };
  }, [uiRef, mode]);
  const toggleFullscreen = () => {
    if (!document.fullscreenElement) {
      uiRef.current?.requestFullscreen();
    } else {
      document.exitFullscreen();
    }
  };
  const onChangeMode = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value as Mode;
    setMode(value);
    localStorage.setItem("mode", value);
  };

  const onResetInputs = async () => {
    localStorage.removeItem("inputs");
    if (ui.current) {
      const template = await initTemplate();
      // ui.current.setInputs(getInputFromTemplate(template) ?? [{}]);
    }
  };

  const onSaveFormOS = () => {
    setIsSavingOS(true);
    setIsLoading(true);
    let dataAtual = new Date();

    // Define o fuso horário para "America/Sao_Paulo"
    dataAtual.toLocaleString("en-US", { timeZone: "America/Sao_Paulo" });

    const { session } = valuesSession();
    generatePDF(
      ui.current,
      `OrdemServico_${proposta?.id_proposta}_${contrato?.id_contrato}_Versao_${ordensServico.length + 1}_Coleta_${dadosCard.id_coleta_cliente}`
    ).then(async (pdfBlob) => {
      // const pdfBlobString = await blobToString(pdfBlob);
      // const formulario = new FormData();
      if (pdfBlob) {
        if (setPdf) {
          // blobToBase64(pdfBlob).then((base64) => setPdf(base64));
          setPdf(pdfBlob);
        }
        // formulario.append("pdfBlob", pdfBlob);
        const { anexos: anexosFormGeracaoOS, ...dataFormGeracaoOSsAnexos } =
          dataFormGeracaoOS;
        const anexos = dataFormBaixaOSInstalador?.anexos;
        const assinatura = dataFormBaixaOSInstalador?.assinatura;
        const dataFormBaixaOSInstaladorSemAnexosAssinatura =
          dataFormBaixaOSInstalador || {};
        if (dataFormBaixaOSInstalador) {
          delete dataFormBaixaOSInstaladorSemAnexosAssinatura.assinatura;
          delete dataFormBaixaOSInstaladorSemAnexosAssinatura.anexos;
        }
        const dados: any = dataFormBaixaOSInstalador
          ? {
              pdfBlob,
              os_execucao_servico: dataFormGeracaoOS?.id_pvos,
              coleta_execucao_servico: dadosCard?.id_coleta_cliente,
              pdf_execucao_servico: `clientes/${dadosCliente.pasta_cliente}/${dadosCard.id_coleta_cliente}/OrdensServico/OS ${dataFormGeracaoOS?.id_pvos} - Proj ${dadosCard?.id_coleta_cliente} (CLIENTE ${dadosCard?.nome_cliente}).pdf`,
              user_execucao_servico: usuario?.id_usuario,
              status_execucao_servico: "1",
              ...dataFormBaixaOSInstaladorSemAnexosAssinatura,
              anexos,
              id_card: dadosCard.id,
              ...([null, 0, "0"].includes(
                dataFormGeracaoOS?.is_externo_usuario
              )
                ? {
                    obsCustos_execucao_servico:
                      "Pendência Concluída Automaticamente pois o instalador é interno",
                    valor_execucao_servico:
                      dataFormGeracaoOS?.valorTerceiroAbertura_pvos,
                    // valorServico_execucao_servico:
                    //   dataFormGeracaoOS?.valorTerceiroAbertura_pvos,
                    // qtdKm_execucao_servico: "0.00",
                    // qtdHoras_execucao_servico: "0.00",
                  }
                : {}),
            }
          : {
              pdfBlob,
              id_pvos: dataFormGeracaoOS?.id_pvos || osIdTemporario,
              cod_coleta_pvos: dadosCard.id_coleta_cliente,
              user_gerou_pvos: session.id_usuario,
              caminho_os_pvos: `clientes/${dadosCliente.pasta_cliente}/${dadosCard.id_coleta_cliente}/OrdensServico/OrdemServico_${proposta?.id_proposta}_${contrato?.id_contrato}_Versao_${ordensServico.length + 1}_Coleta_${dadosCard.id_coleta_cliente}.pdf`,
              // data_abertura_pvos: {sql: "now()"},
              ...dataFormGeracaoOSsAnexos,
              // ...dataFormBaixaOSInstaladorSemAnexosEAssinatura,
              // coleta_contrato: proposta.coleta_proposta,
              // revisao_contrato: coletaContratos.length + 1,
              // cliente_contrato: dadosCliente.id_cliente,
              // financiador_contrato: dadosCliente.id_financiador,
              // proposta_contrato: proposta.id_proposta,
              // caminho_contrato: `clientes/${dadosCliente.pasta_cliente}/OrdensServico/OrdemServico_${proposta.id_proposta}_Versao_${
              //   coletaContratos.length + 1
              // }_Coleta_${proposta.coleta_proposta}.pdf`,
              // data_contrato: dataAtual.toISOString(),
              // user_contrato: session.id_usuario,
              // lista_contrato: dadosCard.id_lista,
              // dataEmail_contrato: "",
              // horaEmail_contrato: "",
              // userEmail_contrato: "",
              // status_contrato: "0",
              id_card: dadosCard.id,
              ...camposPersonalizadosSearch,
            };
        (dataFormBaixaOSInstalador
          ? salvarBaixaOrdemServicoInstalador
          : salvarOrdemServico)(dados)
          .then(async () => {
            if (dataFormBaixaOSInstalador) {
              await addConclusaoPendencia({
                id_coleta: dadosCard.id_coleta_cliente,
                id_etapa: dadosCard.id_lista,
                id_pendencia: "23",
              }).then(async (res) => {
                if (
                  [null, 0, "0"].includes(
                    dataFormGeracaoOS?.is_externo_usuario
                  )
                ) {
                  await addConclusaoPendencia({
                    id_coleta: dadosCard.id_coleta_cliente,
                    id_etapa: dadosCard.id_lista,
                    id_pendencia: "30",
                  });
                }
                setActiveStepAtual(activeStep + 1);
              });
              // if (setStep) {
              //   setStep((prev: any) => prev + 1);
              // }
            } else {
              await addConclusaoPendencia({
                id_coleta: dadosCard.id_coleta_cliente,
                id_etapa: dadosCard.id_lista,
                id_pendencia: "22",
              });

              // atualizaPendenciaAtual({
              //   id_coleta: dadosCard.id_coleta_cliente,
              //   id_pendencia: 6,
              // }).then((res) => {});
              osSalvo = true;
            }

            reListarDadosKanban();
            reloadOrdensServico();
            setCaminhoPdfGerado(
              dataFormBaixaOSInstalador
                ? dados?.pdf_execucao_servico
                : dados?.caminho_os_pvos
            );
          })
          .finally(() => {
            setIsSavingOS(false);
            setIsLoading(false);
          });
      }
    });
  };

  return (
    <div ref={otherRef}>
      {/* {isLoaded && (
        <MenuPdfme
          designer={ui}
          relacionamentos={camposRelacionamentosOrdensServico}
          camposPersonalizadosRelacionamentos={camposPersonalizados}
          titulo={`OS ${dataFormGeracaoOS?.id_pvos || osIdTemporario} - Proj ${dadosCard?.id_coleta_cliente} (CLIENTE ${dadosCard?.nome_cliente})`}
        />
      )} */}
      {isLoaded && false && (
        <Menubar>
          {false && (
            <button
              type="button"
              onClick={() => {
                const loadingPdf = new Promise((resolve, reject) => {
                  generatePDF(
                    ui.current
                    // `Contrato_${proposta.id_proposta}_Versao_${
                    //   coletaContratos.length + 1
                    // }_Coleta_${proposta.coleta_proposta}`
                  )
                    .then((res) => {
                      openBlob(res);
                      resolve("Aberto");
                    })
                    .catch((err) => {
                      reject("Erro ao tentar abrir");
                    });
                });

                toast.promise(loadingPdf, {
                  pending: {
                    render(data: any) {
                      return "Aguarde";
                    },
                  },
                  success: {
                    render(data: any) {
                      return "Pdf gerado em uma nova guia";
                    },
                  },
                  error: {
                    render(data: any) {
                      return data.data;
                    },
                  },
                });
              }}
              className="flex flex-row flex-nowrap items-center bg-success rounded px-2 py-1 text-white"
            >
              <div className="pr-2">
                <FaRegFilePdf />
              </div>
              Gerar PDF
            </button>
          )}
          <button
            type="button"
            onClick={() => onSaveFormOS()}
            className={`flex flex-row flex-nowrap items-center bg-success rounded px-2 py-1 text-white ${
              isSavingOS && "opacity-50"
            }`}
            disabled={isSavingOS}
          >
            <div className="pr-2">
              <FaFileUpload />
            </div>
            {isSavingOS ? (
              <Image width={32} height={32} src={LoaderGif} alt="Logo" />
            ) : dataFormBaixaOSInstalador ? (
              "Baixar Ordem de Serviço"
            ) : (
              "Gerar Ordem de Serviço"
            )}
          </button>
          {/* <button
            className="flex flex-row flex-nowrap absolute right-9 px-2 py-1 text-black"
            onClick={toggleFullscreen}
          >
            <div className="">{isFullscreen ? <Minimize /> : <Maximize />}</div>
          </button> */}
          <button
            onClick={() => {
              const loadingReset = new Promise((resolve, reject) => {
                onResetInputs()
                  .then((res) => {
                    resolve("Campos resetados");
                  })
                  .catch((err) => {
                    reject("Erro ao tentar resetar");
                  });
              });

              toast.promise(loadingReset, {
                pending: {
                  render(data: any) {
                    return "Aguarde";
                  },
                },
                success: {
                  render(data: any) {
                    return data.data;
                  },
                },
                error: {
                  render(data: any) {
                    return data.data;
                  },
                },
              });
            }}
            className="flex flex-row gap-2 flex-nowrap items-center hover:bg-black-2 hover:bg-opacity-10 dark:hover:bg-white dark:hover:bg-opacity-5 rounded-sm px-3 py-1.5 text-sm font-medium outline-none"
          >
            {/* <div>Resetar Campos</div> */}
            <div>Desfazer todas as alterações</div>
          </button>
          <button
            className="flex flex-row flex-nowrap absolute right-9 px-2 py-1 text-black"
            onClick={toggleFullscreen}
          >
            <div className="">{isFullscreen ? <Minimize /> : <Maximize />}</div>
          </button>

          {/* <button
                        onClick={() =>
                            //({ dadosCard, dadosCliente, proposta })
                        }
                    >
                        Mostrar todos propos
                    </button> */}
        </Menubar>
      )}
      {isLoaded && !isSavingOS && caminhoPdfGerado ? (
        <>
          <div className="flex md:gap-2 max-sm:gap-1  justify-center pb-4">
            {botoes.map(
              (botao: any, index: number) =>
                botao.mostrar && (
                  <Button
                    key={index}
                    className={botao.className + ``}
                    onClick={() =>
                      botao.onClick(
                        dataFormGeracaoOS?.id_pvos || osIdTemporario
                      )
                    }
                    type="button"
                  >
                    {botao.icon}
                    {botao.label}
                  </Button>
                )
            )}
            <Button
              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={() => {
                const url = URL.createObjectURL(pdf);
                const a = document.createElement("a");
                a.href = url;
                // a.download = caminhoPdfGerado;
                a.setAttribute("target", "_blank");
                a.click();

                // Libera o objeto da memória
                URL.revokeObjectURL(url);
              }}
              type="button"
            >
              <BsFileEarmarkPdf size={isMobile ? 17 : 20} />
              Baixar PDF
            </Button>
          </div>
          <VisualizarDocGerado caminho={caminhoPdfGerado} />
        </>
      ) : (
        <div className="w-full h-[500px] flex flex-col justify-center items-center">
          <LoaderSun />
        </div>
      )}

      <div
        ref={uiRef}
        // style={{ width: "100%", height: `calc(100vh - ${65}px)` }}
        style={{
          width: "100%",
          height: `${isLoaded ? `calc(100vh)` : "0px"}`,
        }}
        // className={`${!isLoaded && "hidden"}`}
        className={`hidden`}
      />
    </div>
  );
};

export default FormTemplateGeracaoOS;