import { Input, Component, ViewChild, ViewContainerRef, OnInit } from '@angular/core';
import * as _ from "lodash-lib";
import { TextField } from './field-simple';
import { EmbeddableComponent, RepeatableComponent } from './field-repeatable.component';

declare var jQuery: any;

@Component({
  selector: 'textfield',
  template: `
  <div *ngIf="field.editMode" [ngClass]="getGroupClass()">
    <div *ngIf="!isEmbedded" >
      <label [attr.for]="field.name">
        {{field.label}} {{ getRequiredLabelStr() }}
        <button type="button" class="btn btn-default" *ngIf="field.help" (click)="toggleHelp()"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></button>
        <span id="{{ 'helpBlock_' + field.name }}" class="help-block" *ngIf="this.helpShow" [innerHtml]="field.help"></span>
      </label>
      <input [formGroup]='form' [formControl]="fieldMap[field.name].control"  [id]="field.name" [type]="field.type" [readonly]="field.readOnly" class="form-control" [attr.aria-describedby]="field.help ? 'helpBlock_' + field.name : null">
    </div>
    <div *ngIf="isEmbedded" class="input-group padding-bottom-15">
      <input [formControl]="fieldMap[name].control.controls[index]"  [id]="field.name" [type]="field.type" [readonly]="field.readOnly" class="form-control" [attr.aria-describedby]="field.help ? 'helpBlock_' + field.name : null">
      <span class="input-group-btn">
        <button type='button' *ngIf="removeBtnText" [disabled]="!canRemove" (click)="onRemove($event)" [ngClass]="removeBtnClass" >{{removeBtnText}}</button>
        <button [disabled]="!canRemove" type='button' [ngClass]="removeBtnClass" (click)="onRemove($event)"></button>
      </span>
    </div>
    <div class="text-danger" *ngIf="fieldMap[field.name].control.hasError('required') && fieldMap[field.name].control.touched && !field.validationMessages?.required">{{field.label}} is required</div>
    <div class="text-danger" *ngIf="fieldMap[field.name].control.hasError('required') && fieldMap[field.name].control.touched && field.validationMessages?.required">{{field.validationMessages.required}}</div>
  </div>
  <div *ngIf="!field.editMode" class="key-value-pair">
    <span class="key" *ngIf="field.label">{{field.label}}</span>
    <span class="value">{{field.value}}</span>
  </div>
  `,
})
export class TextFieldComponent extends EmbeddableComponent {

}

@Component({
  selector: 'repeatable-textfield',
  template: `
  <div *ngIf="field.editMode">
    <div class="row">
      <div class="col-xs-12">
      <label>{{field.label}}
        <button type="button" class="btn btn-default" *ngIf="field.help" (click)="toggleHelp()"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></button>
      </label>
      <span id="{{ 'helpBlock_' + field.name }}" class="help-block" *ngIf="this.helpShow" [innerHtml]="field.help"></span>
      </div>
    </div>
    <div *ngFor="let fieldElem of field.fields; let i = index;" class="row">
      <span class="col-xs-12">
        <textfield [name]="field.name" [field]="fieldElem" [form]="form" [fieldMap]="fieldMap" [isEmbedded]="true" [removeBtnText]="field.removeButtonText" [removeBtnClass]="field.removeButtonClass" [canRemove]="field.fields.length > 1" (onRemoveBtnClick)="removeElem($event[0], $event[1])" [index]="i"></textfield>
      </span>
    </div>
    <div class="row">
      <span class="col-xs-12">
        <button *ngIf="field.addButtonText" type='button' (click)="addElem($event)" [ngClass]="field.addButtonTextClass" >{{field.addButtonText}}</button>
        <button *ngIf="!field.addButtonText" type='button' (click)="addElem($event)" [ngClass]="field.addButtonClass"></button>
      </span>
    </div>
  </div>
  <li *ngIf="!field.editMode" class="key-value-pair">
    <span *ngIf="field.label" class="key">{{field.label}}</span>
    <span class="value">
      <ul class="key-value-list">
        <textfield *ngFor="let fieldElem of field.fields; let i = index;"  [field]="fieldElem" [form]="form" [fieldMap]="fieldMap"></textfield>
      </ul>
    </span>
  </li>
  `,
})
export class RepeatableTextfieldComponent extends RepeatableComponent {

  ngOnInit() {
  }

  addElem(event: any) {
    const newElem = this.field.addElem();
  }

  removeElem(event: any, i: number) {
    this.field.removeElem(i);
  }
}