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

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

    selectAll () {
        for (const type in typesMap) {
            typesMap[type]['enabled'] = true;
        }
        tsc.updateHtml();
        saveSettings();
    }

    deselectAll () {
        for (const type in typesMap) {
            typesMap[type]['enabled'] = false;
        }
        tsc.updateHtml();
        saveSettings();
    }

    updateHtml () {
        for (const type in typesMap) {
            let typeColor = '#11FF11';
            if (!typesMap[type]['enabled']) {
                typeColor = '#FF1111';
            }
            document.getElementById('typeSelectSpan-' + type).style.color = typeColor;
        }
        abc.update();
    }

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

    expand () {
        for (const type in typesMap) {
            document.getElementById('typeSelectSpan-' + type).style.display = 'block'
        }
        this.buttonDiv.style.display = 'block';
    }

    collapse () {
        for (const type in typesMap) {
             document.getElementById('typeSelectSpan-' + type).style.display = 'none'
        }
        this.buttonDiv.style.display = 'none';
    }

    toggleType (type) {
        if (ctrlPressedDuringLastClick) {
            for (const t in typesMap) {
                if (t != type) { typesMap[t]['enabled'] = false}
                else { typesMap[t]['enabled'] = true}
            }
        } else {
            typesMap[type]['enabled'] = !typesMap[type]['enabled'];
        }
        this.updateHtml();
        saveSettings();
    }
}