import { Component, OnInit } from '@angular/core'
import { CommonModule } from '@angular/common';
import { GridDataResult } from '@progress/kendo-angular-grid';
import { State, process } from '@progress/kendo-data-query';
import { Observable } from 'rxjs/Rx';
import { FormControl, FormGroup, Validators } from '@angular/forms'
import { Router } from '@angular/router'
import { Http, Response } from '@angular/http';
import { FetchDataService } from './fetchdata.service'
import { WeatherForecast } from './fetchdata'

@Component({
    selector: 'fetch-data',
    templateUrl: './fetchdata.component.html'
})
export class FetchDataComponent {
    public forecasts: WeatherForecast[];

    errorMessage: string

    public view: Observable<GridDataResult>;
    public gridState: State = {
        sort: [],
        skip: 0,
        take: 10
    };

    private editedRowIndex: number;

    constructor(
        private http: Http,
        private fetchDataService: FetchDataService
    ) { }

    public ngOnInit(): void {
        this.view = this.fetchDataService.map(data => process(data, this.gridState));
        this.fetchDataService.read();
    }

    public updateFromParent() {
        this.view = this.fetchDataService.map(data => process(data, this.gridState));
        this.fetchDataService.read();
    }

    public onStateChange(state: State) {
        this.gridState = state;
        this.fetchDataService.read();
    }
}
