
<script setup lang="ts">
import CommandPalettes from '@/components/CommandPalettes.vue'
import MessageBox from '@/components/MessageBox.vue'
import ActionDialog from '@/components/Dialogs/ActionDialog.vue'
import ChangePasswordDialog from '@/components/Dialogs/ChangePasswordDialog.vue'
import { useAuthStore } from '@/stores/auth'
import { useUserStore } from '@/stores/user'
import { useCommandPalattesStore } from '@/stores/command'
import { useMessageStore } from '@/stores/message'
import { useMenuStore } from '@/stores/menu'
import {
    Menu,
    MenuButton,
    MenuItem,
    MenuItems,
} from '@headlessui/vue'
import {
    BookOpenIcon,
    ChatBubbleOvalLeftEllipsisIcon,
    QuestionMarkCircleIcon,
    Bars3BottomLeftIcon
} from '@heroicons/vue/24/outline'
import { MagnifyingGlassIcon } from '@heroicons/vue/24/solid'
import { onMounted, onUnmounted, ref } from 'vue'
import PictureInitial from './PictureInitial.vue'
import Icon from '@/assets/images/pln-with-text.png'
import { useDialogStore } from '@/stores/dialog'

const authStore = useAuthStore()
const userStore = useUserStore()
const messageStore = useMessageStore()
const commandStore = useCommandPalattesStore()
const menu = useMenuStore()
const dialog = useDialogStore()

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

const dialogChangePassword = ref(false)

const handleOnDismissDialogChangePassword = () => {
    dialogChangePassword.value = false
}

const showDialogChangePassword = () => {
    dialogChangePassword.value = true
}

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 = () => {
        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 md:ml-80">
        <button type="button" class="px-4 text-gray-500 focus:outline-none focus:ring-0 md:hidden" @click="openSideBar">
            <span class="sr-only">Open sidebar</span>
            <Bars3BottomLeftIcon class="w-6 h-6" aria-hidden="true" />
        </button>
        <div class="flex items-center flex-shrink-0 my-auto ml-2 md:hidden">
            <img class="w-auto h-11" :src="Icon" alt="PLN" />
        </div>
        <div class="flex justify-end w-full px-4">
            <!-- <div class="flex flex-1">
                <div class="flex w-full md:ml-0">
                    <button @click="commandStore.showCommandPalettes"
                        class="relative w-full text-gray-400 border-0 border-transparent rounded-xl hover:text-primary-500 ring-0 ring-transparent focus:border-transparent focus:border-0 focus:ring-0">
                        <div class="absolute inset-y-0 left-0 flex items-center pointer-events-none">
                            <MagnifyingGlassIcon class="w-5 h-5" aria-hidden="true" />
                            <span class="hidden ml-2 sm:text-sm md:block">Cari menu...</span>
                        </div>
                    </button>
                    <img :src="Icon" alt="pln" class="md:hidden">
                </div>
            </div> -->

            <div class="flex items-center ml-4 md:ml-6">
                <!-- <button type="button"
                    class="p-1 mr-2 text-gray-400 bg-white rounded-full hover:text-primary-500 focus:outline-none focus:ring-0">
                    <span class="sr-only">FAQ</span>
                    <QuestionMarkCircleIcon class="w-6 h-6" aria-hidden="true" />
                </button>
                <button type="button"
                    class="p-1 mr-2 text-gray-400 bg-white rounded-full hover:text-primary-500 focus:outline-none focus:ring-0">
                    <span class="sr-only">Manual Book</span>
                    <BookOpenIcon class="w-6 h-6" aria-hidden="true" />
                </button>
                <button type="button" @click="messageStore.showDialogMessageBox"
                    class="p-1 text-gray-400 bg-white rounded-full hover:text-primary-500 focus:outline-none focus:ring-0">
                    <span class="sr-only">Message</span>
                    <ChatBubbleOvalLeftEllipsisIcon class="w-6 h-6" aria-hidden="true" />
                </button> -->
                <button @click="commandStore.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="userStore.user_name" />
                            <span class="hidden px-3 text-xs font-medium md:block text-primary-50 line-clamp-1">
                                {{ userStore.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="absolute right-0 z-10 w-48 py-1 mt-2 origin-top-right bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
                            <div class="flex-shrink-0 block px-4 py-2 border-b border-gray-50 group">
                                <div class="flex items-center">
                                    <div>
                                        <!-- <img class="inline-block rounded-full h-9 w-9" :src="userStore.user_image" alt="" /> -->
                                        <PictureInitial class-name="nline-block" size-class="w-9 h-9"
                                            background-class="bg-gray-100" font-class="font-bold text-gray-600 text-md"
                                            :name="userStore.user_name" />
                                    </div>
                                    <div class="ml-3">
                                        <p class="text-sm font-medium text-gray-700 group-hover:text-gray-900">
                                            {{ userStore.user_name }}
                                        </p>
                                        <p class="text-xs font-medium text-gray-500 group-hover:text-gray-700">
                                            {{ userStore.user_access }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <MenuItem v-slot="{ active }">
                            <button @click="showDialogChangePassword"
                                :class="[active ? 'bg-gray-100' : '', 'w-full text-left block px-4 py-2 text-sm text-gray-700']">
                                Ubah Password
                            </button>
                            </MenuItem>
                            <MenuItem v-slot="{ active }">
                            <button @click="showDialogLogout"
                                :class="[active ? 'bg-gray-100' : '', 'w-full text-left block px-4 py-2 text-sm text-gray-700']">
                                Log out
                            </button>
                            </MenuItem>
                        </MenuItems>
                    </transition>
                </Menu>
            </div>
        </div>
    </div>

    <ChangePasswordDialog :open="dialogChangePassword" @onClose="handleOnDismissDialogChangePassword" />
    <CommandPalettes :open="commandStore.open" @onClose="commandStore.handleOnDismissCommandPalettes" />
    <MessageBox :open="messageStore.open" @onClose="messageStore.handleOnDismissMessageBox" />
</template>