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(key);
    }

    initialize(key) {
        const selectHandler = this;
        const selectMenu = this._selectElementWrapper.querySelector('.select-menu');
        const options = {
            width: '100%',
            create: function (event, ui) {
                let buttonId = this.id + '-button'; //Open button
                let menuId = this.id + '-menu';
                document.getElementById(buttonId).setAttribute('dusk', this.id);
            },
            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');
            },
        };

        $(selectMenu).selectmenu(options).data("ui-selectmenu")._renderItem = function (ul, item) {
            var li = $("<li>"),
                wrapper = $("<div>", {
                    title: item.element.attr("title")
                });

            if (item.disabled) {
                this._addClass(li, null, "ui-state-disabled");
            }
            this._setText(wrapper, item.label);

            $(li).attr('dusk', selectMenu.id+"-"+item.value);

            return li.append(wrapper).appendTo(ul);
        };
    }
}