
// var notifications = { count:0, items:[] } ;

/** @constant {number} */
const NOTIFICATION_DEFAULT = 2 ;

/** @constant {number} */
const NOTIFICATION_ALERT = 8 ;

/** @constant {number} */
const NOTIFICATION_COMM = 16 ;


class NotificationPanel{
    constructor(){
        this.items = [] ;
        this.styles = {
            2: "navigation" ,
            8: "alert" ,
            16: "comms"
        } ;
        this.debug = location.hostname == 'localhost' ;
    }

    get nextID() {
        return this.items.length + 1 ;
    }

    /**
     * Creates, stores and presents a new notification
     * @constructor
     * @param {NotificationTypes} style - NOTIFICATION_DEFAULT, NOTIFICATION_ALERT or NOTIFICATION_COMM.
     * @param {string} name - Unique name for this notification.  Used to avoid duplicating, finding, destroying.
     * @param {string} icon - Specify the location and file name to use instead of the style's default.
     * @param {string} redirect - URL to redirect the agent when the 'open' action is used.
     * @param {boolean} force - Force a duplicate of this notification even if it already exists
     */
    new( style, content, name, icon='', redirect='', force=false ) {
        // Fall back to a default style if no valid style is provided
        if ( !(style in this.styles) ) {
            style = NOTIFICATION_DEFAULT ;
        }

        // Don't duplicate unless we're being forced to
        if( !force && this.find( name ) ) {
            console.log("Notification of name '" + name + "' has already been created.  " +
                "If you wish to duplicate, use the \'force\' option." );
            return ;
        }

        // Build the notification, attach it, and present it
        var notification = new Notification( content, name, icon, redirect);
        notification.id = this.nextID;
        notification.style = style ;

        // Attach to the notification array
        this.items[ notification.id ] = notification ;

        // Present to the user
        this.present( notification );

    }

    present( notification ) {
        if( !notification instanceof Object || !notification instanceof Notification ) {
            return false ;
        }

        if( typeof notification.html === "function" ) {
            var npanel = $('#notifications') ;
            npanel.append(notification.html());
        }
    }

    find( name ) {
        for( var i in this.items ) {
            var item = this.items[ i ] ;
            if( item instanceof Notification && item.name === name ) {
                return item ;
            }
        }
        return false ;
    }

    destroy( name ) {
        for( var i in this.items ) {
            var item = this.items[ i ] ;
            if( item instanceof Notification && item.name === name ) {
                this.items.splice( i, 1 ) ;
                // Remove from the HTML panel, if it exists
                var npanel = $('#notifications') ;
                npanel.find( "[data-notification-name='" + name + "']").fadeOut() ;
            }
        }
    }

}

class Notification{

    constructor( content, name, icon = '', redirect = '' ) {
        this.id = null ; // set by the creation method of the notifications collection
        this.content = content ;
        this.name = name ;
        this.icon = icon ;
        this.redirect = redirect ;
        this.actions = { ok: true, open: (redirect.length > 0) } ;
        this.style = NOTIFICATION_DEFAULT ;
    }

    html() {
        var html = '\n\t\t\t<div data-redirect="' + this.redirect + '" ' +
            'data-notification-name="' + this.name + '" ' +
            'data-notification-id="' + this.id + '" ' +
            'class="panel ' + notificationPanel.styles[ this.style ] + '" '
            ;
        if ( this.icon.length > 0 ) {
            html += 'style="background-image:url(\'' + this.icon + '\');" ' ;
        }

        html += '>\n';

        if ( this.actions.ok || this.actions.open ) {
            html += '\t\t\t\t<form>\n';
            if ( this.actions.ok ) {
                html += '\t\t\t\t\t<input type="button" value="OK" data-value="OK">\n';
            }
            if ( this.actions.open ) {
                html += '\t\t\t\t\t<input type="button" value="Open" data-value="Open">\n';
            }
            html += '\t\t\t\t</form>\n';
        }
        html += '\t\t\t\t' + this.content + '\n\t\t\t</div>';
        return html ;
    }
}

/*class Alert extends Notification {
    constructor( content, name, icon, redirect ){
        super( content, name, icon, redirect ) ;
        this.style = 'alert' ;
    }
}

class Comm extends Notification {
    constructor( content, name, icon, redirect ){
        super( content, name, icon, redirect ) ;
        this.style = 'comms' ;
    }
}*/

/*function notification( content, style, name, icon=null, showOK=true, showOpen=false, redirect=null ){
    this.content = content ;
    this.style = style ;
    this.name = name ;
    this.icon = icon ;
    this.actions = { ok: showOK, open: showOpen } ;
    this.redirect = redirect ;

    this.html = function() {
        var html = '\n\t\t\t<div data-redirect="\' + redirect + \'" data-notification-id="' + notifications.count + '" class="panel ' + style + '">\n';
        if ( this.actions.ok || this.actions.open ) {
            html += '\t\t\t\t<form>\n';
            if (showOK) {
                html += '\t\t\t\t\t<input type="button" value="OK" data-value="OK">\n';
            }
            if (showOpen) {
                html += '\t\t\t\t\t<input type="button" value="Open" data-value="Open">\n';
            }
            html += '\t\t\t\t</form>\n';
        }
        html += '\t\t\t\t' + content + '\n\t\t\t</div>';
        return html ;
    }
}

function createNotification( content, style, name, icon=null, showOK=true, showOpen=false, redirect=null ) {
    notifications.count ++ ;

    var npanel = $('#notifications') ;
    var html = '\n\t\t\t<div data-redirect="\' + redirect + \'" data-notification-id="' + notifications.count + '" class="panel ' + style + '">\n' ;
    if( showOK || showOpen ) {
        html += '\t\t\t\t<form>\n' ;
        if ( showOK ) {
            html += '\t\t\t\t\t<input type="button" value="OK" data-value="OK">\n';
        }
        if ( showOpen ) {
            html += '\t\t\t\t\t<input type="button" value="Open" data-value="Open">\n';
        }
        html += '\t\t\t\t</form>\n' ;
    }
    html += '\t\t\t\t' + content + '\n\t\t\t</div>' ;

    npanel.append( html ) ;

    var item = {} ;
    item.id = notifications.count ;
    item.name = name ;

    notifications.items.push( item ) ;
}
*/
$(function(){
    $('#notifications').on( 'click' , 'input', function(){
        switch( $(this).data( 'value' ) ) {
            case "OK":
                $(this).closest( '.panel' ).fadeOut() ;
                break;
            case "Open":
                window.location = $(this).closest( '.panel' ).data( 'redirect' ) ;
                break;
        }
    }) ;
});

const notificationPanel = new NotificationPanel() ;