import * as PDFGeneratorAPI from "https://cdn.skypack.dev/pdf-generator-api-client@5.0.1";
import * as jose from "https://cdn.skypack.dev/jose@4.13.1";

const loadEditorBtn = document.querySelector("#load-editor-btn");
const apiKey = document.querySelector("#api-key");
const apiSecret = document.querySelector("#api-secret");
const apiWorkspace = document.querySelector("#api-workspace");
const apiTemplateId = document.querySelector("#api-templateid");
const apiData = document.querySelector("#api-data");

const defaultPDFAPIClient = PDFGeneratorAPI.ApiClient.instance;
let JSONWebTokenAuth = defaultPDFAPIClient.authentications["JSONWebTokenAuth"];

loadEditorBtn.addEventListener("click", (event) => {
  generatePDF(
    apiKey.value,
    apiSecret.value,
    apiWorkspace.value,
    apiTemplateId.value,
    apiData.value ? JSON.parse(apiData.value) : {"test": 1}
  );
});

function generatePDF(apiKey, apiSecret, apiWorkspace, templateId, data) {
  createDocumentsClient(apiKey, apiSecret, apiWorkspace).then((client) => {
    let request = new PDFGeneratorAPI.GenerateDocumentRequest();
    request.template = {
      id: templateId,
      data: data
    };
    request.format = 'pdf';
    request.output = 'url';

    client.generateDocument(request, (error, data, response) => {
      if (error) {
        console.error(error);
      } else {
        const loadingTask = window.pdfjsLib.getDocument(data.response);
        loadingTask.promise.then(function(pdf) {
          pdf.getPage(1).then(function(page) {
            const viewport = page.getViewport({ scale: 1.5, });
            const outputScale = window.devicePixelRatio || 1;
            let canvas = document.getElementById('pdf-viewer');

            canvas.width = Math.floor(viewport.width * outputScale);
            canvas.height = Math.floor(viewport.height * outputScale);
            canvas.style.width = Math.floor(viewport.width) + "px";
            canvas.style.height =  Math.floor(viewport.height) + "px";

            page.render({
              canvasContext: canvas.getContext('2d'),
              transform: outputScale !== 1 ? [outputScale, 0, 0, outputScale, 0, 0] : null,
              viewport: page.getViewport({ scale: 1.5, })
            });
          });
        });
      }
    });
  });
}

async function createDocumentsClient(apiKey, apiSecret, apiWorkspace) {
  JSONWebTokenAuth.accessToken = await createJWT(
    apiKey,
    apiWorkspace,
    apiSecret
  );
  return new PDFGeneratorAPI.DocumentsApi();
}

async function createDocumentClient(apiKey, apiSecret, apiWorkspace) {
  JSONWebTokenAuth.accessToken = await createJWT(
    apiKey,
    apiWorkspace,
    apiSecret
  );
  return new PDFGeneratorAPI.DocumentsApi();
}

async function createJWT(iss, sub, secret) {
  const header = {
    alg: "HS256",
    typ: "JWT"
  };

  const payload = {
    iss: iss,
    sub: sub,
    exp: Math.round(Date.now() / 1000) + 60
  };

  return await new jose.SignJWT(payload)
    .setProtectedHeader(header)
    .sign(new TextEncoder().encode(secret));
}