import {
  ComponentRef, Directive, ElementRef, EventEmitter, Input, OnChanges,
  OnDestroy, OnInit, Output, Renderer2, SimpleChanges, ViewContainerRef
} from '@angular/core';

import { ComponentLoader, ComponentLoaderFactory } from 'mirra-ui/component-loader';

import { Subscription } from 'rxjs';

import { pDatepickerConfig } from './p-datepicker.config';
import { pDatepickerInlineConfig } from './p-datepicker-inline.config';
import { pDatepickerInlineContainerComponent } from './themes/p/p-datepicker-inline-container.component';
import { DatepickerDateCustomClasses } from './models';

@Directive({
  selector: 'p-datepicker-inline',
  exportAs: 'pDatepickerInline'
})
export class pDatepickerInlineDirective implements OnInit, OnDestroy, OnChanges {
  _pValue: Date;
  /**
   * Initial value of datepicker
   */
  @Input()
  set pValue(value: Date) {
    if (this._pValue === value) {
      return;
    }
    this._pValue = value;
    this.pValueChange.emit(value);
  }

  /**
   * Config object for datepicker
   */
  @Input() pConfig: Partial<pDatepickerInlineConfig>;
  /**
   * Indicates whether datepicker 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 dates
   */
  @Input() datesEnabled: Date[];
  /**
   * Enable specific dates
   */
  @Input() datesDisabled: Date[];
  /**
   * Emits when datepicker value has been changed
   */
  @Output() pValueChange: EventEmitter<Date> = new EventEmitter();

  protected _subs: Subscription[] = [];

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

  constructor(
    public _config: pDatepickerInlineConfig,
    private _elementRef: ElementRef,
    _renderer: Renderer2,
    _viewContainerRef: ViewContainerRef,
    cis: ComponentLoaderFactory
  ) {
    // todo: assign only subset of fields
    Object.assign(this, this._config);
    this._datepicker = cis.createLoader<pDatepickerInlineContainerComponent>(
      _elementRef,
      _viewContainerRef,
      _renderer
    );
  }

  ngOnInit(): void {
    this.setConfig();

    // 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.subscribe((value: Date) => {
        this.pValue = value;
      })
    );
  }

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

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

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

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

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

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

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

  /**
   * Set config for datepicker
   */
  setConfig(): void {
    if (this._datepicker) {
      this._datepicker.hide();
    }

    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,
      dateCustomClasses: this.dateCustomClasses || this.pConfig && this.pConfig.dateCustomClasses,
      datesDisabled: this.datesDisabled || this.pConfig && this.pConfig.datesDisabled,
      datesEnabled: this.datesEnabled || this.pConfig && this.pConfig.datesEnabled
    });


    this._datepickerRef = this._datepicker
      .provide({provide: pDatepickerConfig, useValue: this._config})
      .attach(pDatepickerInlineContainerComponent)
      .to(this._elementRef)
      .show();
  }

  ngOnDestroy(): any {
    this._datepicker.dispose();
  }
}