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) => {
            console.log(a, b);
            return b.document.createdAt - a.document.createdAt
        });
        console.log(entries);
        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" class="upload-input"> <i class="fa fa-upload"></i> Datei auswählen</label>');

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();
});