const ContractOverview = {
    route : 'contract/overview/:groupId',
    templateUrl : 'js/app/views/contract/contract-overview.html',
    navigatioData : null,
    redirectUrl : 'auth/login',

    canAccess : function()
    {
        return this.app.user.isLoggedIn();
    },

    create : function( p )
    {
        this.container = this.app.UI.getContentContainer();
        const $container = $( this.container ),
            app = this.app,
            members = [],
            apps = [];

        this.render();

        this.app.rpc.call(
            'Contract',
            'getOverview',
            {
                teamId : p.get( 'groupId' )
            },
            function( res )
            {
                let stats = ( res && res.hasOwnProperty( 'data' ) && res.data.hasOwnProperty( 'stats' ) ) ? res.data.stats : null;

                if ( stats )
                {
                    $container.find( '[f-id="span-stat-running-contracts"]' ).html( stats.num_contracts_open );
                    $container.find( '[f-id="span-stat-appointments-to-charge"]' ).html( stats.num_appointments_to_charge );
                    $container.find( '[f-id="span-stat-open-payments"]' ).html( ( +stats.open_payments / 100 ).toFixed( 2 ).replace( '.', ',') );

                    $container.find( '.sk-loading' ).toggleClass( 'sk-loading' );

                    let labels = [],
                        numCreated = [],
                        numExpired = [],
                        numBegun = [],
                        gd = stats.last_30_days;

                    for ( let si = 0; si < gd.length; si++ )
                    {
                        labels.push( moment( gd[ si ].day, 'YYYY-MM-DD' ).format( 'D.M.' ) );
                        numCreated.push( gd[ si ].num_created );
                        numExpired.push( gd[ si ].num_expired );
                        numBegun.push( gd[ si ].num_begun );
                    }

                    var lineData = {
                        labels: labels,
                        datasets: [

                            {
                                label: "Erstellt",
                                backgroundColor: 'rgba(26,179,148,0.5)',
                                borderColor: "rgba(26,179,148,0.7)",
                                pointBackgroundColor: "rgba(26,179,148,1)",
                                pointBorderColor: "#fff",
                                data: numCreated
                            },
                            {
                                label: "Angefangen",
                                backgroundColor: 'rgba(220, 220, 220, 0.5)',
                                pointBorderColor: "#fff",
                                data: numBegun
                            },
                            {
                                label: "Ausgelaufen",
                                backgroundColor: 'rgba(237,85,101,0.5)',
                                borderColor: "rgba(237,85,101,0.7)",
                                pointBackgroundColor: "rgba(237,85,101,1)",
                                pointBorderColor: "#fff",
                                data: numExpired
                            }
                        ]
                    };

                    var lineOptions = {
                        responsive: true
                    };


                    //var ctx = document.getElementById("lineChart").getContext("2d");
                    const ctx = $container.find( '[data-id="canvas-chart-contract-activity"]' ).first().get( 0 ).getContext( "2d" );
                    new Chart(
                        ctx,
                        {
                            type: 'line',
                            data: lineData,
                            options:lineOptions
                        }
                    );
                }
                else
                {
                    app.UI.toastError( 'Übersichtsdaten konnten nicht geladen werden.' );
                }

            }.bind ( this )
        );
    },

    destroy : function()
    {

    }
};

export { ContractOverview };