<template>
    <div v-if="!edit" class="flex items-center flex-1 todo">
        <span v-bind:class="{ 'line-through' : checked }" class="border border-transparent flex-1 pl-1">{{ 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">
        <input type="text"
               v-model="name"
               @keypress.enter="updateToDo"
               class="flex-1 rounded-sm border border-orange-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>
export default {
    name: 'ToDo',
    props: {
        name: {
            type: String,
            required: true
        },
        checked: {
            type: Number,
            default: null,
        },
        idList: {
            type: Number,
            required: true
        },
        idToDo: {
            type: Number,
            required: true
        }
    },
    data () {
        return {
            edit: false,
        }
    },
    methods: {
        updateToDo: function () {
            // eslint-disable-next-line no-undef
            axios.patch('/api/to-do-lists/' + this.idList + '/to-do/' + this.idToDo, {name: this.name })
                .then(() => {
                    this.edit = 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>
