<template>
    <div class="bg-white rounded text-black m-2 p-2">
        <div v-if="!edit" class="edit flex flex-wrap items-center">
            <a :href="bookmark.data.attributes.data.url"
               class="flex-1">
                <img v-if="bookmark.data.attributes.data.favicon"
                     class="w-5 h-5 mr-2 inline-block"
                     :src="bookmark.data.attributes.data.favicon"
                     alt="">
                <span class="font-bold">
                    {{ bookmark.data.attributes.data.name }}
                </span>
            </a>
            <span class="edit-icon inline-block text-red cursor-pointer" @click="edit = !edit">
                <svg-vue icon="edit" class="inline w-4 fill-current cursor-pointer mx-2" />
            </span>
        </div>
        <div v-else class="flex items-center">
            <img v-if="bookmark.data.attributes.data.favicon"
                 class="w-5 h-5 mr-2 inline-block"
                 :src="bookmark.data.attributes.data.favicon"
                 alt="">
            <input
                type="text"
                v-model="name"
                @keypress.enter="update"
                class="flex-1 w-10 font-semibold pl-1">
            <div @click="edit = !edit">
                <svg-vue icon="edit" class="w-4 fill-current cursor-pointer mx-2" />
            </div>
            <div @click="destroy">
                <svg-vue icon="close" class="w-4 fill-current text-red-dark cursor-pointer mx-2" />
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Bookmark',
    props: [
        'bookmark'
    ],
    data: function () {
        return {
            name: this.bookmark.data.attributes.data.name,
            url: '',
            edit: false,
            errors: null,
        }
    },
    methods: {
        update() {
            // eslint-disable-next-line no-undef
            axios.patch('/api/bookmarks/' + this.bookmark.data.bookmark_id, { name: this.name, url: this.bookmark.data.attributes.data.url })
                .then(() => {
                    this.edit = false
                })
                .catch(errorRes => {
                    console.log('Internal Error, Unable to delete contact.' + errorRes)
                })
        },
        destroy() {
            // eslint-disable-next-line no-undef
            axios.delete('/api/bookmarks/' + this.bookmark.data.bookmark_id)
                .then(() => {
                    this.edit = false
                    this.$emit('update:destroy', this.bookmark.data.bookmark_id)
                })
                .catch(errorRes => {
                    console.log('Internal Error, Unable to delete contact.' + errorRes)
                })
        }
    },
    watch: {
        name(val) {
            return this.bookmark.data.attributes.data.name = val
        }
    }
}
</script>

<style scoped>

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

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

</style>
