<template>
  <!-- :class="systemStore.sidebar ? ['translate-x-[0]']: ['translate-x-[-100%]']"> -->
  <div class="z-10 transition-all fixed w-1/2 md:w-1/3 lg:w-48 fixed md:top-0 md:left-0 h-screen">
    <!-- :class="systemStore.sidebar ? ['min-w-[128px]', 'lg:min-w-[150px]'] : ['min-w-[100px]']"> -->
    <div class="hidden bg-dark-grey items-center sm:flex pl-6 h-20 md:h-16">
      <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="logo">
      <!-- <span class="px-3 py-2 flex text-xl items-center text-xs uppercase font-bold" target="_blank">{{user.name}}</span> -->
    </div>
    <div class="mx-auto max-w-sm w-11/12 flex items-center h-16 gap-4 sm:h-20">
      <!-- <div>
        <img class="sm:hidden w-32 h-8 flex justify-between" src="@/assets/img/logo2.png" alt="logo">
      </div> -->
    </div>

    <div class="bg-white dark:bg-dark-grey min-h-[calc(100vh-80px)] w-48 pb-10 hidden sm:flex sm:flex-col border-r border-r-lines-light dark:border-r-lines-dark">
        <div v-for="item in navigation" :key="item.name"
          class=" flex items-center gap-4 w-11/12 rounded-r-full px-6 py-3 cursor-pointer font-bold fill-main-purple text-main-purple hover:bg-medium-grey/10">
          <IconBoard />
          <router-link :to="item.href" :class="[item.current ? 'bg-dark-grey text-white' : 'font-bold text-black 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>
        </div>

      <!-- <div @click="createNewBoard()"
        class=" flex items-center gap-4 w-11/12 rounded-r-full px-6 py-3 cursor-pointer font-bold fill-main-purple text-main-purple hover:bg-medium-grey/10">
        <IconBoard />
        <span>+ Create New Board</span>
      </div>
      <div class="flex flex-col gap-2 mt-auto">
        <DarkModeSwitch class="w-10/12 mx-auto " />
        <HideSidebar class="w-11/12" />
      </div> -->
      <!-- <ShowSidebar v-if="!systemStore.SideBar" /> -->
      <!-- <ShowSidebar /> -->
    </div>

  </div>

</template>
<script setup>
import { Disclosure, DisclosureButton, DisclosurePanel, Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
import { Bars3Icon, BellIcon, XMarkIcon } from '@heroicons/vue/24/outline'
import { useSystemStore } from '@/store/system';
import { useBoardsStore } from '@/store/boards';
import Dropdown from '@/components/manager/Dropdown.vue';
import AddButtonMobile from '@/components/buttons/AddTaskMobile.vue'
import IconBoard from '@/components/icons/IconBoard.vue';
import IconArrowDown from '@/components/icons/IconArrowDown.vue';
import IconArrowUp from '@/components/icons/IconArrowUp.vue';
import DarkModeSwitch from './sidebar/DarkModeSwitch.vue';
import HideSidebar from './sidebar/HideSidebar.vue';
import ShowSidebar from '@/components/manager/sidebar/ShowSidebar.vue';
const systemStore = useSystemStore()
const boardsStore = useBoardsStore()

const navigation = [
  { name: 'Dashboard', href: '/admin/dashboard', current: false, fontawesome: 'fas fa-chart-bar 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: 'Management', href: '/admin/management', current: false, fontawesome: 'fas fa-calendar 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: 'Profile', href: '/admin/profile', current: false, fontawesome: 'fas fa-user-lock text-lg leading-lg text-slate-400 px-1' },
]

const editTask = () => {
  systemStore.overlay = true
  systemStore.boardForm = { edit: true, visible: true }
}
const deleteTask = () => {
  systemStore.overlay = true
  systemStore.delete = { board: true, visible: true }
}
const addTask = () => {
  systemStore.overlay = true
  systemStore.taskForm = { visible: true, edit: false };
}
const showMobileBar = () => {
  systemStore.sidebarMobile = true;
  systemStore.overlay = true
}
const onClickBoard = (index) => {
  boardsStore.selectedBoard = index
}
const createNewBoard = () => {
  systemStore.overlay = true
  systemStore.boardForm = { visible: true, edit: false }
}
</script>
<script>
export default {
  data() {
    return {
      user: this.$store.state.auth.user.user,
    }
  },
}
</script>