import { Component, Input, Output, EventEmitter, ElementRef, forwardRef, ViewEncapsulation, ExistingProvider, OnInit, OnChanges } from '@angular/core';
import { InputBase } from './inputBase';
import { RdLib } from '../../base/rdLib';

const provider: ExistingProvider = { provide: InputBase, useExisting: forwardRef(() => InputDate) }

export type ZoomLevels = 'time' | 'day' | 'month' | 'year';

@Component({
  selector: "rd-input-date",
  template: `
    <div id="dxElement" style="width:100%" [style.height.px]="height"></div>
    <rd-input-select [(rd-model)]="selectedCustomDate" [rd-items]="customDates" [rd-placeholder]="translateEn('Select Custom Date')"
      (rd-modelChange)="setCustomDate(selectedCustomDate)" *ngIf="customDate">
    </rd-input-select>  
  `,
  styles: [`.dx-timeview{margin : 15px 0 0 15px !important;}.dx-timeview-clock{min-width :0 !important;background-size:115px  !important;
  }.dx-timeview-hourarrow{background-size : 5px 43px !important;}.dx-timeview-minutearrow {background-size: 5px 52px !important;}.dx-timeview > .dx-box-flex > .dx-item:first-child {max-height:170px !important;}  
  .dx-timeview-field .dx-numberbox {width:68px !important;} .dx-timeview-field > .dx-texteditor-input { padding : 2px 9px 5px !important;}.dx-popup-bottom.dx-toolbar {padding : 0 20px 4px !important;}  
  `
  ],
  providers: [provider],
  encapsulation: ViewEncapsulation.None
})
export class InputDate extends InputBase implements OnInit, OnChanges {
  constructor(private element: ElementRef) { super(); }

  @Input("rd-model") model: number;
  @Output("rd-modelChange") modelChange: EventEmitter<number> = new EventEmitter<number>();
  @Output("rd-change") changeEvent: EventEmitter<number> = new EventEmitter<number>();

  @Input("rd-warning-text") warningText: string;
  @Input("rd-default") default: number;
  @Input("rd-disabled") disabled: boolean;
  @Input("rd-readOnly") readOnly: boolean;
  @Input("rd-required") required: boolean;
  @Input("rd-height") height: number | string = "26";

  @Input("rd-min") min: number;
  @Input("rd-max") max: number;
  @Input("rd-zoom-level") zoomLevel: string = "day";
  @Input("rd-custom-date") customDate: boolean = false;

  selectedDate: Date;
  selectedCustomDate: any;
  translateEn = RdLib.localization.translateEn;
  customDates = [
    { id: 'current()', text: this.translateEn('Current') },
    { id: 'today()', text: this.translateEn('Today') },
    { id: 'yesterday()', text: this.translateEn('Yesterday') },
    { id: 'tomorrow()', text: this.translateEn('Tomorrow') },
    { id: 'startHour()', text: this.translateEn('StartOfHour') },
    { id: 'endOfHour()', text: this.translateEn('EndOfHour') },
    { id: 'startOfMonth()', text: this.translateEn('StartOfMonth') },
    { id: 'endOfMonth()', text: this.translateEn('EndOfMonth') },
    { id: 'startOfYear()', text: this.translateEn('StartOfYear') },
    { id: 'endOfYear()', text: this.translateEn('EndOfYear') },
  ]

  zoomLevelOptions = {
    type: "datetime",
    devExpressZoomLevel: "month",
    formatString: (date) => {
      this.selectedDate = date;
      return RdLib.typeOperations.dateToString(date, 'time');
    }
  };

