<template>
    <div class="inputWrap numberArrowWrap">
        <input type="tel"
            :class="['numberArrows', inputClass]"
            :id="id"
            :name="name"
            :autocomplete="autocomplete"
            :maxlength="maxlength"
            :readonly="readonly"
            :disabled="disabled"
            :value="value"
            @input="updateValue"
            @blur.prevent="checkNotEmpty"
            @keydown.up.prevent="incrementCounter"
            @keydown.down.prevent="decrementCounter"
            @keydown.space.prevent
            ref="numberInput"
        >
        <div class="numberButtons">
            <button class="numberButton add" @click.prevent="incrementCounter">
                <slot name="add"><i class="fa fa-angle-up"></i></slot>
            </button>
            <button class="numberButton subtract" @click.prevent="decrementCounter">
                <slot name="subtract"><i class="fa fa-angle-down"></i></slot>
            </button>
        </div> <!-- .numberButtons -->
    </div> <!-- .inputWrap.numberArrowWrap -->
</template>

<script>
    export default {
        props: {
            inputClass: String, // used to add class to the input field input-class="newClassName"
            id: String, // add id to input field
            name: String, // add name to input field
            value: {
                type: [Number, String],
                default: 0
            }, // add initial value to input field on load with v-model on component
            min: {
                type: Number,
                default: 0
            }, // set min value for input field :min="5"
            max: {
                type: Number,
                default: Infinity
            }, // set max value for input field :max="5"
            step: {
                type: Number,
                default: 1
            }, // set increment value for input field :step="5"
            autocomplete: String, // add autcomplete
            readonly: String, // add readonly
            disabled: String, // add disabled
            maxlength: Number // add maxlength
        },
        data() {
            return {
                counter: Number(this.value)
            }
        },
        watch: {
            counter(value, oldValue) {
                // if counter is more than max value then set it to the max value
                if (value > this.max) {
                    this.counter = this.max;
                }
                // if counter is less than min value then set it to the min value
                if (value < this.min) {
                    this.counter = this.min;
                }
                // emit change event for use by other components
                this.$emit('input', value, oldValue);
                // legacy jquery event - sends event to the DOM
                window.vueEventHub.$emit('input', {
                    value: value,
                    oldValue: oldValue,
                    $el: this.$el
                });
            }
        },
        methods: {
            incrementCounter() {
                this.counter = this.counter + this.step;
            },
            decrementCounter() {
                this.counter = this.counter - this.step;
            },
            checkNotEmpty() {
                // if counter is an empty string then set it to min value
                if (this.counter === '') {
                    this.counter = this.min;
                }
            },
            updateValue() {
                return (this.$refs.numberInput.value !== '') ? this.counter = Number(this.$refs.numberInput.value) : false;
            }
        }
    }
</script>
