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

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

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