const dashboard = document.querySelector('.dashboard');
const projectId = document.querySelector('.project_id');
const btnFetchData = document.querySelector('.fetch_info');

const cache_clean = document.querySelector('.fetch_info_cacheclean');
const cloud_dashboard = document.querySelector('.cloud_dashboard');
const new_relic = document.querySelector('.new_relic');
const swat = document.querySelector('.swat');
const observation = document.querySelector('.observation');
const clone = document.querySelector('.clone');

const notice = document.querySelector('.notice');

window.addEventListener('load', function() {
    cache_clean.style.display = 'none';
    cloud_dashboard.style.display = 'none';
    new_relic.style.display = 'none';
    swat.style.display = 'none';
    observation.style.display = 'none';
    clone.style.display = 'none';
    notice.style.display = 'block';
})

btnFetchData.addEventListener('click', (e) => {
    dashboard.innerHTML = '';
    cache_clean.style.display = 'inline';
    cloud_dashboard.style.display = 'inline';
    new_relic.style.display = 'inline';
    swat.style.display = 'inline';
    observation.style.display = 'inline';
    clone.style.display = 'inline';
    notice.style.display = 'none';

    requestData(projectId.value);

})

async function requestData(project_id) {
    var headers = new Headers();
    headers.append('Content-Type', 'application/json');

    async function getMetadata() {
        const response = await fetch('http://localhost:8080/api/info/get_metadata', {
            method: 'GET',
            headers: headers,
        });
        const json = await response.json();
        return json;
    }

    const metadata = await getMetadata();
    let infocheck = [];
    let content = [];
    let loader = [];
    for (let check in metadata) {
        infocheck[check] = document.createElement('div');
        infocheck[check].classList.add("infocheck");
        infocheck[check].innerHTML = '<div id="title" class="title"><h3>' + check.toUpperCase() + '</h3></div>';
        content[check] = document.createElement('div');
        content[check].classList.add("content");
        content[check].innerHTML = '<pre class="content">Loading</pre></div>';
        loader[check] = document.createElement('div');
        loader[check].classList.add("loader");
        content[check].appendChild(loader[check]);
        infocheck[check].appendChild(content[check]);
        dashboard.appendChild(infocheck[check]);
    }

    var msnry = new Masonry(dashboard, {
        itemSelector: '.infocheck'
    });

    for (let check in metadata) {
        const data = {
            "project_id": project_id,
            "action": [
                {
                    "name": metadata[check].method
                }
            ]
        };

        const response2 = await fetch('http://localhost:8080/api/info', {
            method: 'POST',
            headers: headers,
            body: JSON.stringify(data)
        }).then((resp) => resp.json()).then((response) => {
            content[check].innerHTML = '';
            loader[check].remove();
            item = response[0];
            if (isObject(item.result) || isArray(item.result)) {
                array_traverser_recursive(item.result, function (key, value) {
                    if ( key == 'href' || key == 'http' || key == 'https' || key == 'ssh'){
                        content[check].innerHTML += '<pre class="content"><a href="' + value + '" target= _blank>' + value + '</a></pre>';
                    }else{
                        content[check].innerHTML += '<pre class="content"><strong>'+key+':</strong> '+value+'</pre></div>';
                    }

                    infocheck[check].appendChild(content[check]);
                });
            }else{
                content[check].innerHTML += '<pre class="content">'+item.result+'</pre></div>';
                infocheck[check].appendChild(content[check]);
            }

            var msnry = new Masonry(dashboard, {
                itemSelector: '.infocheck'
            });
        });
    }
}








function array_traverser_recursive(array, callback) {

    for (let item in array) {
        if (isObject(array[item]) || isArray(array[item])) {
            array_traverser_recursive(array[item], callback);
        } else {
            callback(item, array[item]);
        }
    }
}

function isObject(obj)
{
    return obj !== undefined && obj !== null && obj.constructor == Object;
}

function isArray(array)
{
    return array !== undefined && array !== null && array.constructor == Array;
}