const ContractDataTable = {
    templateUrl : 'js/app/components/contract/contract-data-table.html',
    create : function( params )
    {
        var app = this.app,
            self = this,
            groupId = params.get( 'groupId' ),
            filter = params.get( 'filter' ),
            $container = $( this.container );

        this.render(
            {
                contracts: params.get( 'contracts' ),
                activeGroup : groupId,
                filter : filter
            }
        );

        $container.find( '.datatable' ).DataTable( {
            pageLength: 50,
            responsive: true,
            dom: '<"html5buttons"B>lTfgitp',
            columnDefs : [
                {
                    "targets" : [ 2 ],
                    "visible" : false,
                    "searchable" : true
                }
            ],
            language : {
                search      : 'Suche',
                emptyTable  : 'Keine Einträge vorhanden.',
                zeroRecords : 'Keine Einträge vorhanden.',
                info        : 'Zeige _START_ bis _END_ von _TOTAL_ Einträgen',
                lengthMenu : 'Zeige _MENU_ Einträge',
                paginate : {
                    first : 'Erste',
                    previous : 'Vorherige',
                    next : 'Nächste',
                    last : 'Letzte'
                },
            },
            order : filter === 'claim' ? [[ 9, "desc" ], [ 10, "asc" ] ] : [ [ 1, "desc" ] ],
            buttons: [
                { extend: 'copy'},
                {extend: 'csv'},
                {extend: 'excel', title: 'Termine'},
                {extend: 'pdf', title: 'Termine'},

                {extend: 'print',
                    customize: function (win){
                        $(win.document.body).addClass('white-bg');
                        $(win.document.body).css('font-size', '10px');

                        $(win.document.body).find('table')
                            .addClass('compact')
                            .css('font-size', 'inherit');
                    }
                }
            ]
        });

        $container.on( 'click', 'tr[data-type="contract"]', function()
        {
            $( this ).toggleClass( 'tr-selected' );
        });

        $container.on( 'click', '[data-type="btn-edit-contract"]', function( e )
        {
            e.stopPropagation();
            app.redirect( '/contract/edit/' + groupId + '/' + $( this ).attr( 'data-contract-id' ) );
        });

        $container.on( 'click', '[data-type="btn-archive-contract"]', function( e )
        {
            e.stopPropagation();
            self.dispatchEvent( { type : 'singleContractArchiving', data : { contractId : $( this ).attr( 'data-contract-id' ) } } );
        });

        $container.on( 'click', '[data-type="btn-delete-contract"]', function( e )
        {
            e.stopPropagation();
            self.dispatchEvent( { type : 'singleContractDeletion', data : { contractId : $( this ).attr( 'data-contract-id' ) } } );
        });

        $container.on( 'click', '[data-type="btn-reactivate-contract"]', function( e )
        {
            e.stopPropagation();
            self.dispatchEvent( { type : 'singleContractReactivation', data : { contractId : $( this ).attr( 'data-contract-id' ) } } );
        });

        $container.on( 'click', '[data-type="btn-mark-payed"]', function( e )
        {
            e.stopPropagation();
            self.dispatchEvent( { type : 'singleContractMarkPayed', data : { contractId : $( this ).attr( 'data-contract-id' ) } } );
        });
    },

    getSelectedIds : function()
    {
        let $container = $( this.container ),
            ids = [];

        $container.find( 'tr.tr-selected' ).each( function( i, v )
        {
            ids.push( $( this ).attr( 'data-contract-id' ) );
        });

        return ids;
    },

    destroy : function()
    {

    }
};

export { ContractDataTable };