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

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

import {QueryService} from './query.service';
import {NormalizationService} from './normalization.service';
import {getRelationByName} from './ismi-relation-types';


@Component({
    selector: 'query-select',
    template: `
<p *ngIf="resultInfo">&nbsp;&nbsp;&nbsp;result: {{resultInfo}}</p>
<div>
    <form (ngSubmit)="onSubmit()">
        <select name="mode" (change)="onSelectMode($event)">
            <option></option>
            <option *ngFor="let mode of getQueryModes()" [value]="mode.id">
                {{mode.label}}
            </option>
        </select>

        <span *ngIf="selectedMode?.id=='type_is'">
            <select name="option" *ngIf="queryOptions" [ngModel]="selectedOption" (change)="onSelectOption($event)">
                <option></option>
                <option *ngFor="let option of queryOptions" [value]="option">
                    {{option}}
                </option>
            </select>
        </span>

        <span *ngIf="selectedMode?.id=='relation_is'">
            <select name="option" *ngIf="queryOptions" [ngModel]="selectedOption" (change)="onSelectOption($event)">
                <option></option>
                <option *ngFor="let option of queryOptions" [value]="option.getName()">
                    {{option.getLabel()}}
                </option>
            </select>
        </span>

        <span *ngIf="selectedMode?.id=='att_contains' || selectedMode?.id=='att_contains_norm'">
            <select name="option" [ngModel]="selectedOption" (change)="selectedOption=$event.target.value">
                <option></option>
                <option *ngFor="let option of queryOptions" [value]="option">
                    {{option}}
                </option>
            </select>
            <span>contains</span>
            <input type="text" name="value" [(ngModel)]="queryInput"/>
        </span>

        <span *ngIf="selectedMode?.id=='att_num_range'">
            <select name="option" [ngModel]="selectedOption" (change)="selectedOption=$event.target.value">
                <option></option>
                <option *ngFor="let option of queryOptions" [value]="option">
                    {{option}}
                </option>
            </select>
            <span>is between</span>
            <input type="text" name="value1" [(ngModel)]="queryInput"/>
            <span>and</span>
            <input type="text" name="value2" [(ngModel)]="queryInput2"/>
        </span>

        <span *ngIf="selectedMode?.id=='id_is'">
            <input type="text" name="value" [(ngModel)]="queryInput"/>
        </span>

        <button type="submit">Submit</button>
    </form>
</div>
        `,
    inputs: ['queryStep', 'index'],
    outputs: ['queryChanged']
})
   
export class QuerySelectComponent implements OnInit { 
    public queryStep: string;
    public index: number;
    public resultInfo: string;
    public queryModes: QueryMode[];
    public selectedMode: QueryMode;
    public queryOptions: string[];
    public selectedOption: string;
    public queryInput: string;
    public queryInput2: string;
    
    // output queryChanged
    public queryChanged: EventEmitter<QueryState> = new EventEmitter<QueryState>();
    
    constructor(private _queryService: QueryService, private _normService: NormalizationService) {}
    
    ngOnInit() {
        this.setup();
    }
    
    setup() {
        console.log("query-select setup step=", this.queryStep);
        var step = this._queryService.state.steps[this.index-1];
        if (step != null) {
            this.resultInfo = step.resultInfo;
        }
    }
    
    getQueryModes(): QueryMode[] {
        this.queryModes = this._queryService.getQueryModes(this.index);
        return this.queryModes;
    }
    
    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);
        this.selectedOption = selected;
        this.onSubmit();
    }
    
    onSubmit() {
        console.debug("Submit! selectedMode=", this.selectedMode, " selectedOption=", this.selectedOption, " queryInput=", this.queryInput);
        var step: QueryStep;
        if (this.selectedMode.id == 'type_is') {
            /*
             * type_is
             */
            let opt = this.selectedOption;
            if (opt) {
                step = new QueryStep(this.selectedMode, {'objectType': opt});
            }
        } else if (this.selectedMode.id == 'relation_is') {
            /*
             * relation_is
             */
            let opt = this.selectedOption;
            if (opt) {
                let rel = getRelationByName(opt);
                step = new QueryStep(this.selectedMode, {'relationType': rel});
            }
        } else if (this.selectedMode.id == 'id_is') {
            /*
             * id is
             */
            let val = this.queryInput;
            if (val) {
                step = new QueryStep(this.selectedMode, {'value': val});
            }
        } else if (this.selectedMode.id == 'att_contains') {
            /*
             * att_contains
             */
            let att = this.selectedOption;
            let val = this.queryInput;
            if (att && val) {
                step = new QueryStep(this.selectedMode, {'attribute': att, 'value': val});
            }
        } else if (this.selectedMode.id == 'att_num_range') {
            /*
             * att_num_range
             */
            let att = this.selectedOption;
            let nlo = this.queryInput;
            let nhi = this.queryInput2;
            if (att && nlo && nhi) {
                step = new QueryStep(this.selectedMode, {'attribute': att, 'numLo': nlo, 'numHi': nhi});
            }
        } else if (this.selectedMode.id == 'att_contains_norm') {
            /*
             * att_contains_norm
             * 
             * calls normalization service and submits event in callback
             */
            let att = this.selectedOption;
            let val = this.queryInput;
            if (att && val) {
                // run search term through normalizer 
                this._normService.fetchArabicTranslitNormalizedString(val)
                .subscribe(
                    data => {
                        console.debug("openmind norm data=", data);
                        step = new QueryStep(this.selectedMode, {'attribute': att, 'value': val, 'normValue': data.normalized_text});
                        this._queryService.setQueryStep(this.index, step);
                        // query has changed now
                        this.queryChanged.emit(this._queryService.getState());
                    },
                    err => console.error("openmind norm error=", err),
                    () => console.debug("openmind norm query Complete")
                );
                // query has not been set yet
                return;
           }
        }

        /*
         * set step and submit change event
         */
        if (step != null) {
            this._queryService.setQueryStep(this.index, step);
            this.queryChanged.emit(this._queryService.getState());
        }
    }
}