import {Component, Output, EventEmitter, OnInit} from 'angular2/core';

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


@Component({
    selector: 'query-select',
    template: `
        <div>
        <form (ngSubmit)="onSubmit()">
        <select (change)="onSelectMode($event)">
            <option></option>
            <option *ngFor="#mode of queryModes" [value]="mode.id">
                {{mode.label}}
            </option>
        </select>

        <select *ngIf="selectedMode.id=='type_is' && queryOptions" (change)="onSelectOption($event)">
            <option></option>
            <option *ngFor="#option of queryOptions" [value]="option">
                {{option}}
            </option>
        </select>

        <span *ngIf="selectedMode.id=='att_contains'">
        <select [(ngModel)]="selectedOption">
            <option></option>
            <option *ngFor="#option of queryOptions" [value]="option">
                {{option}}
            </option>
        </select>
        <span>contains</span>
        <input type="text" [(ngModel)]="queryInput"/>
        </span>
        <button type="submit">Submit</button>
        </form>
        </div>
        `,
    inputs: ['index']
    //outputs: ['queryChanged'] // this should work but doesn't
})
   
export class QuerySelectComponent implements OnInit { 
    public queryStep: QueryStep;
    public index: number;
    public queryModes: QueryMode[];
    public selectedMode: QueryMode;
    public queryOptions: string[];
    public selectedOption: string;
    public queryInput: string;
    
    @Output('queryChanged') queryChanged = new EventEmitter<QueryState>();
    
    constructor(private _queryService: QueryService) {}
    
    ngOnInit() {
        this.setup();
    }
    
    setup() {
        console.log("query-select setup step=", this.queryStep);
        this.queryModes = this._queryService.getQueryModes();
        // select first mode (too early?)
        this.selectedMode = this.queryModes[0];
        this.query2Options = this._queryService.getQueryOptions(this.selectedMode);
    }
    
    onSelectMode(event: any) {
        var selected = event.target.value;
        this.selectedMode = this.queryModes.find(mode => mode.id === selected);
        this.queryOptions = this._queryService.getQueryOptions(this.selectedMode);
    }
    
    onSelectOption(event: any) {
        var selected = event.target.value;
        console.debug("selected option:", selected);
        var step = {'mode': this.selectedMode, 'objectType': selected};
        this._queryService.setQueryStep(this.index, step);
        this.queryChanged.emit(this._queryService.getState());
    }
    
    onSubmit() {
        console.debug("Submit! selectedMode=", this.selectedMode, " selectedOption=", this.selectedOption, " queryInput=", this.queryInput);
        if (this.selectedMode.id == 'att_contains') {
            var att = this.selectedOption;
            var val = this.queryInput;
            if (att && val) {
                var step = {'mode': this.selectedMode, 'attribute': att, 'value': val};
                this._queryService.setQueryStep(this.index, step);
                this.queryChanged.emit(this._queryService.getState());
           }
        }
    }
}