import {Component} from 'angular2/core';
import {HTTP_PROVIDERS} from 'angular2/http';

import {QueryService} from './query.service';
import {QueryState} from './query-state';
import {QueryStep} from './query-step';

import {QuerySelectComponent} from './query-select.component';
import {QueryResultComponent} from './query-result.component';

@Component({
    selector: 'query-app',
    template: `
        <h1>Angular2 query builder</h1>
        <div>Select a query step:</div>
        <query-select *ngFor="#step of querySteps; #i=index;"
            [queryStep]="step" [index]="i" 
            (queryChanged)="onQueryChanged($event)"></query-select>
        <div>
          <button (click)="addQueryStep()">add step</button>
          <button (click)="removeQueryStep()">remove step</button>
        </div>
        <query-result [queryState]="queryState"></query-result>
        `,
    directives: [QuerySelectComponent, QueryResultComponent],
    providers: [QueryService, HTTP_PROVIDERS]
})
    
export class QueryAppComponent { 
    public queryState: QueryState;
    public querySteps: QueryStep[];
        
    constructor(private _queryService: QueryService) {
        this._queryService.setup();
        this.querySteps = [];
        this.addQueryStep();
    }
    
    addQueryStep() {
        this.querySteps.push({'mode': null});
    }
    
    removeQueryStep() {
        this.querySteps.pop();
        this._queryService.state.steps.pop();
    }
    
    onQueryChanged(event: any) {
        console.debug("app.onquerychanged! event=", event);
        this._queryService.updateQuery();
        this.queryState = this._queryService.getState();
    }
}