class MultiManager {
    #block;
    #nodes;
    #selectedIndex = 0;
    #selectedName = '';
    active = null;
    #screens = {
        'rank': {
            leave: (index,dom) => {
                if (window.criteria && window.criteria.rerank) {
                    window.onMultirank = () => this.#selectPage(index);
                    appManager.multirank(dom);
                } else {
                    this.#selectPage(index);
                }
            },
            open() {
                
            }
        },
        'result': {
            leave: (index,dom) => {
                if (window.criteria && window.criteria.rerank) {
                    window.onMultirank = () => this.#selectPage(index);
                    appManager.multirank(dom);
                } else {
                    this.#selectPage(index);
                }
            },
            open() {
                
            }
        },
        'settings': {
            leave: (index,dom) => {
                window.onDecide = () => this.#selectPage(index);
                appManager.decide(document.body.getElementsByClassName('decide')[0]); 
            },
            open() {
                
            }
        },
    }

    constructor() {
        this.#block = document.querySelector('.screenblock');
        this.#nodes = Array.from(this.#block.getElementsByTagName('node'));
        this.#selectPage(0);
        this.#settingsListener();
    }

    next(dom) {
        if(this.#screens[this.#selectedName] && this.#screens[this.#selectedName].leave){
            
            this.#screens[this.#selectedName].leave(this.#selectedIndex + 1, dom)
        }else{
            this.#selectPage(this.#selectedIndex + 1);
        }
    }

    prev(dom) {
        if(this.#screens[this.#selectedName] && this.#screens[this.#selectedName].leave){
           
            this.#screens[this.#selectedName].leave(this.#selectedIndex - 1, dom)
        }else{
            this.#selectPage(this.#selectedIndex - 1);
        }
    }

    #selectPage(index) {
        if (index < 0 || index >= this.#nodes.length) return;
        this.#nodes.forEach(node => node.style.display = 'none');
        this.#nodes[index].style.display = 'block';
        this.#selectedIndex = index;
        this.#selectedName =  this.#nodes[index].getAttribute('data-name');
        if(this.#screens[this.#selectedName] && this.#screens[this.#selectedName].open){
            this.#screens[this.#selectedName].open();
        }
        this.active = this.#nodes[index];
        appManager.parentNode =  this.active;
        this.#hide(index);
        window.rangeRender.autoRedraw();
    }

    #hide(index){
        const left = document.body.getElementsByClassName('ultraleft')[0];
        const right = document.body.getElementsByClassName('ultraright')[0];
        if(index == 0){
            left.style.opacity = 0;
        }else{
            left.style.opacity = 1;
        }
        if(index == this.#nodes.length - 1){
            right.style.opacity = 0;
        }else{
            right.style.opacity = 1;
        }
    }

    #settingsSynchronization(dom){
        this.#nodes.forEach(container => {
            const ranges = container.querySelectorAll('input[type="range"][place="setting"]');
            ranges.forEach(range => {
                 if(range != dom && dom.name == range.name && dom.getAttribute('field') == range.getAttribute('field')){
                    range.value = dom.value;
                }
            });
        });
    }

    #settingsListener(){
        const $self = this;
        this.#nodes.forEach(container => {
            const ranges = container.querySelectorAll('input[type="range"][place="setting"]');
            ranges.forEach(range => {
                if(!range.getAttribute('changed')){
                    range.addEventListener('change',function(){
                        $self.#settingsSynchronization(range);
                    });
                }
                
            });
        });
    }
}

document.addEventListener('DOMContentLoaded', function () {
    const width = 1100
    if(window.rangeRender){
        window.rangeRender.maxTriangleWidth = width;
        window.rangeRender.redrawTriangle()
    }else{
        window.maxTriangleWidth = width;
    }
    window.multi = new MultiManager();
    appManager.parentNode =  window.multi.active;
});