<script setup lang="ts">
import { rootNote, notes, setActiveNote } from '@/composables/useNotes'

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

const emit = defineEmits<{
  setViewMode: [viewMode: ViewMode]
}>()
</script>
<template>
  <div
    id="sidebar"
    class="fixed top-0 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="setActiveNote(rootNote?.id)"
          :title="rootNote?.title"
        >
          {{ rootNote?.title }}
        </SideBarMenuItem>
      </template>
    </SideBarMenu>
    <SideBarMenu>
      <template #header>View mode</template>
      <template #items>
        <SideBarMenuItem
          v-for="viewMode in props.viewModes"
          :key="viewMode.name"
          :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.slice(-10)"
          :key="note.id"
          icon="far fa-file-alt fa-fw"
          @click="setActiveNote(note.id)"
          :title="rootNote?.title"
        >
          {{ note.title }}
        </SideBarMenuItem>
      </template>
    </SideBarMenu>
  </div>
</template>
