<script setup lang="ts">
import { computed } from 'vue'
import { storeToRefs } from 'pinia'
import { useDisplay } from 'vuetify'
import { useMailUiStore } from '@/stores/mailUiStore'
import FolderView from '@/components/FolderView.vue'
import type { CollectionObject } from '@MailManager/models/collection'

const display = useDisplay()
const isMobile = computed(() => display.mdAndDown.value)

const mailUiStore = useMailUiStore()
const { sidebarVisible, selectedFolder } = storeToRefs(mailUiStore)

const handleCompose = () => mailUiStore.openComposer()

const handleFolderSelect = (folder: CollectionObject) => mailUiStore.selectFolder(folder)

const handleSettingsOpen = () => mailUiStore.settingsOpen()
</script>

<template>
  <v-navigation-drawer
    v-model="sidebarVisible"
    contained
    :permanent="sidebarVisible && !isMobile"
    :temporary="isMobile"
    width="280"
    class="mail-sidebar"
  >
    <div class="pa-3 pb-0">
      <!-- Primary action -->
      <v-btn
        block
        color="primary"
        variant="tonal"
        prepend-icon="mdi-pencil"
        class="justify-start"
        @click="handleCompose"
      >
        Compose
      </v-btn>
    </div>

    <!-- Folders -->
    <FolderView
      :selected-folder="selectedFolder"
      @select="handleFolderSelect"
    />

    <!-- Pinned utility footer -->
    <template #append>
      <v-divider />
      <div class="pa-2">
        <v-btn
          block
          variant="text"
          size="small"
          prepend-icon="mdi-cog"
          class="justify-start text-medium-emphasis"
          @click="handleSettingsOpen"
        >
          Settings
        </v-btn>
      </div>
    </template>
  </v-navigation-drawer>
</template>

<style scoped>
.mail-sidebar {
  border-right: 1px solid rgb(var(--v-border-color));
  overflow-y: auto;
}
</style>
