<template>
  <nav
    class="navbar has-shadow sticky top-0 px-3"
    role="navigation"
  >
    <div class="navbar-brand mr-5">
      <div class="navbar-item is-gap-1">
        <div class="size-4 has-background-primary rounded-full"></div>
        <span class="fs-16 font-semibold has-text-primary">{{ $dayjs().format("DD/MM") }}</span>
      </div>
      <a
        class="navbar-item p-0 has-text-primary"
        @click="changeTab(leftmenu[0])"
      >
        <svg
          style="max-height: none; width: 44px"
          width="80"
          height="80"
          viewBox="0 0 80 80"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M40.5 6C59.0015 6 74 20.9985 74 39.5C74 58.0015 59.0015 73 40.5 73C21.9985 73 7 58.0015 7 39.5C7 20.9985 21.9985 6 40.5 6ZM17.9834 29.0654V48.2373H30.9395V44.8955H22.0371V40.3174H30.2373V36.9756H22.0371V32.4072H30.9014V29.0654H17.9834ZM33.8604 48.2373H37.9141V41.4404H40.873L44.5039 48.2373H48.9785L44.9092 40.7852C44.9677 40.7598 45.0277 40.7378 45.085 40.7109C46.1269 40.2242 46.9225 39.5252 47.4717 38.6143C48.0209 37.6969 48.2959 36.6012 48.2959 35.3281C48.2959 34.0613 48.0244 32.9595 47.4814 32.0234C46.9448 31.0812 46.1613 30.3545 45.1318 29.8428C44.1085 29.3248 42.8725 29.0655 41.4248 29.0654H33.8604V48.2373ZM50.8965 48.2373H54.9492V42.0215H58.3574C59.83 42.0214 61.0843 41.7499 62.1201 41.207C63.1623 40.6641 63.9577 39.9052 64.5068 38.9316C65.0559 37.9582 65.331 36.8354 65.3311 35.5625C65.3311 34.2895 65.0595 33.1659 64.5166 32.1924C63.9799 31.2127 63.2001 30.4476 62.1768 29.8984C61.1533 29.343 59.914 29.0654 58.46 29.0654H50.8965V48.2373ZM57.6826 32.3789C58.4689 32.3789 59.1182 32.5139 59.6299 32.7822C60.1416 33.0443 60.5228 33.4151 60.7725 33.8955C61.0283 34.3698 61.1562 34.9259 61.1562 35.5625C61.1562 36.1925 61.0281 36.7507 60.7725 37.2373C60.5228 37.7178 60.1416 38.0955 59.6299 38.3701C59.1245 38.6384 58.482 38.7734 57.7021 38.7734H54.9492V32.3789H57.6826ZM40.6475 32.3789C41.4274 32.3789 42.0733 32.4948 42.585 32.7256C43.1028 32.9502 43.4867 33.2811 43.7363 33.7178C43.9922 34.1546 44.1201 34.6916 44.1201 35.3281C44.1201 35.9584 43.9922 36.4858 43.7363 36.9102C43.4867 37.3344 43.1064 37.6531 42.5947 37.8652C42.083 38.0774 41.4399 38.1836 40.666 38.1836H37.9141V32.3789H40.6475Z"
            fill="currentColor"
          />
        </svg>
      </a>
      <a
        role="button"
        class="navbar-burger"
        id="burger"
        aria-label="menu"
        aria-expanded="false"
        data-target="navMenu"
        @click="toggleBurger"
      >
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
      </a>
    </div>
    <div
      class="navbar-menu"
      id="navMenu"
    >
      <div class="navbar-start is-gap-1 is-align-items-center">
        <template
          v-for="(v, i) in leftmenu"
          :key="i"
          :id="v.code"
        >
          <a
            v-if="!v.submenu"
            :class="[
              'navbar-item rounded-lg is-clipped font-medium',
              currentTab.code === v.code ? 'has-text-primary-50 has-background-primary-95' : 'has-text-grey-dark',
            ]"
            style="font-size: 13.5px"
            @click="changeTab(v)"
          >
            {{ v[lang] }}
          </a>
          <div
            v-else
            class="navbar-item rounded-lg has-dropdown is-hoverable"
          >
            <a
              :class="[
                'navbar-link rounded-lg is-arrowless font-medium',
                currentTab.code === v.code ? 'has-text-primary-50 has-background-primary-95' : 'has-text-grey-dark',
              ]"
              @click="changeTab(v)"
              style="font-size: 13.5px"
            >
              <p class="is-flex is-align-items-center">
                <span>{{ v[lang] }}</span>
                <Icon
                  name="material-symbols:keyboard-arrow-down-rounded"
                  :size="20"
                />
              </p>
            </a>
            <div class="navbar-dropdown">
              <a
                v-for="(submenu, i) in v.submenu"
                :key="i"
                class="navbar-item"
                @click="changeTab(v, submenu)"
              >
                {{ submenu[lang] }}
              </a>
            </div>
          </div>
        </template>
      </div>
      <!-- <div class="navbar-end">
        <a class="navbar-item" @click="changeTab(tabConfig)" v-if="tabConfig">
          <Icon name="material-symbols:settings-outline-rounded" :size="20" />
        </a>
        <a class="navbar-item" @click="openProfile()" v-if="avatar">
          <Avatarbox v-bind="avatar"></Avatarbox>
        </a>
      </div> -->
      <div class="navbar-end">
        <a class="navbar-item is-flex is-gap-2 is-justify-content-space-between is-align-items-center">
          <div>
            <p class="fs-13">Xin chào,</p>
            <p class="fs-14 font-bold">Quản lý</p>
          </div>
          <Avatarbox
            text="Q"
            type="findata"
            size="two"
          />
        </a>
      </div>
    </div>
  </nav>
