define(["../api"], function (api) {

    var mainContentElement = document.querySelector('.main-content');

    function replaceMainContent(elements) {
        var element = document.querySelector('.main-content');

        Velocity(element, {
            opacity: 0
        }, {
            duration: 100,
            complete: function(animatedElements) {
                // actually remove content
                mainContentElement.innerHTML = "";
                elements.forEach(function(el) {
                    // and add new one
                    mainContentElement.appendChild(el);
                });
                Velocity(element, {
                    opacity: 1
                }, {
                    duration: 70
                });
            }
        });
    }

    function renderHtml(result) {
        console.log(result);
        var box = document.createElement('div');
        box.classList.add('box');
        box.innerHTML = result;
        
        var boxTitleEl = document.createElement('div');
        boxTitleEl.classList.add('box-title');
        boxTitleEl.innerHTML = 'Wurst';
        box.appendChild(boxTitleEl);
        
        replaceMainContent([box]);
    }

    function renderEvents(result) {
        var els = [];
        var introBox = document.createElement('div');
        introBox.classList.add('box');
        introBox.innerHTML = '<div class="box-title">Aktuelle Veranstaltungen</div><div class="term text">Wintersemester 2017 / 2018 (<b>WS17/18</b>)</div>';
        els.push(introBox);
        for (var i = 0; i < result.events.length; i++) {
            var event = result.events[i];

            var eventEl = document.createElement('div');
            eventEl.classList.add('box', 'event-box');

            var eventTitleEl = document.createElement('div');
            eventTitleEl.classList.add('box-title');
            eventTitleEl.innerHTML = event.title;

            var eventDescEl = document.createElement('div');
            eventDescEl.classList.add('event-desc');
            eventDescEl.innerHTML = event.description;

            var eventRegistrationEl = document.createElement('div');
            eventRegistrationEl.classList.add('event-registration');
            eventRegistrationEl.innerHTML = event.registrationLabel;
            
            eventEl.appendChild(eventTitleEl);
            eventEl.appendChild(eventDescEl);
            eventEl.appendChild(eventRegistrationEl);
            els.push(eventEl);
        }
        replaceMainContent(els);
        // TODO: reattach handlers, load js and stuff
    }

    return {
        init: function() {
            var linkElements = document.querySelectorAll('a[async]');

            [].slice.call(linkElements).forEach((el, i) => {
                var mainElement = document.querySelector('.main-content');
                
                el.addEventListener('click', function(event) {
                    var req = el.getAttribute('href');
                    event.preventDefault();
                    var type = el.dataset.type || 'html';
                    switch(type) {
                        case 'json':
                            api.getJson(req, renderEvents);
                            break;
                        case 'html':
                        default:
                            api.getHtml(req, renderHtml);
                            break;
                    }
                });
            });
        }
    }
});