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

import {QueryService} from './query.service';
import {QueryMode} from './query-mode';


@Component({
    selector: 'query-select',
    template: `
        <p>Selected option: {{selectedQuery}}</p>
        <select (change)="onSelectMode($event)">
            <option *ngFor="#mode of queryModes" [value]="mode.id">
                {{mode.label}}
            </option>
        </select>
        <select [(ngModel)]="selectedQuery">
            <option *ngFor="#option of query2Options" [value]="option">
                {{option}}
            </option>
        </select>
        `,
    providers: [QueryService, HTTP_PROVIDERS]
})
   
export class QuerySelectComponent implements OnInit { 
    public queryModes;
    public selectedQuery = 'unknown';
    public query2Options;
    
    constructor(private _queryService: QueryService) {}
    
    ngOnInit() {
        this.setup();
    }
    
    setup() {
        this.queryModes = this._queryService.getQueryModes();
        this._queryService.setupIsmiObjectTypes();
    }
    
    onSelectMode(event: any) {
        var selected = event.target.value;
        var mode = this.queryModes.find(mode => mode.id === selected);
        this._queryService.getQueryOptions(mode).then(
            options => this.query2Options = options);
    }
}