import Button from "@/components/Forms/Button";
import Input from "@/components/Forms/Input";
import ModalReact from "@/components/Modal/ModalReact";
import RelacionamentosTable from "@/components/RelacionamentosTable";
import {
  Menubar,
  // MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarSeparator,
  MenubarShortcut,
  MenubarTrigger,
} from "@/components/ui/menubar";
import { Template } from "@pdfme/common";
import { Designer } from "@pdfme/ui";
import * as MenubarPrimitive from "@radix-ui/react-menubar";
import { PDFDocument } from "pdf-lib";
import {
  ChangeEvent,
  MutableRefObject,
  ReactNode,
  useEffect,
  useState,
} from "react";
import {
  GrDocument,
  GrDocumentDownload,
  GrDocumentMissing,
  GrDocumentPdf,
  GrDocumentThreat,
  GrDocumentTransfer,
  GrDocumentUpdate,
  GrDocumentUpload,
  GrDocumentVerified,
} from "react-icons/gr";
import { toast } from "react-toastify";
import { FormatFields, GetForm } from "..";
import {
  cloneDeep,
  downloadJsonFile,
  generatePDF,
  getTemplate,
  handleLoadTemplate,
  onNewPage,
  openBlob,
  readFile,
  repeatedNameFields,
  splitBase64,
} from "./helper";

const gruposRelacionamentosRapidos = [
  { label: "Usuários", value: "1", color: "#F5EFDA" },
  { label: "Contato", value: "2", color: "#F5DBDA" },
  { label: "Negócio", value: "3", color: "#DAF5E3" },
  { label: "Proposta", value: "4", color: "#DADBF5" },
  { label: "Contrato", value: "5", color: "#a6fac2" },
  { label: "Diversos", value: "6", color: "#f3e192" },
  { label: "Loja", value: "7", color: "#ffa7a7" },
];

