import {Component} from '@angular/core';
import {NavigationComponent} from '@vendasta/fec-nav';
import {DomSanitizer, SafeHtml} from '@angular/platform-browser';
import {FormBuilder, FormControl} from '@angular/forms';
import {
  HoursOfOperation,
  HoursOfOperation24HourDaySpan,
  HoursOfOperationDaySpan,
  HoursOfOperationNoteSpan,
  HoursOfOperationPublicHolidaySpan,
  DayOfWeek
} from '@vendasta/forms/controls';

@Component({
  template: `
      <div [innerHTML]="readMe"></div>

      <h1>Example:</h1>
      <va-time-picker [control]="control1" [include24Hours]="true" [includeNotesOnly]="true" [placeholder]="'Opens at'"></va-time-picker>
      <div>
          Data: <span>{{control1.value | json}}</span>
      </div>
  `,
  styles: [require('../../../assets/doc.scss')]
})
export class FormsTimePickerDocComponent {
  public readMe: SafeHtml;
  public control1: FormControl = new FormControl();

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

    this.control1.setValue('15:00');
    this.readMe = this.sanitizer.bypassSecurityTrustHtml(require('./README.html'));
  }
}