'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]; 
    // TODO use coordinates for map
    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>`;
            }
        }

        let value = innerList !== null ? 
            innerList.outerHTML : report.resource[key];

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

        if (!key.includes('Images') && !key.includes('Photos')) {
            repTable.appendChild(row);
        }
    }

    if (files.length) {
        // Create image gallery
        // TODO refactor...
        let gallery = document.querySelector('#gallery');
        gallery.classList.remove('d-hide');

        for (const src of files) {
            const img = document.createElement('img');
            img.className = 'img-responsive img-fit-contain';
            img.src = src;

            const col = document.createElement('div');
            col.className = 'column col-4 c-hand spotlight';
            col.setAttribute('data-src', src);
            col.setAttribute('data-download', true);

            col.appendChild(img);
            gallery.appendChild(col);
        }
    }
})