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

@Component({
  template: `
      <va-input [placeholder]="'Placeholder'" [required]="true" [control]="control1" [tooltip]="'default validators'"></va-input>
      <va-input [placeholder]="'Placeholder'" [required]="true" [control]="control2" [tooltip]="'custom validators'" [errorMessages]="customErrorMessage"></va-input>
      <va-input [placeholder]="'Placeholder'" [control]="control3"></va-input>
      <div [innerHTML]="readMe"></div>
  `,
  styles: [require('../../../assets/doc.scss')]
})
export class FormsInputDocComponent {
  public readMe: SafeHtml;
  public control1: FormControl;
  public control2: FormControl;
  public control3: FormControl;
  public customErrorMessage: ErrorMessagesMap = {
      '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-doc';

    this.control1 = this.fb.control('', [Validators.required, Validators.minLength(5), Validators.maxLength(10)]);
    this.control2 = this.fb.control('', [Validators.required, Validators.minLength(5), Validators.maxLength(10)]);
    this.control3 = this.fb.control({value: 'Some Value', disabled: true});
    this.readMe = this.sanitizer.bypassSecurityTrustHtml(require('./README.html'));
  }
}