<template>
  <div class="navbar-container d-flex content align-items-center">

    <!-- Nav Menu Toggler -->
    <ul class="nav navbar-nav d-xl-none">
      <li class="nav-item">
        <b-link
          class="nav-link"
          @click="toggleVerticalMenuActive">
          <feather-icon
            icon="MenuIcon"
            size="21" />
        </b-link>
      </li>
    </ul>

    <!-- Left Col -->
    <div class="bookmark-wrapper align-items-center flex-grow-1 d-none d-lg-flex">
      <dark-Toggler class="d-none d-lg-block" />
    </div>

    <b-navbar-nav class="nav align-items-center ml-auto">
      <b-nav-item-dropdown
        right
        toggle-class="d-flex align-items-center dropdown-user-link"
        class="dropdown-user">
        <template #button-content>
          <div class="d-sm-flex d-none user-nav">
            <p class="user-name font-weight-bolder mb-0">
              {{ (userData && userData.name) || "來賓帳戶" }}
            </p>
            <span class="user-status">{{ (userData && userData.role) || "Guest" }}</span>
          </div>
          <b-avatar
            size="40"
            variant="warning"
            badge
            :src="makeAvatorLink"
            class="badge-minimal"
            badge-variant="success" />
        </template>
        <template v-if="(userData && userData.role)">
          <b-dropdown-item link-class="d-flex align-items-center">
            <feather-icon
              size="16"
              icon="UserIcon"
              class="mr-50" />
            <span>Profile</span>
          </b-dropdown-item>

          <b-dropdown-item link-class="d-flex align-items-center">
            <feather-icon
              size="16"
              icon="MailIcon"
              class="mr-50" />
            <span>Inbox</span>
          </b-dropdown-item>

          <b-dropdown-item link-class="d-flex align-items-center">
            <feather-icon
              size="16"
              icon="CheckSquareIcon"
              class="mr-50" />
            <span>Task</span>
          </b-dropdown-item>

          <b-dropdown-item link-class="d-flex align-items-center">
            <feather-icon
              size="16"
              icon="MessageSquareIcon"
              class="mr-50" />
            <span>Chat</span>
          </b-dropdown-item>

          <b-dropdown-divider />
          <b-dropdown-item link-class="d-flex align-items-center" @click="logout">
            <feather-icon
              size="16"
              icon="LogOutIcon"
              class="mr-50" />
            <span>登出</span>
          </b-dropdown-item>
        </template>
        <b-dropdown-item v-else link-class="d-flex align-items-center" :to="{ name: 'login' }">
          <feather-icon
            size="16"
            icon="LogOutIcon"
            class="mr-50" />
          <span>登入</span>
        </b-dropdown-item>
      </b-nav-item-dropdown>
    </b-navbar-nav>
  </div>
</template>

<script>
import {
  BLink, BNavbarNav, BNavItemDropdown, BDropdownItem, BDropdownDivider, BAvatar,
} from 'bootstrap-vue'
import DarkToggler from '@core/layouts/components/app-navbar/components/DarkToggler.vue'
import useJwt from '@/auth/jwt/useJwt'
import { getUserData } from '@/auth/utils'
import { avatarText } from '@core/utils/filter'
import { defineRulesFor } from '@/libs/acl/ability'
export default {
  components: {
    BLink,
    BNavbarNav,
    BNavItemDropdown,
    BDropdownItem,
    BDropdownDivider,
    BAvatar,

    // Navbar Components
    DarkToggler,
  },
  props: {
    toggleVerticalMenuActive: {
      type: Function,
      default: () => { },
    },
  },
  data() {
    return {
      userData: getUserData(),
      avatarText,
    }
  },
  methods: {
    logout() {

      // Reset ability


      useJwt.logout().then(response => {
        // Remove userData from localStorage
        // ? You just removed token from localStorage. If you like, you can also make API call to backend to blacklist used token
        localStorage.removeItem(useJwt.jwtConfig.storageTokenKeyName)
        localStorage.removeItem(useJwt.jwtConfig.storageRefreshTokenKeyName)
        this.$ability.update(defineRulesFor(null));
        // Remove userData from localStorage
        localStorage.removeItem('userData')
        this.$router.push({ name: 'login' });// Redirect to login page
      });




    },
  }, computed: {
    makeAvatorLink() {
      return this.userData && this.userData.id ? './images/user/' + this.userData.user_id + '.jpg' : null;
    },
  },
}
</script>
