/**
 *  @class
 *  @function Quantity
 *  @param {DOMobject} element to create a quantity wrapper around
 */
class FRQuantityInput {
    constructor(self, decreaseText, increaseText) {
        // Create input
        this.input = document.createElement('input');
        this.input.value = 1;
        this.input.type = 'number';
        this.input.name = 'quantity';
        this.input.pattern = '[0-9]+';
        this.input.setAttribute('aria-label', 'Product quantity');

        // Get text for buttons
        this.decreaseText = decreaseText || 'Decrease quantity';
        this.increaseText = increaseText || 'Increase quantity';

        // Button constructor
        function Button(text, className) {
            this.button = document.createElement('button');
            this.button.type = 'button';
            this.button.innerHTML = text;
            this.button.title = text;
            this.button.classList.add(className);

            return this.button;
        }

        // Create buttons
        this.subtract = new Button(this.decreaseText, 'sub');
        this.add = new Button(this.increaseText, 'add');

        // Add functionality to buttons
        this.subtract.addEventListener('click', () => this.change_quantity(-1));
        this.add.addEventListener('click', () => this.change_quantity(1));

        // Add input and buttons to wrapper
        self.appendChild(this.subtract);
        self.appendChild(this.input);
        self.appendChild(this.add);
    }

    change_quantity(change) {
        // Get current value
        let quantity = Number(this.input.value);

        // Ensure quantity is a valid number
        if (isNaN(quantity)) quantity = 1;

        // Change quantity
        quantity += change;

        // Ensure quantity is always a number
        quantity = Math.max(quantity, 1);

        // Output number
        this.input.value = quantity;

        let quantitydata = this.input.closest('form').querySelector('[data-quantity]');
        if(quantitydata) quantitydata.setAttribute("data-quantity", quantity);
    }
}

(function () {
    let quantities = document.querySelectorAll('.quantity');

    if (quantities instanceof Node) quantities = [quantities];
    if (quantities instanceof NodeList) quantities = [].slice.call(quantities);
    if (quantities instanceof Array) {
        quantities.forEach(div => (div.quantity = new FRQuantityInput(div, 'Down', 'Up')));
    }
})();