const modalSave = new tingle.modal({
    footer: true,

});
modalSave.setContent('<h3>Dokument speichern</h3><input type="text" id="saveName" placeholder="Bitte gib den Namen des Dokuments ein">');
modalSave.addFooterBtn('Schließen', 'btn', () => {
    document.getElementById('saveName').value = "";
    modalSave.close();
});
modalSave.addFooterBtn('Speichern', 'btn', () => {
    const input = document.getElementById('saveName');
    const name = input.value;

    if(name.trim().length > 0) {
        documents[activeDocument].name = name;
        saveToLocalStorage();
        modalSave.close();
    } else {

    }
});

const modalOpen = new tingle.modal({
    beforeOpen: () => {
        const entries = getLocalStorageEntries().sort((a, b) => {
            return b.document.createdAt - a.document.createdAt
        });
        let html = '<h3>Gespeicherte Dokumente</h3><ul class="file-list">';
        entries.forEach(entry => html += `<li class="file-list-item" data-id="${entry.document.id}">${entry.document.name} (${new Date(entry.document.createdAt).toLocaleString()})</li>`);
        html += '</ul>';
        modalOpen.setContent(html);

        for(let element of document.getElementsByClassName('file-list-item')) {
            element.addEventListener('click', () => {
                const entry = entries.find(entry => entry.document.id === element.getAttribute('data-id'));
                addDocument(entry.document);
                switchDocument(entry.document);
                modalOpen.close();
            });
        }
    },
});

const modalExport = new tingle.modal({
    footer: true,
    beforeOpen: () => {
        const el = document.getElementById('previewImage');
        el.src = canvas.toDataURL('image/png');
    }
});
modalExport.setContent('<h3>Dokument exportieren</h3><img src="" id="previewImage">');
modalExport.addFooterBtn('Download .png', 'btn', () => {
    exportToImageFile();
    modalExport.close();
});
modalExport.addFooterBtn('Download .svg', 'btn', () => {

});
modalExport.addFooterBtn('Download .fsm', 'btn', () => {
    exportToFile();
    modalExport.close();
});

const modalImport = new tingle.modal({
    footer: true,
});
modalImport.setContent('<h3>Dokument importieren</h3><label for="importUpload" class="btn upload-btn"><input type="file" accept=".fsm" class="upload-input" id="importUpload"> <i class="fa fa-upload"></i> Datei auswählen</label>');
modalImport.addFooterBtn('Laden', 'btn', () => {
    const el = document.getElementById('importUpload');
    const file = el.files[0];

    if(file) {
        const reader = new FileReader();
        // TODO: Check for file type etc.
        reader.readAsText(file, 'UTF-8');
        reader.onload = (evt) => {
            const json = evt.target.result;
            // TODO: Add error handling
            importFromJson(json);
            modalImport.close();
        };
        reader.onerror = (evt) => {
            alert('Ein Fehler beim Einlesen der Datei ist aufgetreten. Womöglich muss hier ein Bug behoben werden... :(');
            modalImport.close();
        }
    }
});

document.getElementById('saveBtn').addEventListener('click', () => {
    if(activeDocument === null) {
        return;
    }

    if(documents[activeDocument].name !== null) {
        saveToLocalStorage();
    } else {
        modalSave.open();
    }
});

document.getElementById('openBtn').addEventListener('click', () => {
    modalOpen.open();
});

document.getElementById('importBtn').addEventListener('click', () => {
    modalImport.open();
});

document.getElementById('exportBtn').addEventListener('click', () => {
    modalExport.open();
});