import {Component, EventEmitter, Input, Output} from '@angular/core';
import {QuestionInterface} from './types/question.interface';
import {FormGroup, ValidationErrors} from '@angular/forms';

@Component({
  selector: 'dyn-question',
  template: `
      <div [ngSwitch]="question.type" [formGroup]="form">
          <label [for]="question.properties.key">{{question.properties.label ? question.properties.label + (question.constraints.optional ? '' : ' *') : ''}}</label>
          <i [hidden]="question.description" class="help circle icon" (mouseover)="onHover(true)" (mouseout)="onHover(false)">Help</i>
          <a [hidden]="!hoverState" class="ui pointing red basic label">{{question.description}}</a><br>
          
          <tag-input *ngSwitchCase="'flag'"
                     [formControlName]="question.properties.key" [id]="question.properties.key"
                     [nullable]="question.constraints.optional" [readonly]="type=='view'"
                     [items]="question.properties.options"
                     (ngModelChange)="change()"></tag-input>
          <hidden-input *ngSwitchCase="'hidden'"
                        [formControlName]="question.properties.key" [id]="question.properties.key"
                        [nullable]="question.constraints.optional" [readonly]="type=='view'"
                        (ngModelChange)="change()"></hidden-input>
          <dropdown-input *ngSwitchCase="'dropdown'"
                          [formControlName]="question.properties.key" [id]="question.properties.key"
                          [nullable]="question.constraints.optional" [readonly]="type=='view'"
                          [items]="question.properties.options"
                          (ngModelChange)="change()"></dropdown-input>
          <textarea-input *ngSwitchCase="'textbox'"
                          [formControlName]="question.properties.key" [id]="question.properties.key"
                          [nullable]="question.constraints.optional" [readonly]="type=='view'"
                          (ngModelChange)="change()"></textarea-input>
          
          <ul [hidden]="!errorList.length">
              <li *ngFor="let error of errorList">{{error}}</li>
          </ul>
      </div>
  `
})
export class DynQuestionComponent {
  @Input() question: QuestionInterface;
  @Input() type: "'insert'|'update'|'delete'|'view'";
  @Input() form: FormGroup;
  @Output() onChange: EventEmitter<any> = new EventEmitter<any>();
  public hoverState: any = false;
  private errorList: Array<string> = [];

  onHover(state: boolean) {
    this.hoverState = state;
  }

  change() {
    setTimeout(() => {
      this.errorList = [];
      let control = this.form.controls[this.question.properties.key];
      if (control.untouched || control.valid)
        return null;
      let errors: ValidationErrors = control.errors;
      for (let key in errors) {
        if (errors.hasOwnProperty(key)) {
          this.errorList.push(errors[key].message);
        }
      }
      this.onChange.emit();
    }, 0);
  }
}