<template>
    <div>
        <div class="btn-group" data-toggle="buttons">
            <label
                class="btn btn-default"
                v-bind:class="{ 'btn--highlight': value &amp;&amp; i <= value }"
                ref="buttons"
                v-for="i in 5"
                v-bind:data-value="i"
                v-on:mouseenter="onMouseEnter"
                v-on:mouseleave="onMouseLeave"
                v-on:click="onClick">
                <input type="radio" name="options" autocomplete="off">
                <span class="sr-only">{{ i }}</span>
            </label>
        </div>
    </div>
</template>

<script>

    export default {

        props: [ 'original-value' ],

        data() {
            return {
                value: this.originalValue,
            }
        },

        watch: {
            originalValue: function(originalValue) {
                this.value = originalValue;
            }
        },

        mounted() {
            if (this.originalValue) {
                this.value = this.originalValue;
            }
        },

        methods: {

            animate: function() {

                var timeout;
                var times = 0;
                var direction = 1;

                var increment = function() {
                    if (this.value === 5) {
                        direction = -1;
                    }
                    if (this.value === 1) {
                        direction = 1;
                    }

                    this.value += direction;

                    if (++times === 10) {
                        clearTimeout(timeout);
                        if (this.originalValue === null) {
                            this.value = null;
                        }
                        return;
                    }

                    timeout = setTimeout(increment.bind(this), 100)
                }

                increment.apply(this);
            },

            onMouseEnter: function(e) {
                var value = $(e.target).data('value');
                this.$refs.buttons.forEach((button) => {
                    if ($(button).data('value') <= value) {
                        $(button).addClass('btn--highlight');
                    } else {
                        $(button).removeClass('btn--highlight');
                    }
                });
            },

            onMouseLeave: function(e) {
                if (!this.value) {
                    this.$refs.buttons.forEach((button) => {
                        $(button).removeClass('btn--highlight');
                    });
                } else {
                    this.$refs.buttons.forEach((button) => {
                        if ($(button).data('value') <= this.value) {
                            $(button).addClass('btn--highlight');
                        } else {
                            $(button).removeClass('btn--highlight');
                        }
                    });
                }
            },

            onClick: function(e) {
                var value = parseInt($(e.target).data('value'));
                this.value = value;
                this.$emit('change', { value: value });
            }

        }

    }

</script>

<style scoped>

.btn-group {
    margin-bottom: 10px;
}

.btn--highlight {
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

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

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

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

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

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

</style>
