const login = document.querySelector("#login");
const logout = document.querySelector("#logout");
const stdModal = document.querySelector("#stdModal");

if (logout) {
  logout.addEventListener("click", () => {
    fetch("director.php", {
      method: "POST",
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
      },
      body: "ajaxId=logout",
    }).then(() => {
      if ("startViewTransition" in document) {
        document.startViewTransition(() => {
          window.location.href = "spaces.php?view=list";
        });
      } else {
        window.location.href = "spaces.php?view=list";
      }
    });
  });
}

if (login) {
  login.addEventListener("click", () => {
    console.log("click");
    stdModal.innerHTML = `
            <div class="form_card">
                <h3 class="underline">Log In</h3>
                <form method="post" id="login_form" action="director.php">
                    <input type="hidden" name="form_id" value="login_form">
                    <input type="hidden" name="password_hash" value="" id="password_hash">

                    <label for="username">Username / Email</label>
                    <input id="username" name="username" spellcheck="false" required autofocus>

                    <label for="password">Password</label>
                    <input id="password" name="password" type="password" spellcheck="false" required>

                    <label class="form_checkbox_container">Stay Logged In?
                        <input name="stay_logged_in" type="checkbox" value="true">
                        <span class="checkmark"></span>
                    </label>

                    <input class="button" type="submit" value="Log In">
                </form>

                <script src="js/login.js" defer></script>
            </div>
  `;

    stdModal.style.display = "flex";

    const form = document.querySelector("#login_form");
    const username_field = form.querySelector("#username");
    const passwordField = form.querySelector("#password");
    const submit_button = form.querySelector('input[type="submit"]');

    submit_button.addEventListener("click", async (e) => {
      e.preventDefault();
      requestAuth(username_field.value, passwordField.value);
    });

    function requestAuth(username, password) {
      fetch("director.php", {
        method: "POST",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
        body: "ajaxId=login&username=" + username + "&password=" + password,
      })
        .then((response) => {
          if (!response.ok) {
            console.log("Login Failed!");
          }

          return response.json();
        })
        .then((data) => {
          console.log(data);
          if ("startViewTransition" in document) {
            document.startViewTransition(() => {
              window.location.href = data["redirect"];
            });
          } else {
            // Fallback for browsers that don't support View Transitions
            window.location.href = data["redirect"];
          }
        });
    }
  });
}