<script setup lang="ts">
import { ref } from 'vue'
import TopBar from '@/components/TopBar.vue'
import SideBar from '@/components/SideBar.vue'
import Note from '@/components/Note.vue'
import { activeNote } from '@/composables/useNotes'

const sideBarCollapsed = ref(false)

const viewModes: ViewMode[] = [
  { name: 'Note', icon: 'card-text' },
  { name: 'List', icon: 'list-task' },
  { name: 'Mindmap', icon: 'diagram-3' },
]
const activeViewMode = ref(viewModes[0])
</script>

<template>
  <TopBar
    :side-bar-collapsed="sideBarCollapsed"
    @toggle-side-bar="sideBarCollapsed = !sideBarCollapsed"
  />
  <div class="relative mx-auto flex h-full max-w-app">
    <SideBar
      :view-modes="viewModes"
      :active-view-mode="activeViewMode"
      @set-view-mode="(viewMode) => (activeViewMode = viewMode)"
      class="mt-[50px] px-3 py-6"
    />
    <main
      class="transition[margin-left] absolute bottom-0 right-0 top-[50px] flex-1 overflow-auto border-x-[1px] bg-white px-10 py-6 duration-200 ease-out"
      :class="sideBarCollapsed ? 'ml-0' : 'ml-sidebar'"
    >
      <Note v-if="activeNote" :note="activeNote" />
    </main>
  </div>
</template>
