<template>
  <div class="d-flex flex-column">
        <draggable 
      :list="value" 
      item-key="id" 
      @start="dragging = true" 
      @end="dragging = false" 
      :disabled="readonly"
    >
      <div 
        v-for="(element, index) in value" 
        :key="element.id"
        class="draggable-item d-flex align-items-center" 
        :class="{ 'readonly': readonly }"
      >
        <!-- Item content slot - each component can customize how items are rendered -->
        <slot 
          name="item" 
          :item="element" 
          :index="index"
          :update-item="updateItem"
          :delete-item="deleteItem"
        >
          <!-- Default item rendering -->
          <span class="px-2">{{ element.title }}</span>
          <span v-if="!readonly" class="delete-button" @click.prevent="deleteItem(index)">
            <slot name="delete-icon">
              <!-- Default delete icon -->
              <span class="mdi mdi-delete"></span>
            </slot>
          </span>
        </slot>
      </div>
    </draggable>
    
    <!-- Input slot for adding new items -->
    <slot 
      name="input" 
      :new-item="newItem"
      :add-item="addItem"
      :update-new-item="updateNewItem"
      :readonly="readonly"
      :placeholder="placeholder"
    >
      <!-- Default input -->
      <input 
        v-if="!readonly"
        v-model="newItem"
        type="text"
        :placeholder="placeholder"
        class="transparent-input"
        @keyup.enter="addItem"
      />
    </slot>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
import { generateId } from '@/tools/util'
import draggable from 'vuedraggable'

// Base interface that all list items must extend
export interface BaseListItem {
  id: string
  title: string
}

export default defineComponent({
  name: 'BaseListManager',
  components: {
    draggable,
  },
  props: {
    placeholder: {
      type: String,
      default: 'Add item...',
    },
    value: {
      type: Array as PropType<BaseListItem[]>,
      default: (): BaseListItem[] => [],
    },
    readonly: {
      type: Boolean,
      default: false,
    },
    // Function to create new items - allows customization by child components
    createNewItem: {
      type: Function as PropType<(title: string) => BaseListItem>,
      default: (title: string): BaseListItem => ({
        id: generateId(),
        title: title.trim(),
      }),
    },
  },
  emits: ['input'],
  data() {
    return {
      newItem: '' as string,
      dragging: false as boolean,
    }
  },
  methods: {
    deleteItem(index: number): void {
      const updated = [...this.value]
      updated.splice(index, 1)
      this.$emit('input', updated)
    },
    
    addItem(): void {
      if (!this.newItem.trim()) return
      const newEntry = this.createNewItem(this.newItem.trim())
      this.$emit('input', [...this.value, newEntry])
      this.newItem = ''
    },
    
    updateItem(index: number, updates: Partial<BaseListItem>): void {
      const updated = [...this.value]
      updated[index] = { ...updated[index], ...updates }
      this.$emit('input', updated)
    },
    
    updateNewItem(value: string): void {
      this.newItem = value
    },
  },
})
</script>

<style lang="scss" scoped>
.transparent-input {
  background-color: transparent !important;
  border: none !important;
  
  &:focus {
    outline: none !important;
    box-shadow: none;
  }
}
</style> 