class SystemSelectController {
    constructor() {
        this.div = document.getElementById('systemSelectDiv');
        this.initHtml();
        this.expanded = false;
    }

    initHtml () {
        this.div.style.display = 'grid';
        this.div.style.gridTemplateColumns = 'auto auto';
        this.div.style.gridTemplateRows = 'auto auto auto';
        this.headerDiv = document.createElement('div');
        this.headerDiv.innerHTML = '<span style="font-weight: bold; cursor: pointer;" onclick="ssc.toggleExpand();" title="Click to expand">System Select&nbsp;</span>';
        this.headerDiv.style.display = 'grid';
        this.headerDiv.style.gridColumn = '1 / span 2';
        this.div.appendChild(this.headerDiv);
        this.div.style.gap = '5px';
        for (const system in systemsMap) {
            systemsMap[system]['div'] = document.createElement('div');
            let systemColor = '#11FF11';
            if (!systemsMap[system]['enabled']) {
                systemColor = '#FF1111';
            }
            systemsMap[system]['div'].innerHTML = '<span title="Click to toggle, or ctrl-click to enable this and disable all others" id="systemSelectSpan-' + system + '" style="color: ' + systemColor + '; cursor: pointer;display: none;" onclick="ssc.toggleSystem(\'' + system + '\')">' + system + '</span>';
            this.div.appendChild(systemsMap[system]['div']);
        }
        this.buttonDiv = document.createElement('div');
        this.buttonDiv.style.display = 'none';
        this.buttonDiv.style.gridColumn = '1 / span 2';
        this.buttonDiv.innerHTML += '<span title="Click to enable all" id="systemSelectAllButton" style="border:solid blue;" onclick="ssc.selectAll();">&nbsp;All&nbsp;</span>&nbsp;&nbsp;';
        this.buttonDiv.innerHTML += '<span title="Click to disable all" id="systemSelectAllButton" style="border:solid blue;" onclick="ssc.deselectAll();">&nbsp;None&nbsp;</span>';
        this.div.appendChild(this.buttonDiv);
    }

    selectAll () {
        for (const system in systemsMap) {
            systemsMap[system]['enabled'] = true;
        }
        ssc.updateHtml();
        saveSettings();
    }

    deselectAll () {
        for (const system in systemsMap) {
            systemsMap[system]['enabled'] = false;
        }
        ssc.updateHtml();
        saveSettings();
    }

    updateHtml () {
        for (const system in systemsMap) {
            let systemColor = '#11FF11';
            if (!systemsMap[system]['enabled']) {
                systemColor = '#FF1111';
            }
            document.getElementById('systemSelectSpan-' + system).style.color = systemColor;
        }
        abc.update();
    }

    toggleExpand () {
        if (this.expanded) {
            this.collapse();
            this.expanded = false;
        } else {
            this.expand();
            this.expanded = true;
        }
    }

    expand () {
        for (const system in systemsMap) {
            document.getElementById('systemSelectSpan-' + system).style.display = 'block'
        }
        this.buttonDiv.style.display = 'block';
    }

    collapse () {
        for (const system in systemsMap) {
             document.getElementById('systemSelectSpan-' + system).style.display = 'none'
        }
        this.buttonDiv.style.display = 'none';
    }

    toggleSystem (system) {
        if (ctrlPressedDuringLastClick) {
            for (const s in systemsMap) {
                if (s != system) {systemsMap[s]['enabled'] = false }
                else {systemsMap[s]['enabled'] = true}
            }
        } else {
            systemsMap[system]['enabled'] = !systemsMap[system]['enabled'];
        }
        this.updateHtml();
        saveSettings();
    }
}