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-hours-of-operation [control]="control1"></va-hours-of-operation>
      <div>
          Data: 
          <ul>
              <li *ngFor="let hoo of control1.value">{{hoo | json}}</li>
          </ul>
      </div>
  `,
  styles: [require('../../../assets/doc.scss')]
})
export class FormsHoursOfOperationDocComponent {
  public readMe: SafeHtml;
  public control1: FormControl = new FormControl();

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

    let hoo: HoursOfOperation = [
      new HoursOfOperationDaySpan({dayOfWeek: [DayOfWeek.MONDAY], opens: '15:00', closes: '15:15', description: 'This is a description for monday'}),
      new HoursOfOperationDaySpan({dayOfWeek: [DayOfWeek.TUESDAY], opens: '15:00', closes: '15:01'}),
      new HoursOfOperation24HourDaySpan({dayOfWeek: [DayOfWeek.WEDNESDAY, DayOfWeek.THURSDAY]}),
      new HoursOfOperationNoteSpan({dayOfWeek: [DayOfWeek.SATURDAY, DayOfWeek.SUNDAY], description: 'This is a note.'}),
      new HoursOfOperationPublicHolidaySpan('Test'),
      new HoursOfOperationDaySpan({dayOfWeek: [DayOfWeek.THURSDAY, DayOfWeek.FRIDAY, DayOfWeek.WEDNESDAY], opens: '9:00', closes: '17:00'}),
      new HoursOfOperationDaySpan({dayOfWeek: [DayOfWeek.MONDAY], opens: '12:00', closes: '17:00'})
    ];
    this.control1.setValue(hoo);
    this.readMe = this.sanitizer.bypassSecurityTrustHtml(require('./README.html'));
  }
}