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

        this._selectElementWrapper = selectElementWrapper;

        if(!('key' in selectElementWrapper.dataset)) {
            console.error('SelectElement:constructor Missing the key dataset property on the selectElementWrapper'); return;
        }
        let key = selectElementWrapper.dataset.key;


        let realInput = selectElementWrapper.querySelector('select[name="'+key+'"]');
        if(!realInput) {
            console.error('SelectElement:constructor Did not find a required hidden select with name "'+key+'" in the VideoElementWrapper.'); return;
        }
        this._realInput = realInput;
        this.initialize();
    }

    initialize()
    {
        const selectHandler = this;
        const selectMenu = this._selectElementWrapper.querySelector('.select-menu');

        $(selectMenu).selectmenu({
            width: '100%',
            create: function ( event, ui ) {
                buttonId = this.id + '-button';
                menuId = this.id + '-menu';
            },
            open: function ( event, ui ) {
                let button = document.getElementById(this.id + '-button');
                let menu = document.getElementById(this.id + '-menu');
                menu.style.width = button.offsetWidth + 'px';
                menu.parentNode.style.width = button.offsetWidth + 'px';
                button.classList.add('dropdown-open');
            },
            change: function( event, ui ) {
                let button = document.getElementById(this.id + '-button');
                let buttonText = button.querySelector('.ui-selectmenu-text').innerHTML;
                button.querySelector('.ui-selectmenu-text').innerHTML = buttonText.replace(/ /gi, '');

                let changeEvent = document.createEvent("Event");
                changeEvent.initEvent("change", false, true);
                // args: string type, boolean bubbles, boolean cancelable
                selectHandler._realInput.dispatchEvent(changeEvent);
            },
            close: function ( event, ui) {
                let button = document.getElementById(this.id + '-button');
                button.classList.remove('dropdown-open');
            }
        });
    }
}