<template>
    <div class="px-4 py-2">
        <div v-if="modal" class="modal-container" @click="modal = ! modal"></div>
        <div v-if="modal" class="modal">
            <p class="m-2 text-center">Are you sure you want to delete this list ?</p>
            <div class="flex justify-center mx-2 my-4">
                <button class="btn mr-2" @click="modal = ! modal">Cancel</button>
                <button class="btn-alert" @click="destroy"> Delete</button>
            </div>
        </div>
        <div class="flex items-center justify-between pb-2">
            <router-link to="/to-do-lists/" class="btn">Back</router-link>
            <a href="#" class="btn-alert" @click="modal = ! modal">Delete</a>
        </div>
        <div v-if="!loading" class="bg-gray-400 rounded p-1">
            <h1 class="mb-2 ml-2 todo" >
                <span v-if="!listNameEdit" class="text-2xl font-bold flex items-center">{{ toDoList.data.attributes.data.name }}
                    <span @click="listNameEdit = !listNameEdit">
                        <svg-vue icon="edit"  class="edit-icon inline w-4 fill-current cursor-pointer ml-2" />
                    </span>
                </span>
                <span v-else class="flex items-center">
                    <input type="text" class="p-1 rounded-sm mt-1 -ml-1" v-model="listName" @keydown.enter="updateList">
                    <span @click="listNameEdit = !listNameEdit">
                        <svg-vue icon="close"  class="inline w-4 fill-current cursor-pointer ml-2" />
                    </span>
                </span>
            </h1>
            <ul class='p-1'
                  v-for="(toDo, index) in toDoList.data.attributes.data.to_dos.data"
                  :key="index"
                  @drop='onDrop($event, toDo)'
                  @dragover.prevent
                  @dragenter.prevent >
                <li
                    draggable
                    @dragstart='startDrag($event, toDo)'
                    class='drag-el todo flex justify-between items-center bg-white rounded-sm mb-1 px-2 py-1' >
                    <div class="flex items-center flex-1 todo">
                        <svg-vue icon="draggable" class="w-4 block mr-2 cursor-move" />
                        <ToDo :to-do="toDo"
                              :id-list="toDoList.data.to_do_list_id"
                              class="flex-1 bg-blue" />
                        <span @click="deleteToDo(toDo, index)" class="cursor-pointer ml-2 font-bold edit-icon flex items-center">
                            <svg-vue icon="close" class="w-4" />
                        </span>
                    </div>
                </li>

            </ul>
            <div class="flex items-center m-2">
                <input type="text" v-model="toDoName" @keydown.enter="addToDo" class="p-1 rounded-sm -ml-1">
                <button class="btn-primary ml-1 py-1" @click="addToDo">ADD</button>
            </div>
        </div>
    </div>
</template>

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

export default {
    name: 'ToDoListShow',
    components: {
        ToDo
    },
    data () {
        return {
            toDoList: null,
            loading: true,
            toDoName: '',
            errors: null,
            modal: false,
            listName: '',
            listNameEdit: false,
        }
    },
    mounted() {
        // eslint-disable-next-line no-undef
        axios.get('/api/to-do-lists/' + this.$route.params.id)
            .then(res => {
                this.toDoList = res.data
                this.loading = false
                this.listName = res.data.data.attributes.data.name
                this.reorderList()
            })
            .catch(errorRes => {
                this.loading = false
                if (errorRes.response.status === 404) {
                    this.$router.push('/')
                }
            })

    },
    methods: {
        startDrag: (evt, item) => {
            evt.dataTransfer.dropEffect = 'move'
            evt.dataTransfer.effectAllowed = 'move'
            evt.dataTransfer.setData('toDoID', item.data.to_do_id)
            evt.dataTransfer.setData('toDoOrder', item.data.attributes.data.order)
        },
        onDrop (evt, toDoEnd) {
            const toDoID = parseInt(evt.dataTransfer.getData('toDoID'), 10)
            const toDoOrder = parseInt(evt.dataTransfer.getData('toDoOrder'), 10)
            let toDoMove = this.toDoList.data.attributes.data.to_dos.data.find(toDo => toDo.data.to_do_id === toDoID)

            // eslint-disable-next-line no-undef
            axios.patch('/api/to-do-lists/' + this.toDoList.data.to_do_list_id + '/to-do/' + toDoMove.data.to_do_id + '/change', { 'new-order': toDoEnd.data.attributes.data.order })
                .then(() => {
                    toDoMove.data.attributes.data.order = toDoEnd.data.attributes.data.order
                    toDoEnd.data.attributes.data.order = toDoOrder
                    this.reorderList()
                })
                .catch(errorRes => {
                    console.log('Internal Error, Unable to delete contact.' + errorRes)
                })
        },
        reorderList() {
            this.toDoList.data.attributes.data.to_dos.data.sort(function(a, b) {
                return a.data.attributes.data.order - b.data.attributes.data.order
            })
        },
        addToDo: function () {
            if(this.toDoName.length >= 3) {
                // eslint-disable-next-line no-undef
                axios.post('/api/to-do-lists/' + this.toDoList.data.to_do_list_id + '/to-do', {name: this.toDoName})
                    .then(res => {
                        this.toDoName = ''
                        this.toDoList.data.attributes.data.to_dos.data.push(res.data)
                    })
                    .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)
                })
        },
        destroy: function () {
            // eslint-disable-next-line no-undef
            axios.delete('/api/to-do-lists/' + this.$route.params.id)
                .then(() => {
                    this.$router.push('/to-do-lists')
                })
                .catch(errorRes => {
                    console.log('Internal Error, Unable to delete list.' + errorRes)
                })
        },
        updateList: function () {
            // eslint-disable-next-line no-undef
            axios.patch('/api/to-do-lists/' + this.$route.params.id, {name: this.listName })
                .then(() => {
                    this.listNameEdit = false
                    this.toDoList.data.attributes.data.name = this.listName
                })
                .catch(errorRes => {
                    console.log('Internal Error, Unable to delete list.' + errorRes)
                })
        }
    }
}
</script>

<style scoped>

    .edit-icon {
        opacity: 0;
        transition: opacity 0.2s;
    }

    .todo:hover .edit-icon {
        opacity: 1;
        transition: opacity 0.2s;
    }

</style>
