<script setup lang="ts">
import { rootNote, notes, activeNote } from '@/composables/useNotes'
import SideBarMenu from '@/components/SideBar/SideBarMenu.vue'
import SideBarMenuItem from '@/components/SideBar/SideBarMenuItem.vue'

const props = defineProps<{
  viewModes: ViewMode[]
  activeViewMode: ViewMode
}>()

const emit = defineEmits<{
  setViewMode: [viewMode: ViewMode]
}>()
</script>
<template>
  <div
    id="sidebar"
    class="relative flex w-sidebar flex-col gap-4 overflow-y-auto px-2 py-3 text-[90%]"
  >
    <SideBarMenu>
      <template #header>Root note</template>
      <template #items>
        <SideBarMenuItem icon="fas fa-fw fa-home" @click="activeNote = rootNote">
          {{ rootNote?.title }}
        </SideBarMenuItem>
      </template>
    </SideBarMenu>
    <SideBarMenu>
      <template #header>View mode</template>
      <template #items>
        <SideBarMenuItem
          v-for="viewMode in props.viewModes"
          :icon="viewMode.icon"
          :active="viewMode.name === activeViewMode.name"
          @click="emit('setViewMode', viewMode)"
        >
          {{ viewMode.name }}
        </SideBarMenuItem>
      </template>
    </SideBarMenu>
    <SideBarMenu>
      <template #header>
        <i class="far fa-clock fa-fw mr-2" />
        Recent notes
      </template>
      <template #items>
        <SideBarMenuItem
          v-for="note in notes"
          icon="far fa-file-alt fa-fw"
          @click="activeNote = note"
        >
          {{ note.title }}
        </SideBarMenuItem>
      </template>
    </SideBarMenu>
  </div>
</template>
