var fnp = {
    defaultCoverFnp: '/resources/no-cover.png',
    defaultCoverLfm: 'https://lastfm.freetls.fastly.net/i/u/300x300/2a96cbd8b46e442fc41c2b86b821562f.png',
    watch: {
        userName: null,
        interval: 0,
    },
    ui: {
        mode: '',
    },
};

fnp.goIndex = function() {
    location.hash = '';
};
fnp.switchUser = function(userName) {
    location.hash = '#/' + encodeURIComponent((userName ?? '').toString());
};

fnp.updateHash = function() {
    var userName = decodeURIComponent(location.hash.substring(2));

    if(userName.length > 0) {
        this.watch.start(userName, function(response) {
            if(response.error) {
                this.goIndex();
                alert(response.error);
                return;
            }

            var cover = response[0].images.extralarge;
            console.log(cover);
            if(cover.length < 1 || cover === this.defaultCoverLfm)
                cover = this.defaultCoverFnp;
            console.log(cover);

            this.ui.setInfo(cover, response[0].name, response[0].artist.name, userName, response[0].nowplaying || false);
            this.ui.goUser();
        }.bind(this));
    } else {
        this.watch.stop();
        this.ui.goIndex();
        this.ui.setBackgroundFade();
    }
};

fnp.watch.start = function(userName, callback) {
    this.stop();
    this.userName = userName = (userName || '').toString();
    this.fetch(function(response) {
        if(response.error)
            this.stop();

        callback(response);
    }.bind(this));
};
fnp.watch.stop = function() {
    if(this.interval !== 0) {
        clearInterval(this.interval);
        this.interval = 0;
    }

    this.userName = null;
};
fnp.watch.fetch = function(callback) {
    if(typeof callback !== 'function')
        return;
    var xhr = new XMLHttpRequest;
    xhr.onreadystatechange = function() {
        if(xhr.readyState !== 4)
            return;
        callback(JSON.parse(xhr.responseText));
    };
    xhr.open('GET', '/get.php?u=' + encodeURIComponent(this.userName));
    xhr.send();
};

fnp.ui.setMode = function(modeName) {
    modeName = (modeName || '').toString();
    if(this.mode === modeName)
        return;
    this.mode = modeName;

    for(var i = 0; i < this.modes.length; ++i) {
        var mode = this.modes[i];
        mode.elem.classList[mode.name === modeName ? 'remove' : 'add']('hidden');
    }
};
fnp.ui.goIndex = function() {
    this.setMode('index');
};
fnp.ui.goUser = function() {
    this.setMode('user');
};

fnp.ui.setBackground = function(bgPath) {
    if(bgPath === '::fade') {
        this.setBackgroundFade();
        return;
    }

    if(this.iColourFade !== 0) {
        clearInterval(this.iColourFade);
        this.iColourFade = 0;
    }

    this.eBg.style.backgroundColor = null;
    this.eBg.style.backgroundImage = 'url(\'' + (bgPath || '').toString() + '\')';
};
fnp.ui.setBackgroundFade = function() {
    if(this.iColourFade !== 0)
        return;

    this.eBg.style.backgroundImage = null;

    var fader = function() {
        var colour = Math.floor(Math.random() * 0xFFFFFF).toString(16);

        if(colour.length !== 6 && colour.length !== 3)
            colour = '000000'.substring(colour.length) + colour;

        this.eBg.style.backgroundColor = '#' + colour;
    }.bind(this);

    this.iColourFade = setInterval(fader, 2000);
    fader();
};

fnp.ui.setInfo = function(cover, title, artist, user, now) {
    this.setBackground(cover);
    this.eInfoCover.style.backgroundImage = 'url(\'' + (cover || '').toString() + '\')';
    this.eInfoTitle.textContent = (title || '').toString();
    this.eInfoArtist.textContent = (artist || '').toString();
    this.eInfoUser.textContent = (user || '').toString();
    this.eInfoFlags.innerHTML = '';

    if(now) {
        var nowIcon = document.createElement('span');
        nowIcon.className = 'fa fa-music';
        nowIcon.title = 'Now playing';
        this.eInfoFlags.appendChild(nowIcon);
    }
};

window.onload = function() {
    fnp.ui.eIndex = document.getElementById('index');
    fnp.ui.eUser = document.getElementById('user');
    fnp.ui.eBg = document.getElementById('background');
    fnp.ui.eFormUser = document.getElementById('username');
    fnp.ui.eFormSend = document.getElementById('submit');
    fnp.ui.eInfoCover = document.getElementById('np_cover');
    fnp.ui.eInfoTitle = document.getElementById('np_title');
    fnp.ui.eInfoArtist = document.getElementById('np_artist');
    fnp.ui.eInfoUser = document.getElementById('np_user');
    fnp.ui.eInfoBack = document.getElementById('np_back');
    fnp.ui.eInfoFlags = document.getElementById('np_flags');
    fnp.ui.iColourFade = 0;
    fnp.ui.modes = [
        { name: 'index', elem: fnp.ui.eIndex },
        { name: 'user',  elem: fnp.ui.eUser },
    ];

    fnp.ui.eInfoBack.onclick = function() {
        fnp.goIndex();
    };

    window.onhashchange = function() {
        fnp.updateHash();
    };

    fnp.ui.eFormSend.onclick = function() {
        fnp.switchUser(fnp.ui.eFormUser.value);
    };

    fnp.ui.eFormUser.onkeydown = function(ev) {
        if(typeof ev.key === 'undefined')
            ev.key = ev.keyCode === 13 ? 'Enter' : '?';

        if(ev.key === 'Enter' || ev.key === 'NumpadEnter')
            fnp.switchUser(fnp.ui.eFormUser.value);
    };

    fnp.updateHash();
};