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?.results">
        <span>Cypher query:</span>
        <pre>{{queryState.getQueryText()}}</pre>
        <h2>Query result</h2>
        <pre>{{resultInfo}}</pre>
        <div *ngIf="showTable"><button (click)="showTable=false">hide results</button></div>
        <div *ngIf="!showTable"><button (click)="showTable=true">show results</button></div>
        <div *ngIf="showTable">
            <div>Show 
                <select (change)="onSelectNumItems($event)">
                    <option value="10">10</option>
                    <option value="100">100</option>
                    <option value="0">all</option>
                </select>
                results per page.
            </div>
            <div>
                <form (ngSubmit)="onSelectCols($event)">
                    Columns:
                    <span *ngFor="#col of allColumns">
                        <input type="checkbox" value="{{col.name}}" [(ngModel)]="col.show">{{col.name}}
                    </span> 
                    <button type="submit">change columns</button>
                </form>
            </div>
            <div *ngIf="config.paging">Page {{page}} of {{numPages}}</div>
            <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 
                     [config]="config.sorting"
                     (tableChanged)="onChangeTable(config)"
                     [rows]="rows" [columns]="columns">
            </ngTable>
        </div>
    </div>
        `,
    inputs: ['queryState', 'resultInfo'],
    directives: [NG_TABLE_DIRECTIVES, PAGINATION_DIRECTIVES]
})
   
export class QueryResultTableComponent implements OnInit { 
    
    public queryState: QueryState;
    public resultInfo: string;
    
    public showTable = false;
    public data: Array<any>;
    public columns: Array<any>;
    public allColumns: 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(changes: any) {
        console.debug("result table changed! changes=", changes);
        this.data = this.queryState.results;
        this.allColumns = this.queryState.resultColumns;
        this.columns = this.allColumns.filter(c => c.show);
        this.config.sorting = this.columns;
        this.showTable = (this.data.length < 1000);
        this.onChangeTable(this.config, null);
    }
    
    ngOnInit() {
        console.debug("result table init!");
    }
    
    onSelectNumItems(event: any) {
        let selected = event.target.value;
        console.debug("selected number of items:", selected);
        let num = parseInt(selected);
        if (num == 0) {
            this.itemsPerPage = this.length;
        } else {
            this.itemsPerPage = num;
        }
    }
    
    onSelectCols(event: any) {
        console.debug("select cols:", this.allColumns);
        this.columns = this.allColumns.filter(c => c.show);        
        this.config.sorting = this.columns;
    }
    
    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);
        let sortedData = this.changeSort(this.data, this.config);

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

}