<template>
  <div class="z-10 transition-all fixed 'translate-x-[0]'"
    :class="systemStore.sidebar ? ['translate-x-[0]']: ['translate-x-[-100%]']"
  >
    <div
      class="bg-white dark:bg-dark-grey min-h-[calc(100vh-80px)] w-64 lg:w-[300px] pb-10 hidden sm:flex sm:flex-col border-r border-r-lines-light dark:border-r-lines-dark">
      <p class="text-medium-grey text-xs font-bold py-4 px-6">ALL BOARDS ({{ boardsStore.boards.length }})</p>
      <!-- <div @click="onClickBoard(index)" v-for="(board, index) in boardsStore.boards" :key="index"
        class="flex items-center gap-4 w-11/12 rounded-r-full px-6 py-3 cursor-pointer text-medium-grey font-bold   "
        :class="board?.name === boardsStore?.getCurrentBoard?.name ?
        ['bg-main-purple', 'text-white', 'fill-white', 'hover:bg-main-purple-light']
        :
        ['fill-medium-grey', 'hover:text-main-purple', 'hover:fill-main-purple', 'hover:bg-main-purple/10']">
        <IconBoard />
        <span>{{ board.name }}</span>
      </div> -->

      <!-- <div class="flex items-center gap-4 w-11/12 rounded-r-full px-6 py-3 cursor-pointer text-medium-grey font-bold"> -->
        <a class="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase text-medium-grey" 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>
              <!-- <span class="px-3 py-2 flex text-xl items-center text-xs uppercase font-bold text-white" target="_blank">
                  {{user.name}}
                </span> -->
        <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' : '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>
        </div>
      <!-- </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 { useSystemStore } from '@/store/system';
import { useBoardsStore } from '@/store/boards';
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 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>