<template>
    <div v-if="!edit" class="flex items-center flex-1 todo">
        <CheckBoxField :check-it="!!(checked)"
                       @update:field="checked = $event"
                       class="block mr-1" />
        <span v-bind:class="{ 'line-through' : toDo.data.attributes.data.checked_at }" class="border border-transparent flex-1 pl-1">{{ toDo.data.attributes.data.name }}</span>
        <span @click="edit = !edit" >
            <svg-vue icon="edit" class="edit-icon w-4 block cursor-pointer mx-2" />
        </span>
    </div>
    <div v-else class="flex items-center flex-1">
        <CheckBoxField :check-it="!!(checked)"
                       @update:field="checked = $event"
                       class="block mr-1" />
        <input type="text"
               v-model="toDo.data.attributes.data.name"
               @keypress.enter="updateToDo"
               class="flex-1 rounded-sm border border-primary-600 pl-1">
        <span @click="edit = !edit">
            <svg-vue icon="close"  class="inline w-4 fill-current cursor-pointer mx-2" />
        </span>
    </div>
</template>

<script>
import CheckBoxField from '../../components/CheckBoxField'

export default {
    name: 'ToDo',
    components: {
        CheckBoxField
    },
    props: {
        toDo: {
            type: Object,
            required: true,
        },
        idList: {
            type: Number,
            required: true
        },
    },
    data () {
        return {
            edit: false,
            checked: !!(this.toDo.data.attributes.data.checked_at),
        }
    },
    methods: {
        updateToDo: function () {
            // eslint-disable-next-line no-undef
            axios.patch('/api/to-do-lists/' + this.idList + '/to-do/' + this.toDo.data.to_do_id, {name: this.toDo.data.attributes.data.name })
                .then(() => {
                    this.edit = false
                    //this.toDoList.data.attributes.data.name = this.listName
                })
                .catch(errorRes => {
                    console.log('Internal Error, Unable to delete list.' + errorRes)
                })
        },
    },
    watch: {
        checked: function () {
            // eslint-disable-next-line no-undef
            axios.patch('/api/to-do-lists/' + this.idList + '/to-do/' + this.toDo.data.to_do_id + '/check')
                .then(res => {
                    // this.toDoList.data.attributes.data.to_dos.data[position].data.attributes.data.checked_at = res.data.data.attributes.data.checked_at
                    this.toDo.data.attributes.data.checked_at = res.data.data.attributes.data.checked_at
                    this.checked = !!(res.data.data.attributes.data.checked_at)
                })
                .catch(errorRes => {
                    console.log('Internal Error, Unable to delete contact.' + errorRes)
                })
        }
    }
}
</script>

<style scoped>

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

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

</style>