export const MenuPdfme = ({
  designer,
  relacionamentos,
  // camposPersonalizadosRelacionamentos,
  onSaveTemplate,
  //   loja,
  children,
  titulo,
}: {
  designer: MutableRefObject<Designer | null>;
  relacionamentos: {
    name: string;
    text: string;
    relacionamento: any;
    grupo_relacionamento_rapido?: any;
  }[];
  camposPersonalizadosRelacionamentos?: {
    name: string;
    text: string;
    // tiposNegocio_relacionamento_rapido?: string;
    // mostrarDocPersonalizado_relacionamento_rapido?: string;
    relacionamento: any;
    local_campo_personalizado?: any;
  }[];
  onSaveTemplate?: (template?: Template) => void;
  children?: ReactNode;
  titulo?: string;
}) => {
  const [isLoading, setIsLoading] = useState(false);
  const [inputKey, setInputKey] = useState(1);

  const [showRelationsAccordion, setShowRelationsAccordion] = useState(true);
  const [openRelationsAccordion, setOpenRelationsAccordion] = useState(false);
  const [pageRemove, setPageRemove] = useState(1);
  const [showModalRemovePage, setShowModalRemovePage] = useState(false);
  const [showModalResetTemplate, setShowModalResetTemplate] = useState(false);
  const [showModalChangeBaseTemplate, setShowModalChangeBaseTemplate] =
    useState(false);
  const [showModalChangeBasePdf, setShowModalChangeBasePdf] = useState(false);
  const [relacionamentosFiltrados, setRelacionamentosFiltrados] =
    useState(relacionamentos);
  const [locaisCamposPersonalizados, setLocaisCamposPersonalizados] = useState<
    any[]
  >([]);
  const [
    camposPersonalizadosRelacionamentos,
    setCamposPersonalizadosRelacionamentos,
  ] = useState<any[]>([]);
  const [
    relacionamentosCamposPersonalizadosFiltrados,
    setRelacionamentosCamposPersonalizadosFiltrados,
  ] = useState<any[]>([]);

  const { ...formDeleteValue } = GetForm();
  const { ...formFiltroTags } = GetForm();

  useEffect(() => {
    listarCamposPersonalizadosRelacionamentos().then((res) => {
      const camposFormatados = res.map((campo: any) => ({
        name: campo.nome_relacionamento_rapido,
        text: campo.nome_campo_personalizado,
        relacionamento: campo.nome_relacionamento_rapido,
        local_campo_personalizado: campo.local_campo_personalizado,
      }));
      setCamposPersonalizadosRelacionamentos(camposFormatados);
      setRelacionamentosCamposPersonalizadosFiltrados(camposFormatados);
    });
    listarLocaisCamposPersonalizados().then(setLocaisCamposPersonalizados);
  }, []);

  async function scrollDocumentTop() {
    let pdfDocumentArea = document.querySelector(
      "#__next > div.dark\\:bg-boxdark-2.dark\\:text-bodydark > div > div > main > div > div.gap-9.sm\\:grid-cols-2 > div > div > div > section > div > div:nth-child(2) > div > div > div:nth-child(3)"
    ) as Element;

    if (pdfDocumentArea) {
      pdfDocumentArea.scrollTop = 0;
    } else {
      pdfDocumentArea = document.querySelector(
        "#propostaId > div > div > div:nth-child(3)"
      ) as Element;
      if (pdfDocumentArea) pdfDocumentArea.scrollTop = 0;
    }
  }

  async function onDeletePage(pageNumber: number) {
    await scrollDocumentTop();

    const pageIndex = pageNumber - 1;
    if (designer.current) {
      const templateAtual = designer.current.getTemplate();
      const pdfBase64data: any = templateAtual.basePdf;

      const pdfBase64 = splitBase64(pdfBase64data);

      if (pdfBase64 != null) {
        const pdfDoc = await PDFDocument.load(Buffer.from(pdfBase64, "base64"));

        const pages = pdfDoc.getPages();
        if (pages.length == 1 && pageNumber == 1) {
          throw toast.error("Não é possível remover todas páginas");
        }

        if (pages.length == pageNumber) {
          formDeleteValue.setValue(
            "deleteValue" as never,
            String(pages.length - 1) as never
          );
        }

        // Remove a página da lista de páginas
        pdfDoc.removePage(pageIndex);

        // Além é necessário remover da lista de colunas e inputs
        const schemas = templateAtual.schemas;
        schemas.splice(pageIndex, 1);

        // Salva o novo PDF
        const newPdf = await pdfDoc.save();
        const newPdfBase64 = Buffer.from(newPdf).toString("base64");

        // Atualiza o template do designer
        return designer.current.updateTemplate(
          Object.assign(cloneDeep(designer.current.getTemplate()), {
            basePdf: `data:application/pdf;base64,${newPdfBase64}`,
            schemas,
          })
        );
      }
    }
  }

  const submitDeleteValue = (data: any) => {
    setPageRemove(+data["deleteValue"]);
    setShowModalRemovePage(true);
  };

  const validarDeleteValue = async (e: any) => {
    const valor = FormatFields.formatarNumerico(e.target.value);

    if (designer.current != null) {
      const pdfBase64data: any = designer.current.getTemplate().basePdf;

      const pdfBase64 = splitBase64(pdfBase64data);

      if (pdfBase64 != null) {
        const pdfDoc = await PDFDocument.load(Buffer.from(pdfBase64, "base64"));

        const pages = pdfDoc.getPages();
        if (+valor > pages.length) {
          e.target.value = String(pages.length);
        } else if (+valor < 1) {
          e.target.value = "1";
        } else {
          e.target.value = valor;
        }
      }
    }
  };

  const onResetTemplate = async () => {
    setIsLoading(true);
    await scrollDocumentTop().finally(() => setIsLoading(false));
    if (designer.current) {
      designer.current.updateTemplate(getTemplate());
      // localStorage.removeItem("template");
    }
  };

  const onDownloadTemplate = () => {
    if (designer.current) {
      if (!repeatedNameFields(designer)) {
        downloadJsonFile(designer.current.getTemplate(), "template");
        toast.success("Download Iniciado!");
      }
    }
  };

  const onAddPageFromFile = async (e: any) => {
    setInputKey(inputKey + 1);
    if (e.target && e.target.files) {
      readFile(e.target.files[0], "dataURL")
        .then(async (newPagePdfdata: any) => {
          if (designer.current) {
            const templateAtual = designer.current.getTemplate();
            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");

            designer.current.updateTemplate(
              Object.assign(cloneDeep(designer.current.getTemplate()), {
                basePdf: `data:application/pdf;base64,${newPdfBase64}`,
                schemas,
              })
            );
          }
        })
        .finally(() => {
          e.target.files = null;
        });
    }
  };

  const onChangeBasePDF = async (e: ChangeEvent<HTMLInputElement>) => {
    await scrollDocumentTop();
    if (e.target && e.target.files) {
      readFile(e.target.files[0], "dataURL").then(async (basePdf: any) => {
        if (designer.current) {
          designer.current.updateTemplate(
            Object.assign(cloneDeep(designer.current.getTemplate()), {
              basePdf,
            })
          );
          toast.success("PDF Base Alterado!");
          setShowModalChangeBasePdf(false);
        }
      });
    }
  };

  return (
    <>
      <input
        key={inputKey}
        id="loadTemplate"
        type="file"
        accept="application/json"
        onInput={(e) =>
          handleLoadTemplate(e, designer.current).then(() => {
            setShowModalChangeBaseTemplate(false);
            toast.success("Template Carregado com sucesso!");
          })
        }
        className="hidden"
      />
      <input
        key={inputKey + 1}
        id="newPageFromBase"
        type="file"
        accept="application/pdf"
        onChange={(e) => onAddPageFromFile(e)}
        className="hidden"
      />
      <input
        key={inputKey + 2}
        id="changeBasePdf"
        type="file"
        accept="application/pdf"
        onInput={onChangeBasePDF}
        className="hidden"
      />
      <Menubar>
        <MenubarMenu>
          <MenubarTrigger className="cursor-pointer hover:bg-black-2 hover:bg-opacity-10 dark:hover:bg-white dark:hover:bg-opacity-5">
            Arquivo
          </MenubarTrigger>
          <MenubarContent>
            <MenubarItem onClick={() => onNewPage(designer)}>
              <div className="pr-2">
                <GrDocument />
              </div>
              Nova página em branco
            </MenubarItem>
            <MenubarItem>
              <div className="pr-2">
                <GrDocumentTransfer />
              </div>
              <label
                htmlFor="newPageFromBase"
                onClick={(e) => e.stopPropagation()}
              >
                Nova Página do PDF
              </label>
            </MenubarItem>

            <MenubarSeparator />
            <MenubarItem>
              <div
                className="flex flex-col"
                onClick={(e) => e.stopPropagation()}
              >
                <div className="flex flex-row flex-nowrap items-center justify-between pb-2">
                  <div className="flex flex-row flex-nowrap items-center">
                    <div className="pr-2">
                      <GrDocumentMissing />
                    </div>
                    <button
                      onClick={(e) =>
                        formDeleteValue.handleSubmit(submitDeleteValue)(e)
                      }
                    >
                      Remover página
                    </button>
                  </div>
                </div>
                <Input
                  name="deleteValue"
                  type="number"
                  formulario={formDeleteValue}
                  onChange={validarDeleteValue}
                  defaultValue={"1"}
                />
              </div>
            </MenubarItem>
          </MenubarContent>
        </MenubarMenu>
        <MenubarMenu>
          <MenubarTrigger className="cursor-pointer hover:bg-black-2 hover:bg-opacity-10 dark:hover:bg-white dark:hover:bg-opacity-5">
            Template
          </MenubarTrigger>
          <MenubarContent>
            {onSaveTemplate && (
              <MenubarItem
                onClick={() =>
                  !repeatedNameFields(designer) && onSaveTemplate()
                }
              >
                <div className="pr-2">
                  <GrDocumentVerified />
                </div>
                Salvar Template
                <MenubarShortcut className="flex flex-row flex-nowrap items-center gap-1">
                  Ctrl S
                </MenubarShortcut>
              </MenubarItem>
            )}
            <MenubarItem onClick={onDownloadTemplate}>
              <div className="pr-2">
                <GrDocumentDownload />
              </div>
              Baixar Template
            </MenubarItem>
            <MenubarItem onClick={() => setShowModalResetTemplate(true)}>
              <div className="pr-2">
                <GrDocumentThreat />
              </div>
              Resetar Template
            </MenubarItem>
            <MenubarItem onClick={() => setShowModalChangeBaseTemplate(true)}>
              <div className="pr-2">
                <GrDocumentUpload />
              </div>
              <div>Carregar Template</div>
            </MenubarItem>
          </MenubarContent>
        </MenubarMenu>
        <MenubarMenu>
          <MenubarTrigger className="cursor-pointer hover:bg-black-2 hover:bg-opacity-10 dark:hover:bg-white dark:hover:bg-opacity-5">
            Pdf
          </MenubarTrigger>
          <MenubarContent>
            <MenubarItem
              onClick={() => {
                const loadingPdf = new Promise((resolve, reject) => {
                  generatePDF(designer.current, titulo)
                    .then((res) => {
                      openBlob(res);
                      resolve("Aberto");
                    })
                    .catch((err) => {
                      console.error(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;
                    },
                  },
                });
              }}
            >
              <div className="pr-2">
                <GrDocumentPdf />
              </div>
              Gerar PDF
            </MenubarItem>
            <MenubarItem onClick={() => setShowModalChangeBasePdf(true)}>
              <div className="pr-2">
                <GrDocumentUpdate />
              </div>
              <div>Mudar PDF Base</div>
            </MenubarItem>
          </MenubarContent>
        </MenubarMenu>
        {onSaveTemplate && (
          <button
            className="flex flex-row flex-nowrap items-center bg-success rounded px-2 py-1 text-white"
            onClick={() => !repeatedNameFields(designer) && onSaveTemplate()}
          >
            <div className="pr-2">
              <GrDocumentVerified />
            </div>
            Salvar Template
          </button>
        )}
        {children}
        <MenubarMenu>
          <MenubarTrigger
            className="cursor-pointer hover:bg-black-2 hover:bg-opacity-10 dark:hover:bg-white dark:hover:bg-opacity-5"
            // onMouseEnter={() => {
            //   formFiltroTags.setValue("filtro", "");
            //   setRelacionamentosFiltrados(relacionamentos);
            // }}
            onClick={() => {
              formFiltroTags.setValue("filtro", "");
              setRelacionamentosFiltrados(relacionamentos);
            }}
          >
            Exibir Tags
          </MenubarTrigger>
          <MenubarContent>
            <div className="flex p-4 space-x-4">
              {/* <MenubarItem className="flex-1"> */}
              <div>
                <Input
                  label="Filtrar"
                  name="filtro"
                  labelSize="mb-0"
                  width="w-full p-2"
                  onClick={(e) => e.stopPropagation()}
                  onMouseMove={(e) => {
                    e.stopPropagation();
                    e.preventDefault();
                  }}
                  placeholder="Pesquisar 🔍︎"
                  onChange={(e) => {
                    if (e.target.value) {
                      setRelacionamentosFiltrados(
                        relacionamentos.filter(
                          (relacionamento) =>
                            relacionamento.name
                              .toLowerCase()
                              .includes(e.target.value.toLowerCase()) ||
                            relacionamento.text
                              .toLowerCase()
                              .includes(e.target.value.toLowerCase())
                        )
                      );
                    } else {
                      setRelacionamentosFiltrados(relacionamentos);
                    }
                  }}
                  formulario={formFiltroTags}
                />
                <div style={{ maxHeight: "58vh" }} className="overflow-auto">
                  {gruposRelacionamentosRapidos?.map(
                    (grupoRelacionamentoRapido, indexLocalCampo) => {
                      const relacionamentosDesteLocal =
                        relacionamentosFiltrados?.filter((relacionamento) =>
                          relacionamento.grupo_relacionamento_rapido
                            ? relacionamento.grupo_relacionamento_rapido ==
                              grupoRelacionamentoRapido?.value
                            : grupoRelacionamentoRapido?.value == "6"
                        );
                      return (
                        <div key={indexLocalCampo} className="py-2">
                          <div className="font-semibold">
                            {grupoRelacionamentoRapido.label}
                          </div>
                          {relacionamentosDesteLocal?.length > 0 ? (
                            <div
                              className="p-1"
                              style={{
                                maxHeight: "300px",
                                overflow: "auto",
                              }}
                            >
                              <table className="w-full border-separate">
                                <thead>
                                  <tr className="bg-black-2 bg-opacity-[.1] dark:bg-white dark:bg-opacity-10">
                                    <th className="font-bold border-b">
                                      Sintaxe
                                    </th>
                                    <th className="font-bold border-b">
                                      Descrição
                                    </th>
                                  </tr>
                                </thead>
                                <tbody>
                                  {relacionamentosDesteLocal?.map(
                                    (relacionamento: any, index: any) => (
                                      <RelacionamentosTable
                                        relacionamento={relacionamento}
                                        key={index}
                                        index={index}
                                      />
                                    )
                                  )}
                                </tbody>
                              </table>
                            </div>
                          ) : (
                            <div className="text-sm font-semibold text-black-2/50 dark:text-white/50">
                              Não há Tags para este local
                            </div>
                          )}
                        </div>
                      );
                    }
                  )}
                  {/* <table className="w-full border-separate">
                    <thead>
                      <tr className="bg-black-2 bg-opacity-[.1] dark:bg-white dark:bg-opacity-10">
                        <th className="font-bold border-b">Sintaxe</th>
                        <th className="font-bold border-b">Descrição</th>
                      </tr>
                    </thead>
                    <tbody>
                      {relacionamentosFiltrados?.map(
                        (relacionamento: any, index: any) => (
                          <RelacionamentosTable
                            relacionamento={relacionamento}
                            key={index}
                            index={index}
                          />
                        )
                      )}
                    </tbody>
                  </table> */}
                </div>
              </div>
              {/* </MenubarItem> */}
            </div>
          </MenubarContent>
        </MenubarMenu>
        {camposPersonalizadosRelacionamentos &&
          camposPersonalizadosRelacionamentos?.length > 0 && (
            <MenubarMenu>
              <MenubarTrigger
                className="cursor-pointer hover:bg-black-2 hover:bg-opacity-10 dark:hover:bg-white dark:hover:bg-opacity-5"
                onClick={() => {
                  formFiltroTags.setValue("filtro", "");
                  setRelacionamentosCamposPersonalizadosFiltrados(
                    camposPersonalizadosRelacionamentos
                  );
                }}
              >
                Exibir Tags de Campos Personalizados
              </MenubarTrigger>
              <MenubarContent>
                <div className="flex p-4 space-x-4">
                  {/* <MenubarItem className="flex-1"> */}
                  <div>
                    <Input
                      label="Filtrar"
                      name="filtro"
                      labelSize="mb-0"
                      width="w-full p-2"
                      onClick={(e) => e.stopPropagation()}
                      onMouseMove={(e) => {
                        e.stopPropagation();
                        e.preventDefault();
                      }}
                      placeholder="Pesquisar 🔍︎"
                      onChange={(e) => {
                        if (e.target.value) {
                          setRelacionamentosCamposPersonalizadosFiltrados(
                            camposPersonalizadosRelacionamentos.filter(
                              (relacionamento) =>
                                relacionamento.name
                                  .toLowerCase()
                                  .includes(e.target.value.toLowerCase()) ||
                                relacionamento.text
                                  .toLowerCase()
                                  .includes(e.target.value.toLowerCase())
                            )
                          );
                        } else {
                          setRelacionamentosCamposPersonalizadosFiltrados(
                            camposPersonalizadosRelacionamentos
                          );
                        }
                      }}
                      formulario={formFiltroTags}
                    />
                    <div
                      style={{ maxHeight: "58vh" }}
                      className="overflow-auto"
                    >
                      {locaisCamposPersonalizados?.map(
                        (localCampoPersonalizado, indexLocalCampo) => {
                          const relacionamentosDesteLocal =
                            relacionamentosCamposPersonalizadosFiltrados?.filter(
                              (relacionamento) =>
                                relacionamento.local_campo_personalizado ==
                                localCampoPersonalizado?.id_local_personalizado
                            );
                          return (
                            <div key={indexLocalCampo} className="py-2">
                              <div className="font-semibold">
                                {
                                  localCampoPersonalizado.descricao_local_personalizado
                                }
                              </div>
                              {relacionamentosDesteLocal?.length > 0 ? (
                                <div
                                  className="p-1"
                                  style={{
                                    maxHeight: "300px",
                                    overflow: "auto",
                                  }}
                                >
                                  <table className="w-full border-separate">
                                    <thead>
                                      <tr className="bg-black-2 bg-opacity-[.1] dark:bg-white dark:bg-opacity-10">
                                        <th className="font-bold border-b">
                                          Sintaxe
                                        </th>
                                        <th className="font-bold border-b">
                                          Descrição
                                        </th>
                                      </tr>
                                    </thead>
                                    <tbody>
                                      {relacionamentosDesteLocal?.map(
                                        (relacionamento: any, index: any) => (
                                          <RelacionamentosTable
                                            relacionamento={relacionamento}
                                            key={index}
                                            index={index}
                                          />
                                        )
                                      )}
                                    </tbody>
                                  </table>
                                </div>
                              ) : (
                                <div className="text-sm font-semibold text-black-2/50 dark:text-white/50">
                                  Não há Tags para este local
                                </div>
                              )}
                            </div>
                          );
                        }
                      )}
                    </div>
                  </div>
                  {/* </MenubarItem> */}
                </div>
              </MenubarContent>
            </MenubarMenu>
          )}
      </Menubar>
      <ModalReact
        open={showModalRemovePage}
        title="Remoção da Página"
        onClose={() => setShowModalRemovePage(false)}
      >
        <div className="p-3">
          <div className="pb-2">
            Tem certeza que deseja remover a página {pageRemove}?
          </div>
          <div className="flex flex-row flex-nowrap gap-2 justify-center">
            <Button
              className="bg-error"
              onClick={() => setShowModalRemovePage(false)}
            >
              Cancelar
            </Button>
            <Button
              onClick={() => {
                onDeletePage(pageRemove).then(() => {
                  toast.success("Página removida!");
                  setShowModalRemovePage(false);
                });
              }}
            >
              Confirmar
            </Button>
          </div>
        </div>
      </ModalReact>
      <ModalReact
        open={showModalResetTemplate}
        title="Resetar Template"
        onClose={() => setShowModalResetTemplate(false)}
      >
        <div className="p-3">
          <div className="pb-2">Tem certeza que deseja resetar o template?</div>
          <div className="flex flex-row flex-nowrap gap-2 justify-center">
            <Button
              className="bg-error"
              onClick={() => setShowModalResetTemplate(false)}
            >
              Cancelar
            </Button>
            <Button
              loading={isLoading}
              onClick={() => {
                onResetTemplate().then(() => {
                  setShowModalResetTemplate(false);
                });
              }}
            >
              Confirmar
            </Button>
          </div>
        </div>
      </ModalReact>
      <ModalReact
        open={showModalChangeBaseTemplate}
        title="Mudar Template Base"
        onClose={() => setShowModalChangeBaseTemplate(false)}
      >
        <div className="p-3">
          <div className="pb-2">
            Tem certeza que deseja mudar o template base?
          </div>
          <div className="flex flex-row flex-nowrap gap-2 justify-center">
            <Button
              className="bg-error"
              onClick={() => setShowModalChangeBaseTemplate(false)}
            >
              Cancelar
            </Button>
            <label
              htmlFor="loadTemplate"
              className="flex w-fit justify-center items-end rounded bg-success p-2 px-4 font-medium text-gray"
            >
              Mudar Template Base
            </label>
          </div>
        </div>
      </ModalReact>

      <ModalReact
        open={showModalChangeBasePdf}
        title="Mudar PDF Base"
        onClose={() => setShowModalChangeBasePdf(false)}
      >
        <div className="p-3">
          <div className="pb-2">Tem certeza que deseja mudar o PDF base?</div>
          <div className="flex flex-row flex-nowrap gap-2 justify-center">
            <Button
              className="bg-error"
              onClick={() => setShowModalChangeBasePdf(false)}
            >
              Cancelar
            </Button>
            <label
              htmlFor="changeBasePdf"
              className="flex w-fit justify-center items-end rounded bg-success p-2 px-4 font-medium text-gray"
            >
              Mudar PDF Base
            </label>
          </div>
        </div>
      </ModalReact>
    </>
  );
};

import { cn } from "@/lib/utils";
import {
  listarCamposPersonalizadosRelacionamentos,
  listarLocaisCamposPersonalizados,
} from "@/requests/CRUD/CamposPersonalizados/listarCamposPersonalizados";

function MenubarContent({
  className,
  align = "start",
  alignOffset = -4,
  sideOffset = 8,
  ...props
}: any) {
  return (
    <MenubarPrimitive.Content
      align={align}
      alignOffset={alignOffset}
      sideOffset={sideOffset}
      className={cn(
        "min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
        className
      )}
      {...props}
    />
  );
}