<script setup lang="ts">
import { useAuthStore } from '@/stores/auth'
import { useUserStore } from '@/stores/user'
import { useCommandPalattesStore } from '@/stores/command'
import { useMenuStore } from '@/stores/menu'
import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
import { MagnifyingGlassIcon } from '@heroicons/vue/24/solid'
import PictureInitial from '@/components/PictureInitial.vue'
import { useDialogStore } from '@/stores/dialog'
import { IconApp, IconBars3 } from '@/utils/icons'
import { RouterLink } from 'vue-router'

const auth = useAuthStore()
const user = useUserStore()
const command = useCommandPalattesStore()
const menu = useMenuStore()
const dialog = useDialogStore()

const openSideBar = () => menu.toggleSidebar()

const showDialogLogout = () => {
  dialog.type = 'error'
  dialog.title = 'Logout dari akun?'
  dialog.content = 'Apakah Anda sudah yakin akan logout dari akun ini?'
  dialog.cancelText = 'Batalkan'
  dialog.confirmText = 'Ya, logout'
  dialog.showCancelButton = true
  dialog.onConfirm = () => {
    auth.logout()
    window.location.href = '/login'
  }
  dialog.open = true
}
</script>

<template>
  <div class="sticky top-0 z-10 flex flex-shrink-0 h-16 bg-primary-50 lg:ml-80">
    <button type="button" class="px-4 text-gray-500 focus:outline-none focus:ring-0 lg:hidden" @click="openSideBar">
      <span class="sr-only">Open sidebar</span>
      <IconBars3 class="w-6 h-6 fill-gray-600" />
    </button>
    <RouterLink to="/home" class="flex items-center flex-shrink-0 my-auto ml-2 lg:hidden">
      <img class="w-auto h-11" :src="IconApp" alt="PLN" />
    </RouterLink>
    <div class="flex justify-end w-full px-4">
      <div class="flex items-center ml-4 md:ml-6">
        <button @click="command.showCommandPalettes" type="button"
          class="flex flex-row items-center md:w-[300px] p-2 mr-2 text-gray-400 bg-white rounded-full hover:text-primary-500 focus:outline-none focus:ring-0">
          <span class="sr-only">Search</span>
          <MagnifyingGlassIcon class="w-6 h-6 text-primary-500" aria-hidden="true" />
          <span class="hidden px-3 text-sm font-medium text-gray-500 md:block text-md">Cari menu</span>
        </button>

        <!-- Profile dropdown -->
        <Menu as="div" class="relative ml-1">
          <div>
            <MenuButton
              class="flex items-center max-w-xs px-1 py-1 text-sm rounded-full bg-secondary-100 md:bg-primary-500 focus:outline-none focus:ring-0 line-clamp-1">
              <span class="sr-only">Open user menu</span>
              <PictureInitial size-class="w-8 h-8" background-class="bg-secondary-100"
                font-class="text-xs font-bold text-primary-500" :name="user.user_name" />
              <span class="hidden px-3 text-xs font-medium md:block text-primary-50 line-clamp-1">
                {{ user.user_name }}
              </span>
            </MenuButton>
          </div>
          <transition enter-active-class="transition duration-100 ease-out"
            enter-from-class="transform scale-95 opacity-0" enter-to-class="transform scale-100 opacity-100"
            leave-active-class="transition duration-75 ease-in" leave-from-class="transform scale-100 opacity-100"
            leave-to-class="transform scale-95 opacity-0">
            <MenuItems class="container-menu-item">
              <div class="container-menu-profile group">
                <div class="flex items-center">
                  <div>
                    <PictureInitial class-name="inline-block" size-class="w-9 h-9" background-class="bg-secondary-100"
                      font-class="text-xs font-normal font-semibold text-primary-500" :name="user.user_name" />
                  </div>
                  <div class="ml-3 space-y-1">
                    <p class="text-sm font-medium text-primary-50">
                      {{ user.user_name }}
                    </p>
                    <p class="text-xs font-normal text-primary-50">
                      {{ user.user_access }}
                    </p>
                    <p class="text-xs font-normal border-t border-white text-primary-50">
                      • UID {{ user.user_uid }}
                    </p>
                  </div>
                </div>
              </div>
              <MenuItem v-slot="{ active }">
              <button @click="showDialogLogout" :class="[active ? 'menu-item-active' : 'menu-item']">
                Log out
              </button>
              </MenuItem>
            </MenuItems>
          </transition>
        </Menu>
      </div>
    </div>
  </div>
</template>
