<template>
  <div tabindex="1" ref="sidebarMobile" @blur="onBlur" class="flex flex-col bg-white dark:bg-dark-grey rounded-lg mx-auto max-w-3xs translate-y-[-40%]
  sm:hidden focus:outline-none">
    <p class="text-medium-grey text-xs font-bold py-4 px-6 ">ALL BOARDS ({{ boardsStore.boards.length }})</p>
    <div class="overflow-auto max-h-40">
      <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>
    <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="p-4">
      <DarkModeSwitch class="" />
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { useSystemStore } from '@/store/system';
import { useBoardsStore } from '@/store/boards';
import IconBoard from '@/components/icons/IconBoard.vue';
import DarkModeSwitch from './sidebar/DarkModeSwitch.vue';
const systemStore = useSystemStore()
const boardsStore = useBoardsStore()
const sidebarMobile = ref(null)

const onClickBoard = (index) => {
  boardsStore.selectedBoard = index
  systemStore.hideOverlay()
}
const createNewBoard = () => {
  systemStore.overlay = true
  systemStore.boardForm = { visible: true, edit: false }
  systemStore.sidebarMobile = false
}
const onBlur = () => {
  systemStore.overlay = false
  systemStore.sidebarMobile = false
}
onMounted(() => {
  sidebarMobile.value.focus()
})
</script>