<template>
    <div class="c-quantity  js-quantity-control">
        <div class="c-quantity__input">
            <input class="c-input  c-input--center  js-whole" data-test="whole" type="text" v-model="internalQuantity" @change="quantityChanged" @keyup="keyPressed"/>
        </div>
        <button class="c-quantity__button  c-quantity__button--increase  js-whole-up" data-test="whole-up" @click="modifyQuantity(step)">&plus;</button>
        <button class="c-quantity__button  c-quantity__button--decrease  js-whole-down" data-test="whole-down" @click="modifyQuantity(-step)">&minus;</button>
    </div>
</template>


<script>
    export default {
        props: {
            identifier: {type: Number, required: true}, //we use identifier here because id is ambiguous with the regular id attribute of HTMLElements
            quantity: {type: Number, default : 0},
            min: {type: Number, default : 0},
            max: {type: Number, default: null},
            step: {type: Number, default : 1},
        },
        data: function () {
            return {
                internalMax: this.max,
                internalQuantity: this.quantity //Copy the prop value into an internal value to avoid parent mutation
            }
        },
        methods: {
            /**
             * Triggered when clicking on the up and down buttons. Modifies the quantity by adding or subtracting the
             * step value from the internal quantity
             *
             * @param amount
             */
            modifyQuantity(amount) {
                this.internalQuantity = this.validateAndFixQuantity(this.internalQuantity += amount);
                this.$emit('change', this.identifier, this.internalQuantity)
            },

            /**
             * Triggered when the quantity input has changed
             */
            quantityChanged() {
                this.internalQuantity = this.validateAndFixQuantity(this.internalQuantity);
                this.$emit('change', this.identifier, this.internalQuantity)
            },

            /**
             * Receives a number representing a quantity and made sure it is within range and is a number.
             *
             * @param quantity
             * @return {number}
             */
            validateAndFixQuantity(quantity) {
                quantity = parseInt(quantity);
                if(typeof quantity !== 'number' || isNaN(quantity)) {
                    quantity = this.min;
                }
                else if(this.max && quantity < this.min) {
                    quantity = this.min;
                }
                else if(quantity < this.min) {
                    quantity = this.min;
                }

                return quantity;
            },

            /**
             * Triggered when a key was pressed
             *
             * @param {KeyboardEvent} event
             */
            keyPressed(event) {

                if (event.key === "ArrowDown") {
                    this.modifyQuantity(-this.step);
                } else if (event.key === "ArrowUp") {
                    this.modifyQuantity(this.step);
                }
            }
        }
    }
</script>