import {
  AfterViewInit,
  ComponentRef,
  Directive,
  ElementRef,
  EventEmitter,
  Input,
  OnChanges,
  OnDestroy,
  OnInit,
  Output,
  Renderer2,
  SimpleChanges,
  ViewContainerRef
} from '@angular/core';
import { pDaterangepickerConfig } from './p-daterangepicker.config';
import { pDaterangepickerContainerComponent } from './themes/p/p-daterangepicker-container.component';
import { Subscription, Subject, BehaviorSubject } from 'rxjs';
import { filter, takeUntil } from 'rxjs/operators';
import { ComponentLoaderFactory, ComponentLoader } from 'mirra-ui/component-loader';
import { pDatepickerConfig } from './p-datepicker.config';
import { DatepickerDateCustomClasses } from './models';

@Directive({
  selector: '[pDaterangepicker]',
  exportAs: 'pDaterangepicker'
})
export class pDaterangepickerDirective
  implements OnInit, OnDestroy, OnChanges, AfterViewInit {
  /**
   * Placement of a daterangepicker. Accepts: "top", "bottom", "left", "right"
   */
  @Input() placement: 'top' | 'bottom' | 'left' | 'right' = 'bottom';
  /**
   * Specifies events that should trigger. Supports a space separated list of
   * event names.
   */
  @Input() triggers = 'click';
  /**
   * Close daterangepicker on outside click
   */
  @Input() outsideClick = true;
  /**
   * A selector specifying the element the daterangepicker should be appended to.
   */
  @Input() container = 'body';

  @Input() outsideEsc = true;

  /**
   * Returns whether or not the daterangepicker is currently being shown
   */
  @Input()
  get isOpen(): boolean {
    return this._datepicker.isShown;
  }

  set isOpen(value: boolean) {
    this.isOpen$.next(value);
  }

  /**
   * Emits an event when the daterangepicker is shown
   */
  /* tslint:disable-next-line: no-any*/
  @Output() onShown: EventEmitter<any>;
  /**
   * Emits an event when the daterangepicker is hidden
   */
  /* tslint:disable-next-line: no-any*/
  @Output() onHidden: EventEmitter<any>;

  _pValue: Date[];
  isOpen$: BehaviorSubject<boolean>;
  isDestroy$: Subject<void>;

  /**
   * Initial value of daterangepicker
   */
  @Input()
  set pValue(value: Date[]) {
    if (this._pValue === value) {
      return;
    }
    this._pValue = value;
    this.pValueChange.emit(value);
  }

  /**
   * Config object for daterangepicker
   */
  @Input() pConfig: Partial<pDaterangepickerConfig>;
  /**
   * Indicates whether daterangepicker's content is enabled or not
   */
  @Input() isDisabled: boolean;
  /**
   * Minimum date which is available for selection
   */
  @Input() minDate: Date;
  /**
   * Maximum date which is available for selection
   */
  @Input() maxDate: Date;
  /**
   * Date custom classes
   */
  @Input() dateCustomClasses: DatepickerDateCustomClasses[];
  /**
   * Disable specific days, e.g. [0,6] will disable all Saturdays and Sundays
   */
  @Input() daysDisabled?: number[];
  /**
   * Disable specific dates
   */
  @Input() datesDisabled: Date[];

  /**
   * Enable specific dates
   */
  @Input() datesEnabled: Date[];
  /**
   * Emits when daterangepicker value has been changed
   */
  @Output() pValueChange: EventEmitter<Date[]> = new EventEmitter();

  protected _subs: Subscription[] = [];

  private _datepicker: ComponentLoader<pDaterangepickerContainerComponent>;
  private _datepickerRef: ComponentRef<pDaterangepickerContainerComponent>;

  constructor(public _config: pDaterangepickerConfig,
              private  _elementRef: ElementRef,
              private  _renderer: Renderer2,
              _viewContainerRef: ViewContainerRef,
              cis: ComponentLoaderFactory) {
    this._datepicker = cis.createLoader<pDaterangepickerContainerComponent>(
      _elementRef,
      _viewContainerRef,
      _renderer
    );
    Object.assign(this, _config);
    this.onShown = this._datepicker.onShown;
    this.onHidden = this._datepicker.onHidden;
    this.isOpen$ = new BehaviorSubject(this.isOpen);
  }

  ngOnInit(): void {
    this.isDestroy$ = new Subject();
    this._datepicker.listen({
      outsideClick: this.outsideClick,
      outsideEsc: this.outsideEsc,
      triggers: this.triggers,
      show: () => this.show()
    });
    this.setConfig();
  }

  ngOnChanges(changes: SimpleChanges): void {
    if (!this._datepickerRef || !this._datepickerRef.instance) {
      return;
    }

    if (changes.minDate) {
      this._datepickerRef.instance.minDate = this.minDate;
    }

    if (changes.maxDate) {
      this._datepickerRef.instance.maxDate = this.maxDate;
    }

    if (changes.datesDisabled) {
      this._datepickerRef.instance.datesDisabled = this.datesDisabled;
    }

    if (changes.datesEnabled) {
      this._datepickerRef.instance.datesEnabled = this.datesEnabled;
    }

    if (changes.daysDisabled) {
      this._datepickerRef.instance.daysDisabled = this.daysDisabled;
    }

    if (changes.isDisabled) {
      this._datepickerRef.instance.isDisabled = this.isDisabled;
    }

    if (changes.dateCustomClasses) {
      this._datepickerRef.instance.dateCustomClasses = this.dateCustomClasses;
    }
  }

  ngAfterViewInit(): void {
    this.isOpen$.pipe(
      filter(isOpen => isOpen !== this.isOpen),
      takeUntil(this.isDestroy$)
    )
      .subscribe(() => this.toggle());
  }

  /**
   * Opens an element’s datepicker. This is considered a “manual” triggering of
   * the datepicker.
   */
  show(): void {
    if (this._datepicker.isShown) {
      return;
    }

    this.setConfig();

    this._datepickerRef = this._datepicker
      .provide({ provide: pDatepickerConfig, useValue: this._config })
      .attach(pDaterangepickerContainerComponent)
      .to(this.container)
      .position({ attachment: this.placement })
      .show({ placement: this.placement });

    // if date changes from external source (model -> view)
    this._subs.push(
      this.pValueChange.subscribe((value: Date[]) => {
        this._datepickerRef.instance.value = value;
      })
    );

    // if date changes from picker (view -> model)
    this._subs.push(
      this._datepickerRef.instance.valueChange
        .pipe(
          filter((range: Date[]) => range && range[0] && !!range[1])
        )
        .subscribe((value: Date[]) => {
          this.pValue = value;
          this.hide();
        })
    );
  }

  /**
   * Set config for daterangepicker
   */
  setConfig() {
    this._config = Object.assign(
      {},
      this._config,
      this.pConfig,
      {
        value: this._pValue,
        isDisabled: this.isDisabled,
        minDate: this.minDate || this.pConfig && this.pConfig.minDate,
        maxDate: this.maxDate || this.pConfig && this.pConfig.maxDate,
        daysDisabled: this.daysDisabled || this.pConfig && this.pConfig.daysDisabled,
        dateCustomClasses: this.dateCustomClasses || this.pConfig && this.pConfig.dateCustomClasses,
        datesDisabled: this.datesDisabled || this.pConfig && this.pConfig.datesDisabled,
        datesEnabled: this.datesEnabled || this.pConfig && this.pConfig.datesEnabled,
        ranges: this.pConfig && this.pConfig.ranges
      }
    );
  }

  /**
   * Closes an element’s datepicker. This is considered a “manual” triggering of
   * the datepicker.
   */
  hide(): void {
    if (this.isOpen) {
      this._datepicker.hide();
    }
    for (const sub of this._subs) {
      sub.unsubscribe();
    }

    if (this._config.returnFocusToInput) {
      this._renderer.selectRootElement(this._elementRef.nativeElement).focus();
    }
  }

  /**
   * Toggles an element’s datepicker. This is considered a “manual” triggering
   * of the datepicker.
   */
  toggle(): void {
    if (this.isOpen) {
      return this.hide();
    }

    this.show();
  }

  ngOnDestroy(): void {
    this._datepicker.dispose();
    this.isOpen$.next(false);
    if (this.isDestroy$) {
      this.isDestroy$.next();
      this.isDestroy$.complete();
    }
  }
}