<script>
  import { authenticationToken } from "../stores.js";
  import api from "../utilities/api";
  import { getNotificationsContext } from "svelte-notifications";
  const { addNotification } = getNotificationsContext();
  import notificationObject from "../utilities/notification";
  import { Link } from "svelte-routing";

  let tokenValue;
  authenticationToken.subscribe((value) => {
    tokenValue = value;
  });

  function destroyToken() {
    addNotification(
      notificationObject({
        text: "Signing you out ...",
      })
    );

    api()
      .delete("/users/sign_out")
      .then(() => {
        authenticationToken.set(null);
        addNotification(
          notificationObject({
            text: "Successfully logged out",
            type: "success",
          })
        );
      })
      .catch(() => {
        addNotification(
          notificationObject({
            text:
              "An error has happened while trying to log you out. Please try again later.",
            type: "danger",
          })
        );
      });
  }

  document.addEventListener("DOMContentLoaded", () => {
    // Get all "navbar-burger" elements
    const navbarBurgers = Array.prototype.slice.call(
      document.querySelectorAll(".navbar-burger"),
      0
    );

    // Check if there are any navbar burgers
    if (navbarBurgers.length > 0) {
      // Add a click event on each of them
      navbarBurgers.forEach((el) => {
        el.addEventListener("click", () => {
          // Get the target from the "data-target" attribute
          const target = el.dataset.target;
          const targeteriani = document.getElementById(target);

          // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
          el.classList.toggle("is-active");
          targeteriani.classList.toggle("is-active");
        });
      });
    }
  });
</script>

<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="/">
      <img
        src="/MegaMemeLogo2Transparent.png"
        width="112"
        height="28"
        alt="megameme"
      />
    </a>

    <a
      role="button"
      class="navbar-burger"
      aria-label="menu"
      aria-expanded="false"
      data-target="navbarBasicExample"
    >
      <span aria-hidden="true" />
      <span aria-hidden="true" />
      <span aria-hidden="true" />
    </a>
  </div>

  <div id="navbarBasicExample" class="navbar-menu">
    <div class="navbar-start">
      <Link class="navbar-item" to="/">Home</Link>
      <Link class="navbar-item" to="/mega_memes">Mega-Memes</Link>
    </div>

    <div class="navbar-end">
      <div class="navbar-item">
        <div class="buttons">
          {#if tokenValue}
            <Link class="navbar-item button is-primary" to="/upload"
              >Upload</Link
            >
            <a
              class="navbar-item button is-primary"
              href="#"
              on:click={destroyToken}>Sign out</a
            >
          {/if}

          {#if !tokenValue}
            <Link class="navbar-item button is-light" to="/users/sign_in"
              >Sign In</Link
            >
            <Link class="navbar-item button is-primary" to="/users/sign_up"
              >Sign Up</Link
            >
          {/if}
        </div>
      </div>
    </div>
  </div>
</nav>
