import { Component, OnInit, ViewContainerRef, ViewChild, ChangeDetectorRef, AfterViewChecked } from '@angular/core';
import { FormControl, FormGroup, ValidationErrors, Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';
import { InitCommonsService, NotificationService } from '@xdf/commons';
import { AuditDialogService, ConfirmationDialogService, DynaDataService, IFormView, ValidatorUtils } from '@xdf/gallery';
import { NavigationService } from '@xdf/layouts';

import { CalendarConfigLayoutComponent } from '../components/calendar-config-layout/calendar-config-layout.component';
import * as moment_ from 'moment';
const moment = moment_;

@Component({
  selector: 'byte-calendar-form',
  templateUrl: './calendar-form.component.html',
  styleUrls: ['./calendar-form.component.scss']
})
export class CalendarFormComponent extends IFormView implements AfterViewChecked, OnInit {
  @ViewChild('layout', { static: false }) layoutCalendar: CalendarConfigLayoutComponent;
  calendarConfForm = true;
  icon = '<i class="fa fa-mobile-alt"></i>';
  calendarExceptionTemplate;
  interForms = false;
  constructor(
    protected vcRef: ViewContainerRef,
    protected route: ActivatedRoute,
    protected router: Router,
    protected dynaDataService: DynaDataService,
    protected translate: TranslateService,
    protected notificationService: NotificationService,
    protected auditDialogService: AuditDialogService,
    protected confirmationDialogService: ConfirmationDialogService,
    protected navigationService: NavigationService,
    protected init: InitCommonsService,
    protected validatorUtils: ValidatorUtils,
    private readonly changeDetectorRef: ChangeDetectorRef
  ) {
    super(vcRef, route, router, dynaDataService, translate, notificationService, auditDialogService, confirmationDialogService, init);

  }

  ngAfterViewChecked(): void {
    this.calendarConfForm = this.weekConfigurationValidator();
    this.changeDetectorRef.detectChanges();
  }
  ngOnInit() {
    const templateCalendarException = 'calendarExceptionTemplate';
    this.calendarExceptionTemplate = this.route.snapshot.data[templateCalendarException];
    super.ngOnInit();
  }

  protected getFields(): FormGroup {
    let form;
    
    if (this.mode !== 'new' && this.record) {
      form = new FormGroup({
        name: this.createFormControl('name', true, false),
        id: this.createFormControl('id', true, false),
      });
    } else {
      form = new FormGroup({
        id: this.createFormControl('id', false, false),
        name: this.createFormControl('name', false, false),
      });
    }
    return form;
  }
  private createFormControl(name: string, existRecord?: boolean, required?: boolean, defaultValue?: string, validators?: Array<ValidationErrors>): FormControl {
    if (!defaultValue) {
      defaultValue = '';
    }
    let validatorList = [];
    if (validators) {
      validatorList = validators;
    }
    if (required) {
      validatorList.push(Validators.required);
    }
    return new FormControl({ value: existRecord ? this.record[name] : '', disabled: this.disabledCondition() }, validatorList);
  }

  protected disabledCondition(): boolean {
    const disabled = this.mode === 'view';
    return disabled;
  }

  updateForm(id, mode) {
    this.mode = mode;
    this.id = id;
    this.form = this.getFields();
    if (this.layoutCalendar) {
      this.layoutCalendar.reloadweekSchedulerForm(mode);
    }
    if (this.id) {
      this.dynaDataService.getResult(this.id).subscribe(
        data => {
          this.record = data;
        }
      );
    }
    this.record = new Object();
  }


  submit() {
    this.interForms = false;
    super.submit();
  }

  completeForm() {
    console.log(this.layoutCalendar.getCalendarException());
    this.record.weekSchedulerBeanList = this.layoutCalendar.getWeeklyConfig();
    this.record.calendarExceptionBeanList = this.layoutCalendar.getCalendarException();
  }

  optionEvent(option) {
    // if (this.layoutCalendar && option !== 'back') {
    //   this.layoutCalendar.reloadweekSchedulerForm(option);
    // }
    if (option === 'delete') {
      this.interForms = false;
    }
    super.optionEvent(option);
  }

  weekConfigurationValidator(): boolean {
    return this.layoutCalendar.getWeekFormValidator();
  }

  dirtyChangeLayout() {
    this.interForms = true;
  }

  isDirty(): boolean {
    return this.form.dirty || this.interForms;
  }


}
