'use strict';

import {
    BASE_URL,
    fetchReport,
    printReport,
    getImageSrc
} from "../ds.js";

document.addEventListener('readystatechange', async () => {
    const report = await fetchReport(location.search.replace("?id=", ''));
    const resource = report.resource;
    const archesJson = await fetchReport(location.search.replace("?id=", ''), 'arches-json');

    // DEBUG
    const files = getImageSrc(archesJson);

    printReport();

    let resKeys = Object.keys(resource);
    // Default value...
    let resType = 'Object';
    // TODO
    if (!resKeys.length) {
        location.href = '/404.html';
        return;
    }

    resType = resKeys[0].split(' ')[0]; 
    const coordinates = resource['Coordinates'];
    resKeys = resKeys.filter(e => !e.includes('Coordinates'));

    document.querySelector('#rep-tit')
        .innerText = `${resType} ${report.displayname}`;

    const repTable = document.querySelector('#resource tbody');
    // TODO manage files and nested objects
    for (const key of resKeys) {
        const row = document.createElement('tr');
        let innerList = null;
        
        // TODO refactor
        if (typeof report.resource[key] == 'object') {
            const boolValue = '@value' in report.resource[key];
            innerList = document.createElement('ul');

            if (! boolValue) {
                for (const k in report.resource[key]) {
                    const li = document.createElement('li');
                    li.innerHTML = 
                        `<strong>${k.replace(key,'')}</strong>:
                        ${report.resource[key][k]}`;

                    if (report.resource[key][k] !== null) {
                        innerList.appendChild(li);
                    }
                }
            } else {
                innerList.innerHTML = 
                    `<li>${report.resource[key]['@value']}</li>`;
            }
        }

        // TODO Pop coordinates before traversing the object
        let value = innerList !== null ? 
            innerList.outerHTML : report.resource[key];

        if (key.includes('Images')) {
            let images = '';

            for (const src of files) {
                images += `<span style="max-width: 100px; padding: 5px">
                    <img class="img-fit-contain img-responsive" src="${src}" />
                    </span>`;
            }

            value = images;
        }

        row.innerHTML = `
            <td class="text-bold key">${key.replace(resType, '')}</td>
            <td>${value}</td>
        `;

        repTable.appendChild(row);
    }
})