  ngOnInit() {
    this.checkDefault();

    this.getZoomLevelOptions(this.zoomLevel);
    this.container = this.jQuery(this.element.nativeElement).find('#dxElement');
    this.container.dxDateBox({
      onValueChanged: (e) => {
        this.onChanges(e.value);
        if (e.value) this.selectedCustomDate = null;
      },
      value: RdLib.typeOperations.longToDate(this.model),
      disabled: this.disabled,
      readOnly: this.readOnly,
      acceptCustomValue: false,
      showClearButton: !this.required,
      min: this.min ? RdLib.typeOperations.longToDate(this.min) : undefined,
      max: this.max ? RdLib.typeOperations.longToDate(this.max) : undefined,
      type: this.zoomLevelOptions.type,
      displayFormat: {
        formatter: (date) => { return this.zoomLevelOptions.formatString(date) },
        parser: () => { return this.selectedDate }
      },
      maxZoomLevel: this.zoomLevelOptions.devExpressZoomLevel,
      applyValueMode: this.zoomLevel == 'time' ? "useButtons" : "instantly",
      applyButtonText: RdLib.localization.translateEn('Confirm'),
      cancelButtonText: RdLib.localization.translateEn('Cancel'),
    });
    this.dxElement = this.container.dxDateBox('instance');
    //this.updateValidator();
  }

  ngOnChanges(changes) {
    if (!this.dxElement) return;
    if (changes.required) {
      this.dxElement.option('showClearButton', !this.required);
      this.updateValidator();
    }
    if (changes.model) {
      if (this.customDate && typeof changes.model.currentValue == 'string') this.selectedCustomDate = this.model;
      else this.dxElement.option('value', RdLib.typeOperations.longToDate(this.model));
    }
    if (changes.disabled) this.dxElement.option('disabled', this.disabled);
    if (changes.readOnly) this.dxElement.option('readOnly', this.readOnly);
    if (changes.min) this.dxElement.option('min', RdLib.typeOperations.longToDate(this.min));
    if (changes.max) this.dxElement.option('max', RdLib.typeOperations.longToDate(this.max));
    if (changes.zoomLevel) {
      this.getZoomLevelOptions(this.zoomLevel);
      this.dxElement.option('type', this.zoomLevelOptions.type);
      this.dxElement.option('displayFormat', this.zoomLevelOptions.formatString);
      this.dxElement.option('maxZoomLevel', this.zoomLevelOptions.devExpressZoomLevel);
      if (this.zoomLevel == "time") this.dxElement.option("applyValueMode", "useButtons");
      else this.dxElement.option("applyValueMode", "instantly");
    }
    if (changes.min || changes.max) {
      this.customValidationRules = [{
        type: 'range',
        min: RdLib.typeOperations.longToDate(this.min),
        max: RdLib.typeOperations.longToDate(this.max),
      }];
      this.updateValidator();
    }
  }

  getZoomLevelOptions(zoomLevel: string) {
    switch (zoomLevel) {
      case "time":
        this.zoomLevelOptions = {
          type: "datetime",
          devExpressZoomLevel: "month",
          formatString: (date) => {
            this.selectedDate = date;
            return RdLib.typeOperations.dateToString(date, 'time');
          }
        }
        break;
      case "day":
        this.zoomLevelOptions = {
          type: "date",
          devExpressZoomLevel: "month",
          formatString: (date) => {
            this.selectedDate = date;
            return RdLib.typeOperations.dateToString(date, 'day');
          }
        }
        break;
      case "month":
        this.zoomLevelOptions = {
          type: "datetime",
          devExpressZoomLevel: "month",
          formatString: (date) => {
            this.selectedDate = date;
            return RdLib.typeOperations.dateToString(date, 'time');
          },

        }
        break;
      case "year":
        this.zoomLevelOptions = {
          type: "date",
          devExpressZoomLevel: "decade",
          formatString: (date) => {
            this.selectedDate = date;
            return RdLib.typeOperations.dateToString(date, 'year');
          }
        }
        break;
      default:
        this.error("Invalid zoom level type: '" + zoomLevel + "'");
        break;
    }
  };

  onChanges = function (value) {
    value = RdLib.typeOperations.dateToLong(value, this.zoomLevel);
    this.modelChange.emit(value);
    if (this.model != value) this.changeEvent.emit(value);
  };

  setCustomDate(date) {
    if (date) {
      this.dxElement.option('disabled', true);
      this.modelChange.emit(date);
    }
    else this.dxElement.option('disabled', false);
  }
}