const textGenForm = document.querySelector(".text-gen-form");
const textGenInput = document.getElementById("text-gen-input");
const model = document.getElementById("model");
const textGenSubmit = document.getElementById("text-gen-submit");
const spinner = document.getElementById("spinner");
const placeholder = document.getElementById("placeholder");
const downloadLink = document.getElementById("download-link");
const verificationNav = document.getElementById("verification-nav");
const certificateNav = document.getElementById("certificate-nav");
const verificationOutput = document.getElementById("verification-output");
const certificateOutput = document.getElementById("certificate-output");
const verificationDetails = document.querySelector(".verification-details");
const parameters = document.querySelector(".parameters");
const modelParam = document.querySelector(".parameters .model");
const promptParam = document.querySelector(".parameters .prompt");
const certificateList = document.getElementById("certificate-list");
var certificates = [];

[textGenInput, model].forEach((item) => {
  item.addEventListener("change", async (event) => {
    setButtonStatus();
  });
});

const setButtonStatus = () => {
  if (textGenInput.value && model.value) textGenSubmit.classList.add("active");
  else textGenSubmit.classList.remove("active");
};

const generateImage = async (text, model) => {
  const inferResponse = await fetch(`generate?prompt=${text}&model=${model}`);
  const inferJson = await inferResponse.json();

  return inferJson.response;
};

textGenForm.addEventListener("submit", async (event) => {
  event.preventDefault();

  verificationDetails.style.display = "none";
  parameters.style.display = "none";
  downloadLink.style.display = "none";

  try {
    if (placeholder) placeholder.remove();
    if (document.getElementById("result"))
      document.getElementById("result").remove();
    spinner.style.display = "block";

    const resp = await generateImage(textGenInput.value, model.value);
    const path = "/" + resp;

    var resultsContainer = document.getElementById("image-container");

    var truepicDisplay = document.createElement("truepic-display");
    truepicDisplay.addEventListener(
      "validate",
      setVerificationOutputFromValidation
    );
    truepicDisplay.addEventListener(
      "validate",
      setCertificateOutputFromValidation
    );

    truepicDisplay.setAttribute("id", "result");
    truepicDisplay.setAttribute("active", "");
    var truepic = document.createElement("img");
    truepic.src = path;

    truepicDisplay.appendChild(truepic);

    spinner.style.display = "none";
    resultsContainer.appendChild(truepicDisplay);

    downloadLink.style.display = "block";
    downloadLink.href = path;
    downloadLink.download = resp;

    modelParam.innerHTML = model.value;
    promptParam.innerHTML = textGenInput.value;
    parameters.style.display = "block";
  } catch (err) {
    console.error(err);
  }
});

function setVerificationOutputFromValidation(event) {
  verificationDetails.style.display = "block";
  return setVerificationOutput(event.detail.manifestStore.toJSON());
}

function setCertificateOutputFromValidation(event) {
  return setCertificateOutput(event.detail.manifestStore);
}

function setVerificationOutput(output = null) {
  verificationOutput.innerHTML = "";

  if (!output) {
    return;
  }

  const viewer = new JSONViewer();

  verificationOutput.appendChild(viewer.getContainer());

  viewer.showJSON(output);
}

function setCertificateOutput(manifestStore = null) {
  const certificate = manifestStore?.activeManifest?.certificate;

  if (!certificate) {
    return;
  }

  certificates = [
    {
      der: certificate.der,
      name: certificate.subjectName,
      decoded: new x509.X509Certificate(certificate.der),
    },
    ...certificate.chain.map((certificate) => ({
      der: certificate.der,
      decoded: new x509.X509Certificate(certificate.der),
    })),
  ];

  certificates.forEach((certificate) => {
    certificate.transformed = transformCert(certificate.decoded);
  });

  console.log("certificates", certificates);

  certificateList.innerHTML = "";

  certificates.forEach((certificate, index) => {
    var li = document.createElement("li");
    if (index == 0) li.classList.add("active");
    li.appendChild(
      document.createTextNode(certificate.transformed.subjectCommonName)
    );
    li.addEventListener("click", function (e) {
      setCertificate(index);
      const lis = document.querySelectorAll("#certificate-list li");

      lis.forEach((element) => {
        element.classList.remove("active");
      });

      this.classList.add("active");
    });

    certificateList.appendChild(li);
  });

  setCertificate(0);
}

