const cards = document.querySelector("#cards");
const preview = document.querySelector("#preview");

var certificates = [];

const renderCards = () => {
  cards.innerHTML = "";
  certificates.map((cert) => {
    cards.innerHTML += `<div class="card" style="width: 16rem">
        <div class="card-body">
            <h5 class="card-title" style="text-align: center">
                <a href="${cert.href}">${cert.domain}</a>
            </h5>
        </div>
        <div
            class="card-footer d-flex flex-column align-items-center gap-2"
        >
            <button type="button"
              data-bs-toggle="modal"
              data-bs-target="#preview"
              data-bs-whatever="${cert.cert}"
              data-bs-dnsnames="${cert.certinfo.DNSNames}"
              data-bs-notafter="${cert.certinfo.NotAfter}"
              data-bs-notbefore="${cert.certinfo.NotBefore}"
              data-bs-issuer-commonname="${cert.certinfo.Issuer.CommonName}"
              data-bs-issuer-organization="${cert.certinfo.Issuer.Organization}"
              data-bs-issuer-organizationunit="${cert.certinfo.Issuer.OrganizationalUnit}"
              data-bs-subject-commonname="${cert.certinfo.Subject.CommonName}"
              data-bs-subject-organization="${cert.certinfo.Subject.Organization}"
              data-bs-subject-organizationunit="${cert.certinfo.Subject.OrganizationalUnit}"
              class="btn btn-primary"
              style="width: 100%"
            >
                Cert
            </button>
            <button class="btn btn-primary" style="width: 100%">
                Download
            </button>
            <button class="btn btn-danger delcert" id="${cert.id}" style="width: 100%">
                Delete
            </button>
        </div>
    </div>`;
  });
};

const getCerts = async () => {
  fetch(window.location.origin + "/api/certs")
    .then((data) => data.json())
    .then((data) => {
      certificates = data;
      renderCards();
    })
    .catch((error) => {
      console.error("Error fetching certificates:", error);
      alert("Failed to fetch certificates");
    });
};

getCerts();

if (preview) {
  preview.addEventListener("show.bs.modal", (e) => {
    const button = e.relatedTarget;
    const recipient = button.getAttribute("data-bs-whatever");
    // const modalBodyTextarea = preview.querySelector(".modal-body textarea");
    const dnsnames = button.getAttribute("data-bs-dnsnames");
    const notafter = button.getAttribute("data-bs-notafter");
    const notbefore = button.getAttribute("data-bs-notbefore");
    const issuerorganizationunit = button.getAttribute(
      "data-bs-issuer-organizationunit",
    );
    const issuerorganization = button.getAttribute(
      "data-bs-issuer-organization",
    );
    const issuercommonname = button.getAttribute("data-bs-issuer-commonname");
    const subjectorganizationunit = button.getAttribute(
      "data-bs-subject-organizationunit",
    );
    const subjectorganization = button.getAttribute(
      "data-bs-subject-organization",
    );
    const subjectcommonname = button.getAttribute("data-bs-subject-commonname");
    console.log(
      dnsnames,
      notafter,
      notbefore,
      issuerorganizationunit,
      issuerorganization,
      issuercommonname,
    );
    preview.querySelector("#raw").innerHTML = recipient.replace(/\n/g, "<br>");
    preview.querySelector("#dnsNames").value = dnsnames;
    preview.querySelector("#notAfter").value = notafter;
    preview.querySelector("#notBefore").value = notbefore;
    preview.querySelector("#issuerorganizationunit").value =
      issuerorganizationunit;
    preview.querySelector("#issuerorganization").value = issuerorganization;
    preview.querySelector("#issuercommonname").value = issuercommonname;
    preview.querySelector("#subjectorganizationunit").value =
      subjectorganizationunit;
    preview.querySelector("#subjectorganization").value = subjectorganization;
    preview.querySelector("#subjectcommonname").value = subjectcommonname;
  });
}

cards.addEventListener("click", (e) => {
  if (e.target.classList.contains("delcert")) {
    certificates.splice(
      certificates.indexOf(
        certificates.find((item) => item.id === parseInt(e.target.id)),
      ),
      1,
    );
    renderCards();
  }
});