var panopticon;

class Panopticon {
    constructor() {
        console.log( "Init panopticon" );
        this.hugveys = new Vue( {
            el: "#status",
            data: {
                uptime: 0,
                languages: [],
                hugveys: []
            },
            methods: {
                time_passed: function (hugvey, property) {
                    console.log("property!", Date(hugvey[property] * 1000));
                  return moment(Date(hugvey[property] * 1000)).fromNow();
                }
            }
        } );


        this.socket = new ReconnectingWebSocket( "ws://localhost:8888/ws", null, { debug: true, reconnectInterval: 3000 } );


        this.socket.addEventListener( 'open', ( e ) => {
            this.send( { action: 'init' } );
        } );

        this.socket.addEventListener( 'close', function( e ) {
            console.log( 'Closed connection' );
        } );
        this.socket.addEventListener( 'message', ( e ) => {
            let msg = JSON.parse( e.data );
            if ( typeof msg['alert'] !== 'undefined' ) {
                alert(msg['alert']);
            }
            
            if ( typeof msg['action'] === 'undefined' ) {
                console.error( "not a valid message: " + e.data );
                return;
            }

            switch ( msg['action'] ) {
            
                case 'status':
                    this.hugveys.uptime = this.stringToHHMMSS(msg['uptime']);
                    this.hugveys.languages = msg['languages'];
                    this.hugveys.hugveys = msg['hugveys'];
                    break;
            }
        } );
    }

    send( msg ) {
        this.socket.send( JSON.stringify( msg ) );
    }

    getStatus() {
//        console.log('get status', this, panopticon);
        panopticon.send( { action: 'get_status' } );
    }

    init() {
        setInterval( this.getStatus, 3000 );
    }
    
    stringToHHMMSS (string) {
        var sec_num = parseInt(string, 10); // don't forget the second param
        var hours   = Math.floor(sec_num / 3600);
        var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
        var seconds = sec_num - (hours * 3600) - (minutes * 60);

        if (hours   < 10) {hours   = "0"+hours;}
        if (minutes < 10) {minutes = "0"+minutes;}
        if (seconds < 10) {seconds = "0"+seconds;}
        return hours+':'+minutes+':'+seconds;
    }
    
    
    loadNarrative(code, file) {
        
    }

    resume(hv_id) {
        this.send({ action: 'resume', hugvey: hv_id })
    }
    pause(hv_id) {
        this.send({ action: 'play', hugvey: hv_id })
    }
    restart(hv_id) {
        this.send({ action: 'restart', hugvey: hv_id })
    }
}



window.addEventListener( 'load', function() {
    panopticon = new Panopticon();
    panopticon.init();
})