/*
 * Handle mappings
 * Mappings are stored in local storage as a Map (key: directory)
 */

let statusLine = document.getElementById('status');

// these can not be mapped by the user
const reservedMappings = ["u", "s"];

/*
 * Load mappings, create a table showing them with a "remove" button each
 */
function renderMappings() {
    console.log(localStorage.getItem('mappings'));
    const mappings = new Map(JSON.parse(localStorage.getItem('mappings')) || []);
    console.log(typeof mappings);
    const tbody = document.querySelector('#mappingTable tbody');
    tbody.innerHTML = ''; // clear table body
    mappings.forEach((directory, key) => {
        const row = document.createElement('tr');
        const keyCell = document.createElement('td');
        const directoryCell = document.createElement('td');

        keyCell.innerHTML = `<span class="key">${key}</span>`;
        directoryCell.innerHTML = `<span class="path">${directory}</span>`;

        row.appendChild(keyCell);
        row.appendChild(directoryCell);
        // remove mapping button
        const removeCell = document.createElement('td');
        const removeButton = document.createElement('button');
        removeButton.textContent = 'Remove';
        removeButton.onclick = function() {
            removeMapping(key);
        };
        removeCell.appendChild(removeButton);
        row.appendChild(removeCell)
        tbody.appendChild(row);
    });
}

function removeMapping(key) {
    let mappings = new Map(JSON.parse(localStorage.getItem('mappings')) || []);
    if (!mappings.has(key)) {
        statusLine.innerHTML = `Can not remove mapping '${key}', it does not exist`;
        return;
    }
    statusLine.innerHTML = `Removed mapping '${key}'`;
    mappings.delete(key);
    localStorage.setItem('mappings', JSON.stringify(Array.from(mappings.entries())));
    renderMappings();
}

function addMapping(key, directory) {
    if (reservedMappings.includes(key)) {
        statusLine.innerHTML = `'${key}' is reserved and can not be mapped`;
        return;
    }
    let mappings = new Map(JSON.parse(localStorage.getItem('mappings')) || []);
    statusLine.innerHTML = (mappings.has(key) ? "Changed" : "Added") + ` mapping '${key}' - '${directory}'`;
    mappings.set(key, directory);
    localStorage.setItem('mappings', JSON.stringify(Array.from(mappings.entries())));
    renderMappings();
}

// event listener for add mapping form
document.getElementById('addMappingForm').addEventListener('submit', function(event) {
    event.preventDefault();
    const key = document.getElementById('key').value;
    const directory = document.getElementById('directory').value;

    addMapping(key, directory);

    // clear input
    document.getElementById('key').value = '';
    document.getElementById('directory').value = '';
});

// load existing mappings on page load
window.onload = function() {
    renderMappings();
};