const electron = require('electron');
const electronConsole = electron.remote.getGlobal('console');

const LOG = require('../logger/logger.js')('index', electronConsole);

let UI = {
    DEFAULT_ALBUM_ART: '../resources/default-album-art.jpg',
    durationTimer: 0,
    durationTimerInterval: null,
}

UI.padLeft = function (s, l, c) {
    s = '' + s;
    l = l || 0;
    c = c || ' ';
    while (s.length < l) {
        s = c + s;
    }
    return s;
}

UI.secondsToTimeString = function(seconds) {
    return `${Math.floor(seconds / 60)}:${UI.padLeft(seconds % 60, 2, '0')}`;
}

UI.getElements = function() {
    let qs = (s) => { return document.querySelector(s); };
    return {
        extension: {
            status: qs('#extension-status'),
        },
        guid: qs('#current-song .guid'),
        title: qs('#current-song .title'),
        artists: qs('#current-song .artists'),
        album: {
            name: qs('#current-song .album'),
            art: qs('#current-song .art'),
        },
        duration: {
            current: qs('#current-song .duration .current'),
            total: qs('#current-song .duration .total'),
            progress: qs('#current-song .duration progress'),
        },
        recording: {
            status: qs('#recording .status'),
        },
        conversion: {
            output: qs('#conversion .output'),
        },
    };
}

UI.updateSongData = function(song) {
    let elements = UI.getElements();

    elements.guid.innerText = song.guid;
    elements.title.innerText = song.name;
    elements.artists.innerText = song.artists.join(', ');
    elements.album.name.innerText = song.album.name;
    elements.album.art.src = song.album.artFull || song.album.art || UI.DEFAULT_ALBUM_ART;
    if (song.duration) {
        elements.duration.total.innerText = UI.secondsToTimeString(song.duration);
        elements.duration.progress.max = song.duration;
    } else {
        elements.duration.total.innerText = '?';
        elements.duration.progress.max = 180;
    }
}

UI.onNewSong = function(song) {
    UI.updateSongData(song);

    let elements = UI.getElements();

    elements.duration.current.innerText = UI.secondsToTimeString(0);
}

UI.onUpdateSong = function(song) {
    UI.updateSongData(song);
}

UI.onDurationTick = function(duration) {
    let elements = UI.getElements();

    elements.duration.current.innerText = UI.secondsToTimeString(duration);
    elements.duration.progress.value = duration;
}

UI.onAdvertisement = function () {
    let elements = UI.getElements();

    elements.guid.innerText = '';
    elements.title.innerText = 'Advertisement';
    elements.artists.innerText = '';
    elements.album.name.innerText = '';
    elements.album.art.src = UI.DEFAULT_ALBUM_ART;
    elements.duration.current.innerText = '?';
    elements.duration.progress.value = 0;
    elements.duration.progress.max = 1;
    elements.duration.total.innerText = '?';
}

UI.onExtensionConnect = function() {
    let elements = UI.getElements();
    elements.extension.status.innerText = 'Connected';
}

UI.onExtensionDisconnect = function() {
    let elements = UI.getElements();
    elements.extension.status.innerText = 'Disconnected';
}

UI.init = function () {
    electron.ipcRenderer.on('new-song', (event, song) => { UI.onNewSong(song); });
    electron.ipcRenderer.on('update-song', (event, song) => { UI.onUpdateSong(song); });
    electron.ipcRenderer.on('advertisement', (event) => { UI.onAdvertisement(); });
    electron.ipcRenderer.on('duration-tick', (event, duration) => { UI.onDurationTick(duration); });

    electron.ipcRenderer.on('extension-connect', (event) => { UI.onExtensionConnect(); });
    electron.ipcRenderer.on('extension-disconnect', (event) => { UI.onExtensionDisconnect(); });
}

document.addEventListener('DOMContentLoaded', UI.init);