</template>
<script setup>
import Avatarbox from "~/components/common/Avatarbox.vue";

const router = useRouter();
const route = useRoute();
const emit = defineEmits(["changeTab"]);
const { $find, $filter, $store, $snackbar } = useNuxtApp();
const lang = computed(() => $store.lang);
const menu = $filter($store.common, { category: "topmenu" });
// if($store.rights.length>0) {
//   menu = menu.filter(v=>$findIndex($store.rights, {setting: v.id})>=0)
// }
if (menu.length === 0) {
  $snackbar($store.lang === "vi" ? "Bạn không có quyền truy cập" : "You do not have permission to access.");
}

menu.forEach((topmenu) => {
  let submenus = $filter($store.common, { category: "submenu", classify: topmenu.code });
  if ($store.rights.length > 0) {
    submenus = submenus.filter((x) => $findIndex($store.rights, { setting: x.id }) >= 0);
  }
  topmenu.submenu = submenus.length > 0 ? submenus : null;
});

const leftmenu = $filter(menu, { category: "topmenu", classify: "left" });
const currentTab = ref(leftmenu[0]);
const subTab = ref();
const tabConfig = $find(menu, { code: "configuration" });
const avatar = ref();
const isAdmin = computed(() => $store.login.type__code === "admin");

function toggleBurger() {
  const target = document.getElementById("burger");
  target.classList.toggle("is-active");
  const target1 = document.getElementById("navMenu");
  target1.classList.toggle("is-active");
}
function closeMenu() {
  if (!document) return;
  const target = document.getElementById("burger");
  const target1 = document.getElementById("navMenu");
  if (!target) return;
  if (target.classList.contains("is-active")) {
    target.classList.remove("is-active");
    target1.classList.remove("is-active");
  }
}
function changeTab(tab, subtab) {
  if (tab.submenu && tab.submenu.length > 0 && !subtab && !tab.detail) {
    subtab = tab.submenu[0];
  }
  currentTab.value = tab;
  subTab.value = subtab;
  emit("changeTab", tab, subtab);
  closeMenu();
  const query = subtab ? { tab: tab.code, subtab: subtab.code } : { tab: tab.code };
  router.push({ query });
}
function openProfile() {
  $store.commit("showmodal", {
    component: "user/Profile",
    width: "1100px",
    height: "360px",
    title: $store.lang === "vi" ? "Thông tin cá nhân" : "User profile",
  });
}
const found = route.query.tab && $find(menu, { code: route.query.tab });
if (found || currentTab.value) changeTab(found || currentTab.value);

onMounted(() => {
  if (!$store.login) return;
  avatar.value = {
    image: null,
    text: $store.login.fullname.substring(0, 1).toUpperCase(),
    size: "two",
    type: "findata",
  };
});
watch(
  () => $store.login,
  (newVal) => {
    if (!newVal) return;
    avatar.value = {
      image: null,
      text: $store.login.fullname.substring(0, 1).toUpperCase(),
      size: "two",
      type: "findata",
    };
  },
);
</script>
<style scoped>
a[class^="navbar"] {
  padding: 0.4rem 0.6rem;
}

.navbar-dropdown {
  padding-block: 0.375rem;
  overflow: hidden;
  box-shadow: 0 0.25em 0.5em hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-invert-l), 0.1);

  > .navbar-item {
    &:last-child {
      border-bottom: none;
    }
  }
}

@media screen and (min-width: 768px) {
  .navbar-dropdown a.navbar-item {
    padding-inline-end: 30px;
  }
}

@media screen and (max-width: 1023px) {
  .navbar-brand {
    margin-right: 0 !important;
  }

  .navbar-item,
  a.navbar-link {
    border-radius: 0;
  }

  .navbar-dropdown {
    box-shadow: 0 0.2em 0 hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-invert-l), 0.1);
  }
}

.navbar-item:hover {
  .navbar-link {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;

    > p {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
  }
}
</style>
