import { Component, Input, Output, EventEmitter } from '@angular/core';
import { FormBuilderProvider } from '../../providers/form-builder/form-builder';

@Component({
  selector: 'ws-select-dropdown',
  template: `
    <ion-item class="{{fieldClass}}">
      <ion-label color="primary" floating *ngIf="!question.hideQuestion">{{question.question}}</ion-label>
      <ion-select [(ngModel)]="fieldValue" (ionChange)='selectOption($event, question)'>
        <ion-option *ngFor="let option of question.options" value="{{option.value}}">{{option.label}}</ion-option>
      </ion-select>
    </ion-item>
  `,
  styles: [`

  `]
})
export class WsSelectDropdownComponent {

  @Input('question') question;
  @Output() answerGiven = new EventEmitter();

  fieldValue:string = '';
  isFieldValid:boolean = false;
  showError:boolean = false;
  fieldClass:string = '';
  
  constructor(public formBuilder: FormBuilderProvider){
    	this.fieldValue = '';
  }

  ngOnInit() {
      if(typeof this.question.value !== 'undefined'){
          this.fieldValue = this.question.value;
      } 

      if(typeof this.question.inputClass !== 'undefined'){
          this.fieldClass = this.question.inputClass;
      }
  }
  
  selectOption(event,question){
  	let isStringValid = this.validateAnswer(question,event);

  	if(!isStringValid){
		this.isFieldValid = false;
  		this.showError = true;
  	}else{
		this.isFieldValid = true;
  		this.showError = false;
  	}

  	if(this.isFieldValid){
  		question.value = event;
      question.valid = true;

      this.answerGiven.emit(question);
  	}
  		
  }
  
  validateAnswer(question,string){	
  		return this.formBuilder.validateAnswer(question,string);
  }

}