import {Component, OnInit} from '@angular/core';
import {DatatableFrankService} from './datatable-frank.service';

declare var componentHandler: any;

@Component( {
    selector: 'datatable_frank',
    template: `
    <h3>DataTable Component</h3>
    <span
        class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
        <input #rowNums class="mdl-textfield__input" type="text"
        pattern="-?[0-9]*(\.[0-9]+)?" id="txtNumRows"> <label
        class="mdl-textfield__label" for="txtNumRows">Number of Rows...</label> <span
        class="mdl-textfield__error">Input is not a number!</span>
    </span>

    <button
        class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect"
        (click)="changeRows(rowNums.value)">Submit</button>
    <div>
        <ngx-datatable
            class='material'
            [rows]='rows'
            [columnMode]="'standard'"
            [headerHeight]="50"
            [footerHeight]="50"
            [rowHeight]="50"
            [scrollbarV]="true"
            >
            <ngx-datatable-column name="Name" width="200">
              <template let-value="value" ngx-datatable-cell-template>
                <strong>{{value}}</strong>
              </template>
            </ngx-datatable-column>
            <ngx-datatable-column name="Gender" width="300">
              <template let-row="row" let-value="value" ngx-datatable-cell-template>
                <i [innerHTML]="row['name']"></i> and <i>{{value}}</i>
              </template>
            </ngx-datatable-column>
            <ngx-datatable-column name="Age" width="80">
            </ngx-datatable-column>
          </ngx-datatable>

    <div class='wrapper'>
        <table class="mdl-data-table mdl-js-data-table">
            <thead>
                <tr>
                    <th *ngFor="let key of columnKeys"
                        class="mdl-data-table__cell--non-numeric">{{key}}</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let member of members;trackBy:track">
                    <td *ngFor="let key of columnKeys;trackBy:track"><span
                        *ngIf="key == 'avatar'"> <img src="{{ member[key] }}"
                            style="width: 50px; height: 50px" />
                    </span> <span *ngIf="key != 'avatar'"> {{ member[key] }} </span></td>
                </tr>
            </tbody>
        </table>
    </div>
    `,
    styles: [`
             .wrapper{
                    height: 500px;
                    overflow: scroll;
                }
             `]
})
export class DatatableFrankComponnet implements OnInit {

    members = [];
    columnKeys = [];


    rows = [
        { name: 'Austin', gender: 'Male', company: 'Swimlane' },
        { name: 'Dany', gender: 'Male', company: 'KFC' },
        { name: 'Molly', gender: 'Female', company: 'Burger King' },
    ];
    columns = [
        { prop: 'id' },
        { name: 'firstName' },
        { name: 'lastName' },
        { name: 'city' },
        { name: 'street' },
        { name: 'zipCode' },
        { name: 'email' },
        { name: 'date' }
    ];

    tmpResults = [];

    constructor( private dataService: DatatableFrankService ) { }
    ngOnInit() {
        this.members = this.dataService.getAllDataObjects( 10 );
        this.columnKeys = Object.keys( this.members[0] );
        this.rows = this.members;

        var results = [];
        for ( var i = 0; i < 100; i++ ) {
            results.push( {
                id: i,
                name: 'name ' + i,
                gender: 'gender' + i
            })
        }
        this.rows = results;

        for ( var i = 0; i < 10000; i++ ) {
            this.tmpResults.push( {
                id: i,
                name: 'name ' + i,
                gender: 'gender' + i
            })
        }

    }

    ngAfterViewInit() {
        componentHandler.upgradeDom();
    }
    changeRows( rows ) {

        this.rows = this.tmpResults;
    }
}