<template>
  <nav class="navbar is-fixed-top has-shadow px-3" role="navigation">
    <div class="navbar-brand mr-5">
      <span class="navbar-item">
        <SvgIcon v-bind="{ name: 'dot.svg', size: 18, type: 'primary' }" />
        <span class="fsb-20 has-text-primary">HRM</span>
      </span>
      <a
        role="button"
        class="navbar-burger"
        id="burger"
        aria-label="menu"
        aria-expanded="false"
        data-target="navMenu"
        @click="handleClick()"
      >
        <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" style="min-width: 650px">
        <template v-for="(v, i) in leftmenu" :key="i" :id="v.code">
          <a class="navbar-item px-2" v-if="!v.submenu" @click="changeTab(v)">
            <span
              :class="`fs-15 ${currentTab.code === v.code ? 'activetab' : ''}`"
              style="font-weight: 600; padding: 3px 4px"
            >
              {{ v[lang] }}
            </span>
          </a>
          <div class="navbar-item has-dropdown is-hoverable" v-else>
            <a class="navbar-item px-2" @click="changeTab(v)">
              <span
                :class="`icon-text ${currentTab.code === v.code ? 'activetab' : ''}`"
                style="padding: 3px 4px"
              >
                <span class="fsb-16">{{ v[lang] }}</span>
                <SvgIcon
                  style="padding-top: 5px"
                  v-bind="{
                    name: 'down2.svg',
                    type: currentTab.code === v.code ? 'white' : 'dark',
                    size: 15,
                  }"
                >
                </SvgIcon>
              </span>
            </a>
            <div class="navbar-dropdown has-background-light">
              <a
                class="navbar-item has-background-light fs-15 has-text-black py-1 border-bottom"
                v-for="x in v.submenu"
                @click="changeTab(v, x)"
              >
                {{ x[lang] }}
              </a>
            </div>
          </div>
        </template>
      </div>
      <div class="navbar-end">
        <a class="navbar-item" @click="changeTab(tabConfig)" v-if="tabConfig">
          <SvgIcon
            v-bind="{ name: 'configuration.svg', type: 'findata', size: 24 }"
          ></SvgIcon>
        </a>
        <a class="navbar-item" @click="openProfile()" v-if="avatar">
          <Avatarbox v-bind="avatar"></Avatarbox>
        </a>
      </div>
    </div>
  </nav>
</template>
<script setup>
import { watch } from 'vue';
const router = useRouter();
const route = useRoute();
const emit = defineEmits(['changetab', 'langChanged']);
const { $find, $filter, $findIndex, $store } = useNuxtApp();
const lang = ref($store.lang);
// let menu = $filter($store.common, { category: 'topmenu' });
// console.log('menu', menu);
const menu = [
  {
    id: 1,
    category: 'topmenu',
    classify: 'left',
    code: 'dashboard',
    vi: 'Dashboard',
    link: null,
    detail: {
      base: 'Dashboard',
      component: 'DashboardMaster',
    },
    index: 0,
  },
  {
    id: 2,
    category: 'topmenu',
    classify: 'left',
    code: 'hrm',
    vi: 'Quản lý nhân sự',
    link: null,
    detail: {
      base: 'HRM',
      component: 'HRMMaster',
    },
    index: 0,
  },
  {
    id: 3,
    category: 'topmenu',
    classify: 'left',
    code: 'rollcall',
    vi: 'Chấm công',
    link: null,
    detail: {
      base: 'Rollcall',
      component: 'RollcallMaster',
    },
    index: 0,
  },
  {
    id: 4,
    category: 'topmenu',
    classify: 'left',
    code: 'salary',
    vi: 'Tính lương',
    link: null,
    detail: {
      base: 'Salary',
      component: 'SalaryMaster',
    },
    index: 0,
  },
  {
    id: 5,
    category: 'topmenu',
    classify: 'left',
    code: 'kpi_efficiency',
    vi: 'KPI & Hiệu suất',
    link: null,
    detail: {
      base: 'Kpi',
      component: 'KpiMaster',
    },
    index: 0,
  },
  {
    id: 6,
    category: 'topmenu',
    classify: 'left',
    code: 'employee',
    vi: 'Cổng nhân viên',
    link: null,
    detail: {
      base: 'Employee',
      component: 'EmployeeMaster',
    },
    index: 0,
  },
];
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.map((v) => {
  let arr = $filter($store.common, { category: 'submenu', classify: v.code });
  if ($store.rights.length > 0) {
    arr = arr.filter((x) => $findIndex($store.rights, { setting: x.id }) >= 0);
  }
  v.submenu = arr.length > 0 ? arr : null;
});
const leftmenu = $filter(menu, { category: 'topmenu', classify: 'left' });
let currentTab = ref(leftmenu.length > 0 ? leftmenu[0] : undefined);
const subTab = ref();
const tabConfig = $find(menu, { code: 'configuration' });
const avatar = ref();
const isAdmin = ref();
const handleClick = function () {
  const target = document.getElementById('burger');
  target.classList.toggle('is-active');
  const target1 = document.getElementById('navMenu');
  target1.classList.toggle('is-active');
};
const closeMenu = function () {
  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();
  let query = subtab
    ? { tab: tab.code, subtab: subtab.code }
    : { tab: tab.code };
  router.push({ query: query });
}
function openProfile() {
  let modal = {
    component: 'user/Profile',
    width: '1100px',
    height: '360px',
    title: $store.lang === 'vi' ? 'Thông tin cá nhân' : '"User profile"',
  };
  $store.commit('showmodal', modal);
}
let found = route.query.tab
  ? $find(menu, { code: route.query.tab })
  : undefined;
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',
  };
  isAdmin.value = $store.login.type__code === 'admin';
});
watch(
  () => $store.login,
  (newVal, oldVal) => {
    if (!newVal) return;
    avatar.value = {
      image: null,
      text: $store.login.fullname.substring(0, 1).toUpperCase(),
      size: 'two',
      type: 'findata',
    };
    isAdmin.value = $store.login.type__code === 'admin';
    lang.value = $store.lang;
  },
);
</script>
<style scoped>
.navbar-dropdown {
  padding-block: 0.375rem;
  overflow: hidden;
}
.navbar-dropdown > .navbar-item {
  &:hover {
    background-color: hsl(30, 48%, 82%) !important;
  }

  &:last-child {
    border-bottom: none;
  }
}
</style>
