<script setup lang="ts">
import { rootNote } 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<{
  (e: 'setViewMode', viewMode: ViewMode): void
}>()
</script>
<template>
  <div
    id="sidebar"
    class="relative flex w-sidebar flex-col gap-4 overflow-y-auto px-2 py-3"
  >
    <SideBarMenu>
      <template #header>Root note</template>
      <template #items>
        <SideBarMenuItem icon="house">{{ 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>Recent notes</template>
      <template #items>
        <SideBarMenuItem>{{ rootNote?.title }}</SideBarMenuItem>
      </template>
    </SideBarMenu>
  </div>
</template>
