<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 type="button" class="btn btn-default" v-bind:title="accuracyTitle">{{ accuracy || '?' }}</button>
                    <i v-if="index === 0" class="fa fa-exclamation-triangle text-muted" aria-hidden="true" title="Fiabilité"></i>
                </div>
                <div class="tag-item-btn tag-item-relevancy" v-bind:data-value="relevancy">
                    <button type="button" class="btn btn-default" v-bind:title="relevancyTitle">{{ relevancy || '?' }}</button>
                    <i v-if="index === 0" class="fa fa-crosshairs text-muted" aria-hidden="true" title="Pertinence"></i>
                </div>
                <div v-show="!readonly" class="tag-item-btn tag-item-delete">
                    <button type="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 class="small">Fiabilité</label>
                    <small>Êtes-vous sûr de votre mot-clé ?</small>
                    <color-buttons ref="accuracy"
                        @change="onChange('accuracy', $event.value)"
                        v-bind:original-value="accuracy"></color-buttons>
                </div>
                <div>
                    <label class="small">Pertinence</label>
                    <small>Votre mot-clé est-il indispensable à la compréhension ?</small>
                    <color-buttons ref="relevancy"
                        @change="onChange('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',
            'accuracy',
            'relevancy',
            'readonly'
        ],
        components: {
            "typeahead": Typeahead,
            "color-buttons": ColorButtons
        },
        data() {
            return {
                isNew: true,
            }
        },
        computed: {
            accuracyTitle: function() {
                return 'Fiabilité : ' + this.accuracy;
            },
            relevancyTitle: function() {
                return 'Pertinence : ' + this.relevancy;
            }
        },
        watch: {
            accuracy: function(accuracy) {
                if (this.isNew && this.isComplete()) {
                    this.isNew = false;
                    this.hide();
                }
            },
            relevancy: function(relevancy) {
                if (this.isNew && this.isComplete()) {
                    this.isNew = false;
                    this.hide();
                }
            }
        },
        mounted() {

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

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

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

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

        methods: {
            isComplete: function() {
                return this.accuracy && this.relevancy;
            },
            onChange: function(key, value) {
                var data = {}
                data[key] = value;

                this.$parent.replaceItemAt(this.index, data);
            },
            show: function() {
                $(this.$el).find('.collapse').collapse('show');
            },
            hide: function() {
                $(this.$el).find('.collapse').collapse('hide');
            },
            toggle: function(e) {
                e.preventDefault();
                if (this.readonly) { return; }

                this.$parent.hideAll();
                $(this.$el).find('.collapse').collapse('toggle');
            },
            remove: function(e) {
                e.preventDefault();
                e.stopPropagation();
                if (this.readonly) { return; }

                this.$parent.removeItemAt(this.index);
            },
        }

    }

</script>

<style scoped>

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

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

.tag-item-accuracy .fa,
.tag-item-relevancy .fa {
    position: absolute;
    left: 50%;
    top: -50%;
    transform: translate(-50%, -50%);
}

.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 5px 5px 10px;
    font-size: 12px;
    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>
