<template>
    <div>
        <div class="m-2 px-2 pt-2 bg-orange-400 rounded flex flex-col justify-between shadow">
            <div>
                <h1 class="text-2xl font-bold mb-2">{{ toDoList.data.attributes.data.name }}</h1>
                <ul class="draggable-list drop-zone"
                    @drop='onDrop($event, toDoList)'
                    @dragover.prevent
                    @dragenter.prevent
                >
                    <div v-if="toDoList.data.attributes.data.to_dos.to_dos_count < 1">
                        ------- no to Do -------
                    </div>
                    <ToDo v-else
                          v-for="(toDo, indexToDo) in toDoList.data.attributes.data.to_dos.data"
                          :key="indexToDo"
                          :toDo="toDo"
                          :position="indexToDo"
                          draggable
                          @dragstart='startDrag($event, toDo)'
                          class='drag-el'
                          />
                </ul>
            </div>
            <div class="flex items-center mt-2">
                <InputField name="name" classes="py-1" placeholder="New To Do" required @update:field="name = $event" :errors="errors" />
                <button class="btn-primary ml-1 mb-2 py-1" @click="addToDo">ADD</button>
            </div>
        </div>
    </div>
</template>

<script>
import InputField from '../../components/InputField'
import ToDo from './ToDo'
//https://learnvue.co/2020/01/how-to-add-drag-and-drop-to-your-vuejs-project/

export default {
    name: 'ToDoList',
    components: {
        InputField, ToDo
    },
    data: function () {
        return {
            name: '',
            errors: null,
            dragStartIndex: null,
            edit: false,
        }
    },
    props: {
        toDoList: {
            type: Object,
            require: true
        }
    },
    methods: {
        addToDo: function () {
            // eslint-disable-next-line no-undef
            axios.post('/api/to-do-lists/' + this.toDoList.data.to_do_list_id + '/to-do', {name: this.name})
                .then(res => {
                    this.toDoList.data.attributes.data.to_dos.data.push(res.data)
                    this.name = ''
                })
                .catch(errorRes => {
                    console.log('Internal Error, Unable to delete contact.' + errorRes)
                })
        },
        deleteToDo: function (toDo, position) {
            // eslint-disable-next-line no-undef
            axios.delete('/api/to-do-lists/' + this.toDoList.data.to_do_list_id + '/to-do/' + toDo.data.to_do_id)
                .then(() => {
                    this.toDoList.data.attributes.data.to_dos.data.splice(position, 1)
                })
                .catch(errorRes => {
                    console.log('Internal Error, Unable to delete contact.' + errorRes)
                })
        },
        startDrag: (evt, item) => {
            console.log('StartDrag', evt, item)
            evt.dataTransfer.dropEffect = 'move'
            evt.dataTransfer.effectAllowed = 'move'
            evt.dataTransfer.setData('itemID', item.id)
        },
        onDrop (evt, list) {
            console.log('onDrop', evt, list, this.toDoList)
            const itemID = evt.dataTransfer.getData('itemID')
            const item = this.toDoList.data.attributes.data.to_dos.data.find(item => item.id == itemID)
            item.list = list
        },
    }
}
</script>


