export class Checkboxes {
    constructor(attributeWrapper) {
        this.attributeWrapper = attributeWrapper;
        this.attributeKey = this.attributeWrapper.dataset.key;

        this.input = document.getElementById(this.attributeKey);
        this.checkboxes = attributeWrapper.querySelectorAll('input[type="checkbox"]');

        this.clicked = this.clicked.bind(this);
        this.updateRealInput = this.updateRealInput.bind(this);
        this.enableListeners = this.enableListeners.bind(this);
        this.init = this.init.bind(this);

        this.init();

        this.updateRealInput();
        this.enableListeners(true);
    }

    enableListeners(enable) {
        this.attributeWrapper.removeEventListener('click', this.clicked);

        if(enable) {
            this.attributeWrapper.addEventListener('click', this.clicked);
        }
    }

    /**
     * @param {MouseEvent} mouseEvent
     */
    clicked(mouseEvent) {
        if (!mouseEvent.target.tagName === 'INPUT') return false;
        this.updateRealInput();
    }

    init() {
        let ids = this.input.value.split(',');

        this.checkboxes.forEach(
            /** @param {HTMLInputElement} checkbox **/
            function(checkbox) {
                checkbox.checked = (ids.indexOf(checkbox.value) !== -1);
            }
        );
    }

    /**
     * Iterates over the child elements of the p element with class items and concatenates their data-id
     * values into a string. After that it sets the hidden input with the id string
     */
    updateRealInput() {
        let ids = [];
        this.checkboxes.forEach(
            /** @param {HTMLInputElement} checkbox **/
            function(checkbox) {
                if(checkbox.checked) ids.push(checkbox.value);
            }
        );

        let idString = ids.join(',');

        this.input.setAttribute('value', idString);

        let changeEvent = document.createEvent("Event");
        changeEvent.initEvent("change", false, true);
        // args: string type, boolean bubbles, boolean cancelable
        this.input.dispatchEvent(changeEvent)
    };
}