<template>
  <BaseListManager
    :value="value"
    :placeholder="placeholder"
    :readonly="readonly"
    :create-new-item="createTodoItem"
    @input="$emit('input', $event)"
  >
    <!-- Custom item rendering for todo items -->
    <template #item="{ item, index, updateItem, deleteItem }">
      <input
        v-if="showCheckbox"
        :checked="item.done"
        type="checkbox"
        :disabled="readonly"
        @change="onToggleDone(index, $event, updateItem)"
      />
      <div 
        :class="{ 'checked-item': item.done }" 
        class="px-2"
        @click="$emit('onClick', item, index)"
      >
        {{ item.title }}
    </div>
      <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 TodoItem extends BaseListItem {
  done: boolean
}

export default defineComponent({
  components: {
    BaseListManager,
  },
  props: {
    placeholder: {
      type: String,
      default: 'Add item...',
    },
    value: {
      type: Array as PropType<TodoItem[]>,
      default: (): TodoItem[] => [],
    },
    readonly: {
      type: Boolean,
      default: false,
    },
    showCheckbox: {
      type: Boolean,
      default: true,
    },
  },
  emits: ['input'],
  methods: {
    createTodoItem(title: string): TodoItem {
      return {
        id: generateId(),
        title: title.trim(),
        done: false,
      }
    },
    
    onToggleDone(index: number, event: Event, updateItem: (index: number, updates: Partial<TodoItem>) => void): void {
      const target = event.target as HTMLInputElement
      updateItem(index, { done: target.checked })
    },
  },
})
</script>

<style lang="scss" scoped>
.checked-item {
  text-decoration: line-through;
  outline: none;
}
</style> 