'use strict';

import DataSpace from "../ds.js";

document.addEventListener('readystatechange', async () => {
    DataSpace.printReport();
    // Show modal
    document.querySelector('.modal').classList.add('active');

    const report = await DataSpace.fetchReport(location.search.replace("?id=", ''));
    const archesJson = await DataSpace.fetchReport(
        location.search.replace("?id=", ''),
        'arches-json'
    );
    const files = DataSpace.getImagesSrc(archesJson);

    // Close modal
    document.querySelector('.modal').classList.remove('active');

    const resource = Object.assign(DataSpace.OBJECT_ORDER, report.resource);

    const shape = DataSpace.createObjectShape(resource);

    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 match...
    // TODO check if coordinates exists...
    const coordinates = resource['Object Coordinates']
        ?.replace(/^.*coordinates\':\s?\[(\d+\.\d+,\s?\d+\.\d+)\].*$/, "$1")
        ?.split(', ');

    let lat, long;
    [long, lat] = coordinates;
    
    DataSpace.createMap([lat, long]);

    // Write coordinates below map
    document.querySelector('#coord').innerHTML = `
        <span><strong>Latitude</strong>: ${lat}</span>
        <span><strong>Longitude</strong>: ${long}</span>  
    `;

    resKeys = resKeys.filter(e => !e.includes('Coordinates'));

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

    const repTable = document.querySelector('#res-before tbody');

    // TODO manage files and nested objects
    for (const key in shape.get('before-gallery')) {
        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.parentElement
            .classList.remove('d-hide');

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

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

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

    // Create after-gallery...
    let after = document.querySelector('#res-after');

    for (const key in shape.get('after-gallery')) {
        const col = document.createElement('div');
        col.className = 'column col-12';
        col.innerHTML = `
            <p class="text-bold">${key.replace(resType, '')}</p>
            <p>${report.resource[key]}</p>
        `
        after.appendChild(col);
    }
})