<script setup lang="ts">
import { CollectionObject } from '@PeopleManager/models/collection';

// Props
const props = defineProps<{
  collections: CollectionObject[]
  loading?: boolean
  selectedCollection?: CollectionObject | null
}>()

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

// Functions
const onCollectionSelect = (collection: CollectionObject) => {
  emit('select', collection)
}

const onCollectionEdit = (collection: CollectionObject) => {
  emit('edit', collection)
}
</script>

<template>
  <div class="collection-selector">
    <div class="collection-selector-header">
      <div class="d-flex align-center mb-3">
        <v-icon icon="mdi-book-multiple" size="small" class="mr-2" />
        <span class="text-subtitle-2 font-weight-bold">Address Books</span>
      </div>
    </div>
    
    <v-divider class="my-2" />
    
    <div class="collection-selector-content">
      <v-progress-linear v-if="loading" indeterminate color="primary" />
      
      <v-list v-else density="compact" nav class="pa-0">
        <v-list-item
          v-for="collection in collections"
          :key="collection.identifier"
          :value="collection.identifier"
          :active="selectedCollection?.identifier === collection.identifier"
          @click="onCollectionSelect(collection)"
          rounded="lg"
          class="mb-1"
        >
          <template #prepend>
            <v-icon :color="collection.properties.color || 'primary'" icon="mdi-book-outline" size="small" />
          </template>

          <v-list-item-title>{{ collection.properties.label || 'Unnamed' }}</v-list-item-title>
          
          <template #append>
            <v-btn
              icon="mdi-pencil"
              size="x-small"
              variant="text"
              @click.stop="onCollectionEdit(collection)"
            />
          </template>
        </v-list-item>
      </v-list>
      
      <v-alert v-if="!loading && collections.length === 0" type="info" variant="tonal" density="compact" class="mt-2">
        No address books found
      </v-alert>
    </div>
  </div>
</template>

<style scoped>
.collection-selector {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.collection-selector-header {
  flex-shrink: 0;
}

.collection-selector-content {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.v-list-item {
  cursor: pointer;
}
</style>
