<script setup lang="ts">
import { rootNote, notes, setActiveNote as baseSetActiveNote } from '@/composables/useNotes'
import { windowIsMobile } from '@/utils/helpers'
import { activeViewMode } from '@/composables/useViewMode'

const loading = inject<boolean>('loading')

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

const emit = defineEmits<{
  setViewMode: [viewMode: ViewMode]
  collapse: [collapse: boolean]
}>()

const setActiveNote = (noteId: string | undefined) => {
  emit('collapse', windowIsMobile())
  baseSetActiveNote(noteId)
}

const setViewMode = (viewMode: ViewMode) => {
  emit('collapse', windowIsMobile())
  emit('setViewMode', viewMode)
}
</script>
<template>
  <div
    id="sidebar"
    class="fixed bottom-0 top-0 flex w-sidebar flex-col gap-4 overflow-y-auto px-2 py-3 text-[90%] max-sm:text-[120%]"
  >
    <SideBarMenu>
      <template #header>Root note</template>
      <template #items>
        <SideBarMenuItem
          icon="fas fa-fw fa-home"
          @click="setActiveNote(rootNote?.id)"
          :title="rootNote?.title"
          v-if="!loading"
        >
          {{ rootNote?.title }}
        </SideBarMenuItem>
        <SkeletonSidebarItem v-else />
      </template>
    </SideBarMenu>
    <SideBarMenu>
      <template #header>View mode</template>
      <template #items>
        <template v-if="!loading">
          <SideBarMenuItem
            v-for="viewMode in props.viewModes"
            :key="viewMode.name"
            :icon="viewMode.icon"
            :active="viewMode.name === activeViewMode.name"
            @click="setViewMode(viewMode)"
          >
            {{ viewMode.name }}
          </SideBarMenuItem>
        </template>
        <SkeletonSidebarItem :n="3" v-else />
      </template>
    </SideBarMenu>
    <SideBarMenu>
      <template #header>
        <i class="far fa-clock fa-fw mr-2" />
        Recent notes
      </template>
      <template #items>
        <template v-if="!loading">
          <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>
        <SkeletonSidebarItem v-else :n="5" />
      </template>
    </SideBarMenu>
  </div>
</template>
