<script setup lang="ts">
import { computed } from 'vue'
import { useDisplay } from 'vuetify'
import type { ServiceObject } from '@DocumentsManager/models/service'

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

defineProps<{
  modelValue: boolean
  activeProviderId: string
  activeServiceId: string
  services: ServiceObject[]
}>()

const emit = defineEmits<{
  'update:modelValue': [value: boolean]
  'navigate-home': []
  'select-service': [service: ServiceObject]
}>()
</script>

<template>
  <v-navigation-drawer
    :model-value="modelValue"
    contained
    @update:model-value="emit('update:modelValue', $event)"
    :permanent="!isMobile"
    :temporary="isMobile"
    width="280"
    class="files-sidebar"
  >
    <div class="pa-4">
      <v-list density="compact" nav>
        <v-list-subheader>Quick Access</v-list-subheader>
        <v-list-item
          prepend-icon="mdi-home"
          title="Home"
          @click="emit('navigate-home')"
        />
        <v-list-item
          prepend-icon="mdi-clock-outline"
          title="Recent"
          disabled
        />
        <v-list-item
          prepend-icon="mdi-star-outline"
          title="Starred"
          disabled
        />
        <v-list-item
          prepend-icon="mdi-trash-can-outline"
          title="Trash"
          disabled
        />
      </v-list>

      <v-divider class="my-4" />

      <v-list density="compact" nav>
        <v-list-subheader>Storage</v-list-subheader>
        <v-list-item
          v-for="service in services"
          :key="`${service.provider}:${String(service.identifier ?? '')}`"
          prepend-icon="mdi-harddisk"
          :title="service.label || String(service.identifier ?? 'Unnamed Service')"
          :subtitle="service.provider"
          :active="activeProviderId === service.provider && activeServiceId === String(service.identifier ?? '')"
          @click="emit('select-service', service)"
        />

        <div v-if="services.length === 0" class="files-sidebar-empty text-caption text-medium-emphasis px-4 py-2">
          No storage services available.
        </div>
      </v-list>
    </div>
  </v-navigation-drawer>
</template>

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

.files-sidebar-empty {
  line-height: 1.4;
}
</style>
