function create(type){
    return document.createElement(type);
}

function getTags(){
    const params = query();
    return params.get('tags');
}

async function handleData(response){
    if (response.ok){
        var json = await response.json();
        var tags = getTags();
        if (!tags) showcase(json);
        var list = tag('eventlist');
        for (var event of json){
            var div = create('div');
            div.innerHTML = event.description;
            div.setAttribute('class','event');
            if (event.attachments){
                for (var attachment of event.attachments){
                    if (attachment.mime.startsWith('image')){
                        var img = create('img');
                        img.src = attachment.url;
                        div.prepend(img);
                        break;
                    }
                }
            }
            if (event.start){
                var span = create('span');
                span.setAttribute('class','start');
                var loc = event.location;
                var pos = loc.indexOf(',');
                if (pos>0) loc = loc.substring(0,pos);
                span.innerHTML = event.start + ' @ '+ loc + '<br/>';
                div.prepend(span);
            }
            var h4 = create('h4');
            h4.innerHTML = event.url ? `<a href="${event.url}" target="_blank">${event.title}</a>` : event.title;
            div.prepend(h4);
            eventlist.appendChild(div);
        }
    }
}

function hide(id){
    console.log({hide:id});
    var elem = tag(id);
    if (elem) elem.style.display = 'none';
}

function load(){
    var hash = window.location.hash;
    if (hash) {
        if (hash.startsWith('#')) hash = hash.substring(1);
        hide('showcase');
        hide('eventlist');
        show(hash);
    }
    var tags = getTags();
    if (!tags) {
        tags = 'schwarzesjena';
    } else {
        hide('showcase');
        tag('eventlist').innerHTML = `<h3>Events: ${tags}</h3>`;
        tag('eventlist').innerHTML += `Die folgenden Events in <a href="https://cal.srsoftware.de?tags=${tags}" target="_blank">OpenCloudCal</a> sind mit ${tags} markiert:`;
    }
    fetch('https://cal.srsoftware.de/api/events/json?tags='+tags).then(handleData);
}

function request(subject){
    if (subject == 'calendar') subject = 'Kannst du dir vorstellen den Kalender meiner Website [eintragen] in OpenCloudCal zu abonnieren?';
    if (subject == 'integration') subject = 'Wir könnten uns vorstellen, OpenCloudCal auf unserer Seite [eintragen] einzubinden. Kannst du uns da unterstützen?'
    let domain = 'srsoftware.de';
    var crash = ['s','richter','terry pratchett','srsoftware','de']
    let bang = crash.join('.').replace('.terry pratchett.','@');
    let boom = ['mai','lto:',bang,'?sub','ject','=Vorschlag für Kalender-Anbindung&bo',"dy=Hallo Stephan, hier ist [Name] von [Veranstalter]!%0A%0A",subject]
    var done = boom.join('');
    window.location.href=done;
}

function query(){
    return new URLSearchParams(location.search);
}

function show(id){
    console.log({show:id});
    var elem = tag(id);
    if (elem) elem.style.display = '';
}

function showcase(json){
    var div = tag('showcase');
    for (var event of json){
        if (event.attachments){
            for (var attachment of event.attachments){
                if (attachment.mime.startsWith('image')){
                    var img = create('img');
                    img.src = attachment.url;
                    if (event.url){
                        var a = create('a');
                        a.href = event.url;
                        a.target = '_blank';
                        a.appendChild(img);
                        div.appendChild(a);
                    } else div.appendChild(img);
                    break;
                }
            }
        }
    }
}

function tag(id){
    return document.getElementById(id);
}