<script setup>
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import NavbarItem from "./NavbarItem.vue";
import NavbarBuilding from "./NavbarBuilding.vue";
import Logo from "@/assets/img/logo.svg";
import useUserInfoStore from "@/stores/useUserInfoStore";
import useBuildingStore from "@/stores/useBuildingStore";

import AlarmDrawer from "@/components/alarm/AlarmDrawer.vue";
import NavbarLang from "./NavbarLang.vue";
import { twMerge } from "tailwind-merge";

const user = ref("");
const menuShow = ref(true);
const router = useRouter();

const store = useUserInfoStore();
const storeBuilding = useBuildingStore();
onMounted(() => {
  const name = store.user.user_name;
  if (name) {
    user.value = name;
  }
});

const toggleMenu = () => {
  menuShow.value = !menuShow.value;
};

const src = import.meta.env.MODE === "production" ? "./logo.svg" : Logo;

const logout = () => {
  document.cookie = "JWT-Authorization=; Max-Age=0";
  document.cookie = "user_name=; Max-Age=0";
  store.user.token = "";
  store.user.user_name = "";
  storeBuilding.deleteBuilding();
  router.push({ path: "/login" });
};
</script>

<template>
  <header class="navbar bg-dark text-light-info w-full relative z-50">
    <div class="navbar-start min-w-[480px] lg:min-w-[440px]">
      <div
        tabindex="0"
        role="button"
        class="btn btn-ghost lg:hidden"
        @click="toggleMenu"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-5 w-5"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M4 6h16M4 12h8m-8 6h16"
          />
        </svg>
      </div>

      <router-link
        to="/dashboard"
        class="rounded-lg pl-4 text-2xl font-bold text-white flex items-center"
      >
        <img :src="src" alt="logo" class="w-8 me-1" />
        CviLux Group
      </router-link>
      <NavbarBuilding />
    </div>

    <div
      :class="
        twMerge(
          'navbar-center flex absolute lg:relative top-full bg-dark',
          menuShow ? 'block' : 'hidden'
        )
      "
    >
      <NavbarItem />
    </div>
    <div class="navbar-end mr-4">
      <ul class="left-menu">
        <li>
          <NavbarLang />
        </li>
        <li>
          <AlarmDrawer />
        </li>
        <li>
          <div class="dropdown dropdown-bottom dropdown-end">
            <button
              tabindex="0"
              type="link"
              class="flex flex-col justify-center items-center btn-group"
            >
              <font-awesome-icon
                :icon="['fas', 'user-circle']"
                size="2x"
                class="text-white w-10 m-auto"
              />
              <span class="text-white"> {{ user || "webUser" }}</span>
            </button>
            <ul
              tabindex="0"
              class="dropdown-content translate-y-2 z-[100] menu py-3 shadow rounded w-32 bg-[#4c625e] border text-center"
            >
              <li class="text-white">
                <a
                  href="#"
                  @click.prevent="logout"
                  class="flex flex-col justify-center items-center"
                  >{{ $t("sign_out") }}
                </a>
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </header>
</template>

<style lang="css">
.sub-drawer {
  @apply bg-dark bg-opacity-90 shadow-xl !important;
}

.left-menu {
  @apply flex flex-wrap justify-center relative z-0;
}

.left-menu > li {
  @apply relative;
}

.left-menu > li:not(:last-child)::after {
  @apply absolute top-5 bottom-0 left-20 right-0 block w-6 h-0.5 bg-[#93c0dc] z-0;
  content: "";
}
</style>
