import {Component, OnInit} from 'angular2/core';

import {NG_TABLE_DIRECTIVES} from 'ng2-table/ng2-table';
import {PAGINATION_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap';

import {QueryState} from './query-state';

@Component({
    selector: 'query-result',
    template: `
    <div *ngIf="queryState && queryState.results">
        <span>Cypher query:</span>
        <pre>{{queryState.resultCypherQuery}}</pre>
        <h2>Query result</h2>
        <pre>{{resultInfo}}</pre>
        <span *ngIf="config.paging">page {{page}} of {{numPages}}</span>
        <pagination *ngIf="config.paging"
                    class="pagination-sm"
                    [(ngModel)]="page"
                    [totalItems]="length"
                    [itemsPerPage]="itemsPerPage"
                    [maxSize]="maxSize"
                    [boundaryLinks]="true"
                    [rotate]="false"
                    (pageChanged)="onChangeTable(config, $event)"
                    (numPages)="numPages = $event">
        </pagination>
        <ngTable *ngIf="false"
                 [config]="config.sorting"
                 (tableChanged)="onChangeTable(config)"
                 [rows]="rows" [columns]="columns">
        </ngTable>
    </div>
        `,
    inputs: ['queryState', 'resultInfo'],
    directives: [NG_TABLE_DIRECTIVES, PAGINATION_DIRECTIVES]
})
   
export class QueryResultTableComponent implements OnInit { 
    
    public queryState: QueryState;
    public resultInfo: string;
    
    public data: Array<any>;
    public columns: Array<any>;
    
    public rows: Array<any>;
     
    public page: number = 1;
    public itemsPerPage: number = 10;
    public maxSize: number = 5;
    public numPages: number = 1;
    public length: number = 0;
    
    public config: any = {
        paging: true,
        sorting: {'columns': this.columns},
        //filtering: {filterString: '', columnName: 'position'}
    };
    
    ngOnChanges() {
        console.debug("result table changed! queryState=", this.queryState?this.queryState.resultColumns:'');
        this.data = this.queryState.results;
        this.columns = this.queryState.resultColumns;
        this.config.sorting = this.queryState.resultColumns;
        this.onChangeTable(this.config, null);
    }
    
    ngOnInit() {
        console.debug("result table init!");
    }
    
    changePage(page:any, data:Array<any> = this.data):Array<any> {
        let start = (page.page - 1) * page.itemsPerPage;
        let end = page.itemsPerPage > -1 ? (start + page.itemsPerPage) : data.length;
        return data.slice(start, end);
      }

    changeSort(data: any, config: any) {
        if (!config.sorting) {
            return data;
        }
        let columns = this.columns.filter(c => c.sort);
        // simple sorting
        let sorted = data.sort((previous: any, current: any) => {
            for (let i = 0; i < columns.length; i++) {
                let sort = columns[i].sort;
                let columnName = columns[i].name;
                if (previous[columnName] > current[columnName]) {
                    return sort === 'desc' ? -1 : 1;
                } else if (previous[columnName] < current[columnName]) {
                    return sort === 'asc' ? -1 : 1;
                }
            }
            return 0;
        });
        return sorted;
    }

    changeFilter(data: any, config: any): any {
        if (!config.filtering) {
            return data;
        }

        let filteredData: Array<any> = data.filter((item: any) =>
            item[config.filtering.columnName].match(this.config.filtering.filterString));

        return filteredData;
    }

    onChangeTable(config, page: any = config.paging) {
        console.debug("onChangeTable config=", config);
        if (config.filtering) {
            Object.assign(this.config.filtering, config.filtering);
        }
        if (config.sorting) {
            Object.assign(this.config.sorting, config.sorting);
        }

        let filteredData = this.changeFilter(this.data, this.config);
        let sortedData = this.changeSort(filteredData, this.config);

        this.rows = (page && config.paging) ? this.changePage(page, sortedData) : sortedData;
        this.length = sortedData.length;
    }

}