<template>
    <div class="tag-container">
        <div @click="toggle" class="tag-item">
            <span class="tag-title">{{ label }}</span>
            <div class="tag-item-buttons">
                <div class="tag-item-btn tag-item-accuracy" v-bind:data-value="accuracy">
                    <button class="btn btn-default">{{ accuracy || '?' }}</button>
                </div>
                <div class="tag-item-btn tag-item-relevancy" v-bind:data-value="relevancy">
                    <button class="btn btn-default">{{ relevancy || '?' }}</button>
                </div>
                <div class="tag-item-btn tag-item-delete">
                    <button class="btn btn-default"
                        @click="remove"><i class="fa fa-times" aria-hidden="true"></i></button>
                </div>
            </div>
        </div>
        <div class="collapse">
            <div class="tag-item-form">
                <div>
                    <label>Fiabilité</label>
                    <small>Êtes-vous sûr de votre tag ?</small>
                    <color-buttons ref="accuracy"
                        @change="accuracy = $event.value"
                        v-bind:original-value="accuracy"></color-buttons>
                </div>
                <div>
                    <label>Pertinence</label>
                    <small>Votre tag est-il indispensable ?</small>
                    <color-buttons ref="relevancy"
                        @change="relevancy = $event.value"
                        v-bind:original-value="relevancy"></color-buttons>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

    import ColorButtons from './ColorButtons.vue'
    import Typeahead from './Typeahead.vue'

    export default {
        props: [
            'index',
            'label',
            'original-accuracy',
            'original-relevancy'
        ],
        components: {
            "typeahead": Typeahead,
            "color-buttons": ColorButtons
        },
        data() {
            return {
                accuracy: null,
                relevancy: null,
                isNew: true,
            }
        },
        watch: {
            accuracy: function(accuracy) {
                this.onChange();
            },
            relevancy: function(relevancy) {
                this.onChange();
            }
        },
        mounted() {

            this.accuracy = this.originalAccuracy;
            this.relevancy = this.originalRelevancy;
            this.isNew = (!this.originalAccuracy && !this.originalRelevancy);

            this.$refs.accuracy.value = this.originalAccuracy;
            this.$refs.relevancy.value = this.originalRelevancy;

            $(this.$el).find('.collapse').collapse({ toggle: false });

            if (this.isNew) {
                this.$parent.hideAll();
                this.show();
                this.$refs.accuracy.animate();
            }
        },

        methods: {
            isComplete: function() {
                return this.accuracy && this.relevancy;
            },
            onChange: function() {
                this.$parent.replaceItemAt(this.index, {
                    accuracy: this.accuracy,
                    relevancy: this.relevancy
                });
                if (this.isNew && this.isComplete()) {
                    this.isNew = false;
                    this.hide();
                }
            },
            show: function() {
                $(this.$el).find('.collapse').collapse('show');
            },
            hide: function() {
                $(this.$el).find('.collapse').collapse('hide');
            },
            toggle: function(e) {
                e.preventDefault();
                this.$parent.hideAll();
                $(this.$el).find('.collapse').collapse('toggle');
            },
            remove: function(e) {
                e.preventDefault();
                e.stopPropagation();
                this.$parent.removeItemAt(this.index);
            },
        }

    }

</script>

<style scoped>

.tag-item-btn {
    float: left;
}

.tag-item-btn button {
    border: none;
    background-color: transparent;
}

.tag-item-btn[data-value="1"] {
    background-color: #fc5f62;
}

.tag-item-btn[data-value="2"] {
    background-color: #f7c136;
}

.tag-item-btn[data-value="3"] {
    background-color: #f7e53b;
}

.tag-item-btn[data-value="4"] {
    background-color: #ebf63d;
}

.tag-item-btn[data-value="5"] {
    background-color: #b9e78b;
}

.tag-title {
    padding: 5px;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.tag-item-delete {
    /* padding-left: 15px; */
}

.tag-item-form {
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.tag-item-form label,
.tag-item-form small {
    display: block;
    margin-bottom: 5px;
}

.tag-container {
    border: 1px solid #ccc;
    border-bottom: none;
}

.tag-list .tag-container:last-of-type {
    border-bottom: 1px solid #ccc;
}

.tag-item {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ccc;
}
.tag-item:hover {
    background-color: #f5f5f5;
}

</style>
