//also @See onOff.blade.php

class OnOff {
    constructor(onOffElementWrapper) {
        if(onOffElementWrapper === undefined || onOffElementWrapper.tagName !== "DIV") {
            console.error('OnOff:constructor Missing the expected div element that represents the OnOff attribute wrapper.'); return;
        }

        this._onOffElementWrapper = onOffElementWrapper;


        if(!('key' in onOffElementWrapper.dataset)) {
            console.error('OnOff:constructor Missing the key dataset property on the onOffElementWrapper'); return;
        }

        let realCheckbox = onOffElementWrapper.querySelector('input[type="checkbox"]');
        if(!realCheckbox) {
            console.error('OnOff:constructor Did not find a required input of type checkbox in the OnOff attribute wrapper.'); return;
        }
        this._realCheckbox = realCheckbox;

        let visibleCheckbox = onOffElementWrapper.querySelector('.on-off-switch');
        if(!visibleCheckbox) {
            console.error('OnOff:constructor Did not find a required div with class on-off-switch in the OnOff attribute wrapper.'); return;
        }
        this._visibleCheckbox = visibleCheckbox;

        this._visibleCheckbox.addEventListener('click', this.toggleOnOffSwitch.bind(this));
        this.initialize();
    }

    initialize()
    {
        this.updateOnOffState();
    }

    updateOnOffState() {
        if (this._realCheckbox.value === '1') {
            this._realCheckbox.value = '1';
            this._visibleCheckbox.classList.add('on');
            this._realCheckbox.setAttribute('checked', '');
        }
        else {
            this._realCheckbox.value = '0';
            this._visibleCheckbox.classList.remove('on');
            this._realCheckbox.removeAttribute('checked');
        }
    }

    toggleOnOffSwitch() {
        this._realCheckbox.value = (this._realCheckbox.value === "0") ? "1" : "0";
        this.updateOnOffState();
        let changeEvent = document.createEvent("Event");
        changeEvent.initEvent("change", false, true);
        // args: string type, boolean bubbles, boolean cancelable
        this._realCheckbox.dispatchEvent(changeEvent)
    }
}