import { Component, HostListener, OnInit, Renderer2, Type } from '@angular/core';
import { NbCalendarCell, NbCalendarRange, NbCalendarRangeYearCellComponent, NbCalendarSize, NbCalendarViewMode, NbCalendarYearModelService, NbDateService, NbPositionedContainerComponent, NbRenderableContainer } from '@nebular/theme';
import { Subject } from 'rxjs';

@Component({
  selector: 'ngx-calendar-view',
  templateUrl: './calendar-view.component.html',
  styleUrls: ['./calendar-view.component.scss']
})
export class CalendarViewComponent extends NbPositionedContainerComponent implements NbRenderableContainer {

  activeViewMode: NbCalendarViewMode = NbCalendarViewMode.DATE;
  date: Date;
  visibleDate: Date;
  ViewMode = NbCalendarViewMode;
  mode: NbCalendarViewMode = NbCalendarViewMode.DATE;
  max: Date;
  min: Date;
  size: NbCalendarSize = NbCalendarSize.MEDIUM;
  context: contextSetting;
  private listener: any;
  private destroy$: Subject<void> = new Subject<void>();
  constructor(
    protected dateService: NbDateService<Date>,
    private renderer: Renderer2,
    protected yearModelService: NbCalendarYearModelService<Date>,) {
    super();
  }
  renderContent() {

  }
  filter: (Date) => boolean;
  private hasParentClass(child, classname) {
    if (child.className && child.className.split(' ').indexOf(classname) >= 0) return true;
    try {
      //Throws TypeError if child doesn't have parent any more
      return child.parentNode && this.hasParentClass(child.parentNode, classname);
    } catch (TypeError) {
      return false;
    }
  }
  ngOnInit() {
    this.date = this.context.date;
    this.visibleDate = this.date ? this.date : this.dateService.today();


    setTimeout(() => {
      this.listener = this.renderer.listen('window', 'click', (e: Event) => {
        //console.log(e.target);
        let el = (e.target as HTMLElement);
        if (
          this.hasParentClass(el, 'rbjCalendar')
          // el.className.indexOf('rbjCalendar') > -1 ||
          // el.tagName.indexOf('NB-CALENDAR') > -1
        ) {
          this.context.focus();
        } else {
          this.context.hide();
        }
      })
    }, 50);

  }

  ngOnDestroy() {
    if (this.listener) { this.listener(); }
    this.destroy$.next();
    this.destroy$.complete();
  }
  setViewMode(mode: NbCalendarViewMode) {
    this.mode = mode;
  }
  setVisibleDate(date: Date) {

  }

  prevMonth() {
    this.changeVisibleMonth(-1);
  }

  nextMonth() {
    this.changeVisibleMonth(1);
  }

  prevYears() {
    this.changeVisibleYear(-1);
  }

  nextYears() {
    this.changeVisibleYear(1);
  }


  private changeVisibleMonth(direction: number) {
    this.visibleDate = this.dateService.addMonth(this.visibleDate, direction);
  }
  private changeVisibleYear(direction: number) {

    this.visibleDate = this.dateService.addYear(this.visibleDate, direction * this.yearModelService.getYearsInView());

  }

  navigateToday() {

    this.visibleDate = this.dateService.today();

    this.context.dateChange(this.dateService.today());
  }


  navigatePrev() {
    switch (this.activeViewMode) {
      case NbCalendarViewMode.DATE:
        return this.prevMonth();
      case NbCalendarViewMode.MONTH:
        return this.nextYears();
      case NbCalendarViewMode.YEAR:
        return this.prevYears();
    }
  }

  navigateNext() {
    switch (this.activeViewMode) {
      case NbCalendarViewMode.DATE:
        return this.nextMonth();
      case NbCalendarViewMode.MONTH:
        return this.nextYears();
      case NbCalendarViewMode.YEAR:
        return this.nextYears();
    }
  }

  onChangeViewMode() {
    if (this.activeViewMode === NbCalendarViewMode.DATE) {
      return this.setViewMode(NbCalendarViewMode.YEAR);
    }

    this.setViewMode(NbCalendarViewMode.DATE);
  }

  onChange(date: Date) {
    this.context.dateChange(date);
  }

  @HostListener('focus')
  focus() {
    this.context.focus();
  }

  dayCellComponent: Type<NbCalendarCell<Date, NbCalendarRange<Date>>>

  /**
   * Custom month cell component. Have to implement `NbCalendarCell` interface.
   * */
  monthCellComponent: Type<NbCalendarCell<Date, NbCalendarRange<Date>>>;

  /**
   * Custom year cell component. Have to implement `NbCalendarCell` interface.
   * */
  yearCellComponent: Type<NbCalendarCell<Date, NbCalendarRange<Date>>> = NbCalendarRangeYearCellComponent;

}


export interface contextSetting {
  date: Date,
  hide: () => {},
  focus: () => {},
  dateChange: (d: Date) => {};
}