<script setup lang="ts">
import BootstrapIcon from "@/components/BootstrapIcon.vue";
import { useAuthStore } from "@/stores/auth";
import { useRoute, useRouter } from "vue-router";
import { useCookies } from "vue3-cookies";
import { watch, ref, computed } from "vue";
import type { ComputedRef } from "vue";

const router = useRouter();
const store = useAuthStore();
const { cookies } = useCookies();
const route = useRoute();

function logout() {
  store.logout();
  cookies.remove("bearer");
  router.push({ name: "login" });
}

const activeRoute = ref("");
const objectStorageActive: ComputedRef<boolean> = computed(
  () => activeRoute.value == "buckets" || activeRoute.value == "s3_keys"
);
const workflowActive: ComputedRef<boolean> = computed(
  () => activeRoute.value == "workflows"
);

watch(
  () => route.name,
  (to) => {
    if (typeof to === "string") {
      if (to.startsWith("bucket")) {
        activeRoute.value = "buckets";
      } else {
        activeRoute.value = to;
      }
    } else {
      activeRoute.value = "";
    }
  }
);
</script>

<template>
  <header
    class="navbar navbar-expand-lg navbar-dark bd-navbar bg-dark sticky-top border-bottom border-secondary"
  >
    <nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap text-light">
      <button
        class="navbar-toggler"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#navDropdown"
        aria-controls="navDropdown"
        aria-expanded="false"
        aria-label="Toggle navigation"
        v-if="store.authenticated"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <router-link class="navbar-brand ms-3" to="/">
        <img
          src="/src/assets/images/denbi.svg"
          alt=""
          width="24"
          height="24"
          class="d-inline-block align-text-top me-2"
        />
        CloWM
      </router-link>

      <div
        class="collapse navbar-collapse"
        id="navDropdown"
        v-if="store.authenticated"
      >
        <ul id="objectStorageNav" class="navbar-nav">
          <li class="nav-item dropdown">
            <a
              class="nav-link dropdown-toggle"
              :class="{ active: objectStorageActive }"
              href="#"
              role="button"
              data-bs-toggle="dropdown"
              aria-expanded="false"
            >
              Object Storage
            </a>
            <ul class="dropdown-menu dropdown-menu-dark">
              <li>
                <router-link class="dropdown-item" :to="{ name: 'buckets' }"
                  >Buckets</router-link
                >
              </li>
              <li>
                <router-link class="dropdown-item" :to="{ name: 's3_keys' }"
                  >S3 Keys</router-link
                >
              </li>
            </ul>
          </li>
        </ul>
        <ul id="workflowNav" class="navbar-nav">
          <li class="nav-item dropdown">
            <a
              class="nav-link dropdown-toggle"
              :class="{ active: workflowActive }"
              href="#"
              role="button"
              data-bs-toggle="dropdown"
              aria-expanded="false"
            >
              Workflows
            </a>
            <ul class="dropdown-menu dropdown-menu-dark">
              <li>
                <router-link class="dropdown-item" :to="{ name: 'workflows' }"
                  >Workflows</router-link
                >
              </li>
              <li>
                <a class="dropdown-item" href="#">Executions</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <div class="dropdown" v-if="store.authenticated && store.user != null">
        <a
          href="#"
          class="d-flex align-items-center text-white text-decoration-none dropdown-toggle-split"
          id="dropdownUser1"
          data-bs-toggle="dropdown"
          aria-expanded="false"
        >
          <strong class="me-2">{{ store.user.display_name }}</strong>
          <bootstrap-icon icon="person-circle" class="fs-4" />
        </a>
        <ul
          class="dropdown-menu dropdown-menu-dark text-small shadow"
          aria-labelledby="dropdownUser1"
        >
          <li><hr class="dropdown-divider" /></li>
          <li>
            <a class="dropdown-item cursor-pointer" @click="logout">Sign out</a>
          </li>
        </ul>
      </div>
    </nav>
  </header>
</template>

<style scoped></style>