<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Main page</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Smooch+Sans:wght@300;400;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="/css/styles.css" />
  </head>
  <body>
    <main>
      <p class="loadingText">Loading...</p>
      <section class="announcementHolder">
        <a href="/">Home</a>
        <hr />
        <button onclick="tryDeleteAnnouncement()">Delete</button>
        <button id="ebtn" onclick="tryEditAnnouncement()">Edit</button>
        <button id="cbtn" onclick="cancelEdit()" hidden="true">Cancel</button>
        <button id="sbtn" onclick="trySaveEditAnnouncement()" hidden="true">
          Save
        </button>
        <hr />
      </section>
    </main>
  </body>
  <script>
    const trySaveEditAnnouncement = async () => {
      const title = document.getElementById("title").value;
      const phone = document.getElementById("phone").value;
      const text = document.getElementById("text").value;

      try {
        const data = await (
          await fetch("/api/announcements/{{anid}}", {
            method: "PATCH",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({ title, phone, text }),
          })
        ).json();
        if (data.ok) {
          location.reload();
        } else {
          alert(data.error);
        }
      } catch (e) {
        alert(e);
      }
    };

    const cancelEdit = () => {
      const title = document.getElementById("title");
      const phone = document.getElementById("phone");
      const text = document.getElementById("text");

      title.outerHTML = `<p id="title"><b>${title.value}</b></p>`;
      phone.outerHTML = `<p id="phone">Phone number: ${phone.value}</p>`;
      text.outerHTML = `<p id="text">${text.value}</p>`;

      document.getElementById("ebtn").hidden = false;
      document.getElementById("cbtn").hidden = true;
      document.getElementById("sbtn").hidden = true;
    };

    const tryEditAnnouncement = () => {
      const title = document.getElementById("title");
      const phone = document.getElementById("phone");
      const text = document.getElementById("text");

      title.outerHTML = `<input id="title" value="${title.textContent}">`;
      phone.outerHTML = `<input id="phone" value="${
        /Phone number: (.+)/.exec(phone.textContent)[1]
      }">`;
      text.outerHTML = `<input id="text" value="${text.textContent}">`;

      document.getElementById("ebtn").hidden = true;
      document.getElementById("cbtn").hidden = false;
      document.getElementById("sbtn").hidden = false;
    };

    const tryDeleteAnnouncement = async () => {
      try {
        const data = await (
          await fetch("/api/announcements/{{anid}}", {
            method: "DELETE",
          })
        ).json();
        if (data.ok) {
          location = "/";
        } else {
          alert(data.error);
        }
      } catch (e) {
        alert(e);
      }
    };

    const load = async () => {
      const loadingText = document.querySelector(".loadingText");
      const announcementsHolder = document.querySelector(".announcementHolder");

      loadingText.hidden = false;
      announcementsHolder.hidden = true;

      try {
        const data = await (await fetch("/api/announcement/{{anid}}")).json();

        const title = document.createElement("p");
        title.id = "title";
        title.innerHTML = `<b>${data.title}</b>`;
        announcementsHolder.appendChild(title);

        announcementsHolder.appendChild(document.createElement("br"));

        const phone = document.createElement("p");
        phone.id = "phone";
        phone.innerText = `Phone number: ${data.phone}`;
        announcementsHolder.appendChild(phone);

        announcementsHolder.appendChild(document.createElement("br"));

        const text = document.createElement("p");
        text.id = "text";
        text.innerText = data.text;
        announcementsHolder.appendChild(text);
      } catch (e) {
        alert(e);
      }

      loadingText.hidden = true;
      announcementsHolder.hidden = false;
    };

    document.addEventListener("DOMContentLoaded", load);
  </script>
</html>
