<template>
  <BaseListManager
    :value="value"
    :placeholder="placeholder"
    :readonly="readonly"
    :create-new-item="createColorItem"
    @input="$emit('input', $event)"
  >
    <!-- Custom item rendering for color items -->
    <template #item="{ item, index, updateItem, deleteItem }">
      <input
        v-if="!disableColors"
        :value="item.color"
        type="color"
        :disabled="readonly"
        @input="onColorInput(index, $event, updateItem)"
      />
      <span :class="disableColors ? 'pr-2' : 'px-2'">{{ item.title }}</span>
      <span v-if="!readonly" class="delete-button" @click.prevent="deleteItem(index)">
        <span class="mdi mdi-delete text-danger"></span>
      </span>
    </template>
  </BaseListManager>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
import BaseListManager, { BaseListItem } from '../components/BaseListManager.vue'
import { generateId } from '@/tools/util'

interface ColorItem extends BaseListItem {
  color?: string
}

export default defineComponent({
  components: {
    BaseListManager,
  },
  props: {
    placeholder: {
      type: String,
      default: 'Add item...',
    },
    value: {
      type: Array as PropType<ColorItem[]>,
      default: (): ColorItem[] => [],
    },
    disableColors: {
      type: Boolean,
      default: false,
    },
    readonly: {
      type: Boolean,
      default: false,
    },
  },
  emits: ['input'],
  methods: {
    createColorItem(title: string): ColorItem {
      return {
        id: generateId(),
        title: title.trim(),
        color: !this.disableColors ? '#000000' : undefined,
      }
    },
    
    onColorInput(index: number, event: Event, updateItem: (index: number, updates: Partial<ColorItem>) => void): void {
      const target = event.target as HTMLInputElement
      const newColor = target.value
      updateItem(index, { color: newColor })
    },
  },
})
</script>

<style lang="scss" scoped>
input[type='color'] {
  border: none;
  padding: 0;
  background: none;
  outline: none;
  width: 1.5rem;
  height: 1.5rem;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  
  &::-webkit-color-swatch-wrapper {
    padding: 0;
  }
  
  &::-webkit-color-swatch {
    border: none;
  }
}

.draggable-item.readonly input[type='color'] {
  cursor: not-allowed;
  opacity: 0.8;
}
</style> 