import {Component} from '@angular/core';
import {NavigationComponent} from '@vendasta/fec-nav';
import {DomSanitizer, SafeHtml} from '@angular/platform-browser';
import { FormArray, FormBuilder, FormControl, Validators } from '@angular/forms';
import {ErrorMessagesMap} from '@vendasta/forms';
import {arrayTruthyItemRequired} from '../../../../src/forms/validators/arrays';

@Component({
  template: `
      <div>
        <va-input-repeated [placeholder]="'Placeholder'" [controlArray]="controlArray1" [tooltip]="'default validators'"></va-input-repeated>
        <va-input-repeated [placeholder]="'Placeholder'" [maxFields]='3' [controlArray]="controlArray2" [tooltip]="'custom validators'" [errorMessages]="customErrorMessage" [itemFactory]="emailControlFactory"></va-input-repeated>
        <va-input-repeated [placeholder]="'Disabled'" [tooltip]="'disabled items'" [disableAdd]="true" [controlArray]="controlArray3"></va-input-repeated>
      </div>
      <div [innerHTML]="readMe"></div>
  `,
  styles: [require('../../../assets/doc.scss')]
})
export class FormsInputRepeatedDocComponent {
  readMe: SafeHtml;
  public controlArray1: FormArray;
  public controlArray2: FormArray;
  public controlArray3: FormArray;
  public customErrorMessage: ErrorMessagesMap = {
      'email': 'Must be a valid email address',
      'required': 'Its required!!!!',
      'maxlength': (err: any) => {
        return `Hey, thats way more than ${err.requiredLength}`;
      }
  };

  constructor(private nav: NavigationComponent, public sanitizer: DomSanitizer, private fb: FormBuilder) {
    nav.activeMenuId = 'forms-input-repeated-doc';

    this.controlArray1 = this.fb.array([this.fb.control('')], arrayTruthyItemRequired());
    this.controlArray2 = this.fb.array([this.emailControlFactory()], Validators.compose([Validators.maxLength(3), arrayTruthyItemRequired()]));
    this.controlArray3 = this.fb.array([[{value: 'Value Here', disabled: true}], [{value: 'Value There', disabled: true}]]);
    this.readMe = this.sanitizer.bypassSecurityTrustHtml(require('./README.html'));
  }

  emailControlFactory(): FormControl {
    return this.fb.control('', [Validators.email, Validators.required]);
  }
}