<script setup lang="ts">
import { computed } from 'vue'
import { storeToRefs } from 'pinia'
import { useServicesStore } from '@MailManager/stores/servicesStore'
import { useMailStore } from '@/stores/mailStore'
import { useMailSettingsStore } from '@/stores/mailSettingsStore'
import { useMailUiStore } from '@/stores/mailUiStore'
import FolderTreeView from './FolderTreeView.vue'
import FolderPageView from './FolderPageView.vue'
import type { CollectionObject } from '@MailManager/models/collection'
import type { ServiceObject } from '@MailManager/models'

interface ServiceGroup {
  service: ServiceObject
  loading: boolean
  loaded: boolean
  error: string | null
}

const props = defineProps<{
  selectedFolder?: CollectionObject | null
}>()

// Emits
const emit = defineEmits<{
  select: [folder: CollectionObject]
}>()

// Stores
const servicesStore = useServicesStore()
const mailStore = useMailStore()
const mailUiStore = useMailUiStore()
const mailSettingsStore = useMailSettingsStore()
const { folderViewMode } = storeToRefs(mailSettingsStore)

const serviceGroups = computed(() => {
  const groups: ServiceGroup[] = []

  servicesStore.servicesEnabled.forEach(service => {
    if (service.identifier === null) {
      return
    }

    groups.push({
      service,
      loading: mailStore.isServiceFolderLoading(service.provider, service.identifier),
      loaded: mailStore.hasServiceFoldersLoaded(service.provider, service.identifier),
      error: mailStore.getServiceFolderError(service.provider, service.identifier),
    })
  })

  return groups
})

// Handlers
const handleFolderCreate = (service: ServiceObject, parentFolder: CollectionObject | null = null) => {
  mailUiStore.openCreateFolderDialog(service, parentFolder)
}

const handleFolderEdit = (folder: CollectionObject) => {
  mailUiStore.openRenameFolderDialog(folder)
}

const handleFolderDelete = (folder: CollectionObject) => {
  mailUiStore.openDeleteFolderDialog(folder)
}

const handleFolderMove = (folder: CollectionObject) => {
  mailUiStore.openMoveFolderDialog(folder)
}

</script>

<template>
  <v-list density="compact" nav>
    <!-- Tree View -->
    <FolderTreeView
      v-if="folderViewMode === 'tree'"
      :selected-folder="selectedFolder"
      :service-groups="serviceGroups"
      @select="emit('select', $event)"
      @create-folder="handleFolderCreate"
      @edit-folder="handleFolderEdit"
      @move-folder="handleFolderMove"
      @delete-folder="handleFolderDelete"
    />

    <!-- Page-based View -->
    <FolderPageView
      v-else
      :selected-folder="selectedFolder"
      :service-groups="serviceGroups"
      @select="emit('select', $event)"
      @create-folder="handleFolderCreate"
      @edit-folder="handleFolderEdit"
      @move-folder="handleFolderMove"
      @delete-folder="handleFolderDelete"
    />

    <!-- Empty state -->
    <v-list-item v-if="servicesStore.servicesEnabled.length === 0">
      <v-list-item-title class="text-center text-medium-emphasis">
        No mail accounts configured
      </v-list-item-title>
    </v-list-item>
  </v-list>
</template>

<style scoped>
.v-list-item--active {
  background-color: rgba(var(--v-theme-primary), 0.12);
}
</style>
