<template>
  <!--
    This example requires updating your template:

    ```
    <html class="h-full bg-gray-100">
    <body class="h-full">
    ```
  -->
  <div class="min-h-full">
    <Disclosure as="nav" class="bg-dark-grey fixed z-50 w-full top-0" v-slot="{ open }">
      <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div class="flex h-16 items-center justify-between">
          <div class="-mr-2 flex md:hidden">
            <!-- Mobile menu button -->
            <DisclosureButton
              class="inline-flex items-center justify-center rounded-md bg-dark-grey p-2 text-medium-grey hover:bg-dark-grey hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-dark-grey">
              <span class="sr-only">Open main menu</span>
              <Bars3Icon v-if="!open" class="block h-6 w-6" aria-hidden="true" />
              <XMarkIcon v-else class="block h-6 w-6" aria-hidden="true" />
            </DisclosureButton>
          </div>
          <div class="flex items-center">
            <div class="flex-shrink-0">
              <a class="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase text-slate-700"
                href="/admin/dashboard">
                <img class="w-32 h-8 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto"
                  src="@/assets/img/logo2.png" alt="" width="40" height="35" />
              </a>
            </div>
            <ul class="flex lg:flex-row list-none lg:ml-auto">
              <li class="nav-item inline">
                <span class="px-3 py-2 flex text-xl items-center text-xs uppercase font-bold text-white"
                  target="_blank">
                  {{ user.name }}
                </span>
              </li>
            </ul>
          </div>
          <div class="hidden md:block">
            <div class="flex items-baseline space-x-4">
              <Menu as="div" class="relative ml-3" v-for="item in navigation" :key="item.name">
                <router-link :to="item.href"
                  :class="[item.current ? 'bg-dark-grey text-white' : 'text-light-grey hover:bg-medium-grey hover:text-white', 'px-3 py-2 rounded-md text-sm font-medium']"
                  :aria-current="item.current ? 'page' : undefined">
                  {{ item.name }}
                </router-link>
              </Menu>
            </div>
          </div>
          <div class="hidden md:block">
            <div class="ml-4 flex items-center md:ml-6">
              <div class="navbar-end">
                <a class="btn" @click.prevent="logOut">LogOut</a>
              </div>
            </div>
          </div>

        </div>
      </div>

      <DisclosurePanel class="md:hidden">
        <div class="space-y-1 px-2 pt-2 pb-3 sm:px-3">
          <router-link :to="item.href" v-for="item in navigation" :key="item.name">
            <Menu as="div" class="relative ml-3">
              <DisclosureButton as="a" @mouseover="isOpen = true"
                :class="[item.current ? 'bg-dark-grey text-white' : 'text-light-grey hover:bg-medium-grey hover:text-white', 'block px-3 py-2 rounded-md text-base font-medium']"
                :aria-current="item.current ? 'page' : undefined">
                {{ item.name }}
              </DisclosureButton>
            </Menu>
          </router-link>
          <Menu as="div" class="relative ml-3">
            <a class="btn" @click.prevent="logOut">LogOut</a>
          </Menu>
        </div>
      </DisclosurePanel>
    </Disclosure>
  </div>

</template>

<script setup>
import { Disclosure, DisclosureButton, DisclosurePanel, Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
import { Bars3Icon, BellIcon, XMarkIcon } from '@heroicons/vue/24/outline'

const navigation = [
  { name: 'DASHBOARD', href: '/admin/dashboard', current: false, fontawesome: 'fas fa-chart-bar text-lg leading-lg text-slate-400 px-1' },
  { name: 'PATIENTS', href: '/admin/patients', current: false, fontawesome: 'fas fa-user-circle text-lg leading-lg text-slate-400 px-1' },
  { name: 'APPOINTMENT', href: '/admin/appointment', current: false, fontawesome: 'fas fa-calendar text-lg leading-lg text-slate-400 px-1' },
  { name: 'MANAGE', href: '/admin/manage', current: false, fontawesome: 'fas fa-user-lock text-lg leading-lg text-slate-400 px-1' },
  { name: 'PROFILE', href: '/admin/profile', current: false, fontawesome: 'fas fa-user-lock text-lg leading-lg text-slate-400 px-1' },
  // { name: 'Test', href: '/admin/management', current: false, fontawesome: 'fas fa-calendar text-lg leading-lg text-slate-400 px-1' },
]
</script>

<script>
import { createPopper } from "@popperjs/core";

export default {
  data() {
    return {
      user: this.$store.state.auth.user.user,
    }
  },
  computed: {
  },
  methods: {
    logOut() {
      this.$store.dispatch('auth/logout');
      this.$router.push('/login');
    },

  }
}
</script>

<style>
/* .router-link-active {
  @apply bg-gray-900;
  @apply text-white;
} */
/* .router-link-exact-active {
  @apply bg-gray-900;
  @apply text-white;
} */
</style>