/**
 * map info dialog
 */

define([
    'jquery',
    'app/util',
    'bootbox'
], function($, Util, bootbox) {

    'use strict';

    var config = {
        // global dialog
        dialogNavigationClass: 'pf-dialog-navigation-list',                     // class for dialog navigation bar
        dialogNavigationListItemClass: 'pf-dialog-navigation-list-item',        // class for map manual li main navigation elements

        // map info dialog
        mapInfoId: 'pf-map-info',                                               // id for map info
        mapInfoSystemsId: 'pf-map-info-systems',                                // id for map info systems box
        mapInfoConnectionsId: 'pf-map-info-connections',                        // id for map info connections box
        mapInfoTableClass: 'pf-map-info-table',                                 // class for data

        loadingOptions: {                                                       // config for loading overlay
            icon: {
                size: 'fa-2x'
            }
        }
    };

    /**
     * loads the map info data into an element
     * @param mapData
     */
    $.fn.loadMapInfoData = function(mapData){

        var mapElement = $(this);

        mapElement.empty();

        mapElement.showLoadingAnimation(config.loadingOptions);

        var countSystems = mapData.data.systems.length;
        var countConnections = mapData.data.connections.length;


        var dlElementLeft = $('<dl>', {
            class: 'dl-horizontal',
            css: {'float': 'left'}
        }).append(
                $('<dt>').text( 'Icon' )
            ).append(
                $('<dd>').append(
                    $('<i>', {
                        class: ['fa', 'fa-fw', mapData.config.icon].join(' ')
                    })
                )
            ).append(
                $('<dt>').text( 'Name' )
            ).append(
                $('<dd>').text( mapData.config.name )
            ).append(
                $('<dt>').text( 'Type' )
            ).append(
                $('<dd>', {
                    class: Util.getInfoForMap( mapData.config.type, 'class')
                }).text( Util.getInfoForMap( mapData.config.type, 'label') )
            );

        mapElement.append(dlElementLeft);

        var dlElementRight = $('<dl>', {
            class: 'dl-horizontal',
            css: {'float': 'right'}
        }).append(
                $('<dt>').text( 'Systems' )
            ).append(
                $('<dd>').text( countSystems )
            ).append(
                $('<dt>').text( 'Connections' )
            ).append(
                $('<dd>').text( countConnections )
            );

        mapElement.append(dlElementRight);


        mapElement.hideLoadingAnimation();

    };

    /**
     * loads the system info table into an element
     * @param mapData
     */
    $.fn.loadSystemInfoTable = function(mapData){

        var systemsElement = $(this);

        systemsElement.empty();

        var systemTable = $('<table>', {
            class: ['compact', 'stripe', 'order-column', 'row-border', config.mapInfoTableClass].join(' ')
        });
        systemsElement.append(systemTable);

        systemsElement.showLoadingAnimation(config.loadingOptions);


        // prepare data for dataTables
        var systemsData = [];
        for(var i = 0; i < mapData.data.systems.length; i++){
            var tempSystemData = mapData.data.systems[i];

            var tempData = [];

            // current position
            if(tempSystemData.currentUser === true){
                tempData.push( '<i class="fa fa fa-map-marker fa-lg fa-fw"></i>' );
            }else{
                tempData.push( '' );
            }

            // active pilots
            if(tempSystemData.userCount > 0){
                tempData.push(tempSystemData.userCount);
            }else{
                tempData.push( '' );
            }

            // type
            tempData.push(tempSystemData.type);

            // name
            tempData.push( tempSystemData.name );

            // alias
            if( tempSystemData.name !== tempSystemData.alias){
                tempData.push( tempSystemData.alias );
            }else{
                tempData.push( '' );
            }

            // status
            var systemStatusClass = Util.getStatusInfoForSystem(tempSystemData.status, 'class');
            if(systemStatusClass !== ''){
                tempData.push( '<i class="fa fa fa-square-o fa-lg fa-fw ' + systemStatusClass + '"></i>' );
            }else{
                tempData.push( '' );
            }

            // effect
            var systemEffectClass = Util.getEffectInfoForSystem(tempSystemData.effect, 'class');
            if(systemEffectClass !== ''){
                tempData.push( '<i class="fa fa fa-square fa-lg fa-fw ' + systemEffectClass + '"></i>' );
            }else{
                tempData.push( '' );
            }

            // trueSec
            var systemTrueSecClass = Util.getTrueSecClassForSystem(tempSystemData.trueSec);
            if(systemTrueSecClass !== ''){
                tempData.push( '<span class="' + systemTrueSecClass + '">' + tempSystemData.trueSec.toFixed(1) + '</span>' );
            }else{
                tempData.push( '' );
            }

            // locked
            if(tempSystemData.locked === true){
                tempData.push( '<i class="fa fa-lock fa-lg fa-fw"></i>' );
            }else{
                tempData.push( '' );
            }

            // rally point
            if(tempSystemData.rally === true){
                tempData.push( '<i class="fa fa-users fa-lg fa-fw"></i>' );
            }else{
                tempData.push( '' );
            }

            systemsData.push(tempData);
        }

        var systemsDataTable = systemTable.dataTable( {
            paging: false,
            ordering: true,
            order: [ 0, 'desc' ],
            autoWidth: false,
            hover: false,
            data: systemsData,
            columnDefs: [],
            language: {
                emptyTable:  'Map is empty',
                zeroRecords: 'No systems found',
                lengthMenu:  'Show _MENU_ systems',
                info:        'Showing _START_ to _END_ of _TOTAL_ systems'
            },
            columns: [
                {
                    title: '<i class="fa fa fa-map-marker fa-lg"></i>',
                    width: '15px',
                    searchable: false
                },{
                    title: '<i class="fa fa fa-plane fa-lg"></i>',
                    width: '18px',
                    searchable: false
                },{
                    title: 'type',
                    width: '50px'
                },{
                    title: 'system',
                    width: '50px'
                },{
                    title: 'alias'
                },{
                    title: 'status',
                    width: '30px',
                    class: 'text-center',
                    orderable: false,
                    searchable: false
                },{
                    title: 'effect',
                    width: '30px',
                    class: 'text-center',
                    orderable: false,
                    searchable: false
                },{
                    title: 'sec.',
                    width: '20px',
                    class: 'text-center',
                    orderable: false,
                    searchable: false
                },{
                    title: '<i class="fa fa-lock fa-lg fa-fw"></i>',
                    width: '30px',
                    class: 'text-center',
                    searchable: false
                },{
                    title: '<i class="fa fa-users fa-lg fa-fw"></i>',
                    width: '30px',
                    className: 'text-center',
                    searchable: false
                }
            ]
        });

        systemsElement.hideLoadingAnimation();

    };

    /**
     * loads the connection info table into an element
     * @param mapData
     */
    $.fn.loadConnectionInfoTable = function(mapData){
        var connectionsElement = $(this);

        connectionsElement.empty();

        var connectionTable = $('<table>', {
            class: ['compact', 'stripe', 'order-column', 'row-border', config.mapInfoTableClass].join(' ')
        });
        connectionsElement.append(connectionTable);

        connectionsElement.showLoadingAnimation(config.loadingOptions);

        // connections table ==================================================

        // prepare data for dataTables
        var connectionData = [];
        for(var j = 0; j < mapData.data.connections.length; j++){
            var tempConnectionData = mapData.data.connections[j];

            var tempConData = [];

            tempConData.push( Util.getScopeInfoForMap( tempConnectionData.scope, 'label') );

            // source system name
            tempConData.push( tempConnectionData.sourceName );

            // connection
            var connectionClasses = [];
            for(var k = 0; k < tempConnectionData.type.length; k++){
                connectionClasses.push( Util.getConnectionInfo( tempConnectionData.type[k], 'cssClass') );

            }

            connectionClasses = connectionClasses.join(' ');

            tempConData.push( '<div class="pf-fake-connection ' + connectionClasses + '"></div>' );


            tempConData.push( tempConnectionData.targetName );

            connectionData.push(tempConData);
        }

        var connectionDataTable = connectionTable.dataTable( {
            paging: false,
            ordering: true,
            order: [ 0, 'desc' ],
            autoWidth: false,
            hover: false,
            data: connectionData,
            columnDefs: [],
            language: {
                emptyTable:  'No connections',
                zeroRecords: 'No connections found',
                lengthMenu:  'Show _MENU_ connections',
                info:        'Showing _START_ to _END_ of _TOTAL_ connections'
            },
            columns: [
                {
                    title: 'scope',
                    width: '50px',
                    orderable: false
                },{
                    title: 'source system'
                },{
                    title: 'connection',
                    width: '80px',
                    class: 'text-center',
                    orderable: false,
                    searchable: false
                },{
                    title: 'target system'
                }
            ]
        });


        connectionsElement.hideLoadingAnimation();
    };

    /**
     * shows the map information modal dialog
     */
    var showDialog = function(){

        var activeMap = Util.getMapModule().getActiveMap();
        var mapData = activeMap.getMapData(true);

        if(mapData !== false){
            requirejs(['text!templates/modules/map_info_dialog.html', 'mustache'], function(template, Mustache) {

                var data = {
                    dialogNavigationClass: config.dialogNavigationClass,
                    dialogNavLiClass: config.dialogNavigationListItemClass,
                    mapInfoId: config.mapInfoId,
                    mapInfoSystemsId: config.mapInfoSystemsId,
                    mapInfoConnectionsId: config.mapInfoConnectionsId
                };

                var content = Mustache.render(template, data);



                var mapInfoDialog = bootbox.dialog({
                    title: 'Map information',
                    message: content,
                    buttons: {
                        success: {
                            label: 'close',
                            className: 'btn-primary',
                            callback: function() {
                                $(mapInfoDialog).modal('hide');
                            }
                        }
                    }
                });

                mapInfoDialog.on('shown.bs.modal', function(e) {
                    // modal on open

                    var mapElement = $('#' + config.mapInfoId);
                    var systemsElement = $('#' + config.mapInfoSystemsId);
                    var connectionsElement = $('#' + config.mapInfoConnectionsId);

                    // set navigation button observer
                    var mainNavigationLinks = $('.' + config.dialogNavigationClass).find('a');
                    mainNavigationLinks.on('click', function(){
                        var menuAction = $(this).attr('data-action');

                        if(menuAction === 'refresh'){
                            // get new map data
                            var mapData = activeMap.getMapData(true);

                            mapElement.loadMapInfoData(mapData);
                            systemsElement.loadSystemInfoTable(mapData);
                            connectionsElement.loadConnectionInfoTable(mapData);
                        }
                    });

                    // load map data
                    mapElement.loadMapInfoData(mapData);

                    // load system table
                    systemsElement.loadSystemInfoTable(mapData);

                    // load connection table
                    connectionsElement.loadConnectionInfoTable(mapData);
                });

            });
        }

    };



    return {
        showDialog: showDialog
    };
});