function transformCert(certificate) {
  const {
    issuer,
    subject,
    notAfter: expired,
    notBefore: issued,
    serialNumber,
    publicKey: {
      algorithm: {
        name: algorithm,
        modulusLength: modulus,
        namedCurve: namedCurve,
      },
    },
  } = certificate;

  const parsedSubject = parseCertificateValues(subject);
  const parsedIssuer = parseCertificateValues(issuer);

  return {
    issuerCommonName: parsedIssuer["CN"],
    issuerOrganizationUnit: parsedIssuer["OU"],
    issuerOrganization: parsedIssuer["O"],
    issuerCountry: parsedIssuer["C"],
    subjectCommonName: parsedSubject["CN"],
    subjectOrganizationUnit: parsedSubject["OU"],
    subjectOrganization: parsedSubject["O"],
    subjectCountry: parsedSubject["C"],
    issued,
    expired,
    serialNumber,
    algorithm,
    modulus,
    namedCurve,
  };
}

verificationNav.addEventListener("click", (event) => {
  event.target.classList.add("active");
  certificateNav.classList.remove("active");

  verificationOutput.style.display = "block";
  certificateOutput.style.display = "none";
});

certificateNav.addEventListener("click", (event) => {
  event.target.classList.add("active");
  verificationNav.classList.remove("active");

  certificateOutput.style.display = "block";
  verificationOutput.style.display = "none";
});

function setCertificate(ind) {
  const certificate = certificates[ind].transformed;

  document.querySelector(".details .issuerCommonName").innerHTML =
    certificate.issuerCommonName;
  document.querySelector(".details .issuerOrganizationUnit").innerHTML =
    certificate.issuerOrganizationUnit;
  document.querySelector(".details .issuerOrganization").innerHTML =
    certificate.issuerOrganization;
  document.querySelector(".details .issuerCountry").innerHTML =
    certificate.issuerCountry;
  document.querySelector(".details .subjectCommonName").innerHTML =
    certificate.subjectCommonName;
  document.querySelector(".details .subjectOrganizationUnit").innerHTML =
    certificate.subjectOrganizationUnit;
  document.querySelector(".details .subjectOrganization").innerHTML =
    certificate.subjectOrganization;
  document.querySelector(".details .subjectCountry").innerHTML =
    certificate.subjectCountry;
  document.querySelector(".details .issued").innerHTML = certificate.issued;
  document.querySelector(".details .expired").innerHTML = certificate.expired;
  document.querySelector(".details .serialNumber").innerHTML =
    certificate.serialNumber;
  document.querySelector(".details .algorithm").innerHTML =
    certificate.algorithm;

  if (certificate.modulus !== undefined) {
    document.querySelector(".details .modulus").innerHTML = certificate.modulus;
    document.querySelector(".modulusContainers").style.display = "block";
  } else {
    document.querySelector(".modulusContainers").style.display = "none";
  }

  if (certificate.namedCurve !== undefined) {
    document.querySelector(".details .namedCurve").innerHTML =
      certificate.namedCurve;
    document.querySelector(".curveContainer").style.display = "block";
  } else {
    document.querySelector(".curveContainer").style.display = "none";
  }
}

function parseCertificateValues(input) {
  const params = new URLSearchParams(input.replaceAll(",", "&"));
  const responses = {};

  for (const entry of params.entries()) {
    responses[entry[0].trim()] = entry[1];
  }

  return responses;
}