let tree = {};

function create_tree_data(curr_dir) {
    let url = base_url + curr_dir;

    const xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = function () {
        if (this.readyState === 4) {
            if (xmlHttp.status === 200) {
                let data = JSON.parse(xmlHttp.responseText);

                for (let i = 0; i < data.length; i++) {
                    if (data[i]['Type'] === 'dir') {
                        file_path.push(curr_dir + '/' + data[i]['Name']);
                        create_tree_data(curr_dir + '/' + data[i]['Name']);
                    }
                }

                tree = file_path.reduce((arr, path) => addPath(path.split('/'), arr), [])[0]['children'];
                create_tree_view();
            }
        }
    }

    xmlHttp.open("GET", url, true);
    xmlHttp.setRequestHeader('Authorization', 'Basic ' + sessionStorage.getItem('authorization'));
    xmlHttp.send(null);
}

function create_tree_view() {
    let html_tree = document.createElement('div');
    html_tree.innerHTML = `<ul id="tree_ul"></ul>`;

    document.getElementById("tree").innerHTML = '';
    create_list_view(tree, document.getElementById("tree"), '');

    // Remove nested-class from root element
    document.getElementsByTagName('ul')[0].classList.remove('nested')

    let icon = document.getElementsByClassName("folder");
    for (let i = 0; i < icon.length; i++) {
        icon[i].addEventListener("click", function () {
            if (this.parentElement.querySelector(".nested") !== null) {
                this.parentElement.querySelector(".nested").classList.toggle("active");
            }
            this.classList.toggle("folder-open");
        });
    }
}

function tree_onclick(url) {
    window.history.pushState('index', 'Filemanager', 'index.html?path=' + url);
    path_changed();
}

function create_list_view(dataRoot, elementRoot, url) {
    if (dataRoot) {
        const list = document.createElement('ul');
        list.classList.add('nested');
        elementRoot.appendChild(list);

        Object.keys(dataRoot).forEach(key => {
            const listElement = document.createElement('li');
            listElement.innerHTML = `<span class="folder" id='${(url + '/' + dataRoot[key].text).replaceAll('/', '-')}' onclick="tree_onclick('${url}/${dataRoot[key].text}');">${dataRoot[key].text}</span>`;
            list.appendChild(listElement);

            create_list_view(dataRoot[key]['children'], listElement, url + '/' + dataRoot[key].text);
        });
    }
}

function addPath(pathcomponents, arr) {
    let component = pathcomponents.shift()
    let comp = arr.find(item => item.text === component)
    if (!comp) {
        comp = {text: component}
        arr.push(comp)
    }
    if (pathcomponents.length) {
        addPath(pathcomponents, comp.children || (comp.children = []))
    }
    return arr
}