class GroupingSelectController {
    constructor() {
        this.div = document.getElementById('groupBySelectDiv');
        this.systemDiv = undefined;
        this.typeDiv = undefined;
        this.initHtml();
        this.expanded = false;
    }

    initHtml () {
        this.div.style.display = 'grid';
        this.div.style.gridTemplateColumns = 'auto auto';
        this.div.style.gridTemplateRows = 'auto auto';
        this.headerDiv = document.createElement('div');
        this.headerDiv.innerHTML = '<span style="font-weight: bold; cursor: pointer;" onclick="gsc.toggleExpand();" title="Click to expand">Group By&nbsp;</span>';
        this.headerDiv.style.display = 'grid';
        this.headerDiv.style.gridColumn = '1 / span 2';
        this.div.appendChild(this.headerDiv);
        this.div.style.gap = '5px';
        
        let systemColor = '#11FF11';
        let typeColor = '#FF1111';
        if (groupByOption === 'type') {
            systemColor = '#FF1111';
            typeColor = '#11FF11';
        }
        
        this.systemDiv = document.createElement('div');
        this.systemDiv.innerHTML = '<span id="groupBySelectSpan-system" style="color: ' + systemColor + '; cursor: pointer;display: none;" onclick="gsc.setToSystem()">System</span>';
        this.div.appendChild(this.systemDiv);

        this.typeDiv = document.createElement('div');
        this.typeDiv.innerHTML = '<span id="groupBySelectSpan-type" style="color: ' + typeColor + '; cursor: pointer;display: none;" onclick="gsc.setToType()">Type</span>';
        this.div.appendChild(this.typeDiv);
    }

    updateHtml () {
        let systemColor = '#11FF11';
        let typeColor = '#FF1111';
        if (groupByOption === 'type') {
            systemColor = '#FF1111';
            typeColor = '#11FF11';
        }

        document.getElementById('groupBySelectSpan-system').style.color = systemColor;
        document.getElementById('groupBySelectSpan-type').style.color = typeColor;

        abc.update();
    }

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

    setToSystem () {
        groupByOption = 'system';
        this.updateHtml();
        saveSettings();
    }

    setToType () {
        groupByOption = 'type';
        this.updateHtml();
        saveSettings();
    }

    expand () {
        document.getElementById('groupBySelectSpan-system').style.display = 'block'
        document.getElementById('groupBySelectSpan-type').style.display = 'block'
    }

    collapse () {
        document.getElementById('groupBySelectSpan-system').style.display = 'none'
        document.getElementById('groupBySelectSpan-type').style.display = 'none'
    }

    toggle () {
        if (groupByOption === 'system') {
            groupByOption = 'type';
            this.updateHtml();
        } else {
            groupByOption = 'system';
            this.updateHtml();
        }
        saveSettings();
    }
}