import { Component, Input, Output, EventEmitter, ElementRef, ExistingProvider, forwardRef, OnChanges, AfterViewInit, ViewChild } from '@angular/core';
import { RdLib } from "../../base/rdLib";
import { AppComponent } from "../../app.component";
import { InputBase } from './inputBase';
import { CustomDatePopover } from './inputDatePopover';

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

export enum ArilDateTimePickerZoomLevel {
  Minute,
  Hour,
  Day,
  Month,
  Year
}

export enum CustomDates {
  Current = "current()",
  Today = "today()",
  Yesterday = "yesterday()",
  Tomorrow = "tomorrow()",
  StartHour = "startHour()",
  EndOfHour = "endOfHour()",
  StartOfWeek = "startOfWeek()",
  OneWeekAgo = "oneWeekAgo()",
  StartOfMonth = "startOfMonth()",
  EndOfMonth = "endOfMonth()",
  OneMonthAgo = "oneMonthAgo()",
  StartOfYear = "startOfYear()",
  StartOfPeriod = "startOfPeriod()"
}

@Component({
  selector: "rd-input-date-bts",
  template: `
    <div class="input-group date">
      <ng-container *ngIf="groupDate">
        <input type="text" id="datetimepicker" class="form-control m-input" [attr.value]="selectedDateStr" [attr.disabled]="disabled" readonly
          [ngStyle]="{height: '26px', cursor: disabled ? 'not-allowed' : 'text',
                     'border-color': (formKey && formKeyIsValid && required) ? formInput?.isValid() ? '#ebedf2' : '#d9534f66' : null}" />
        <div class="input-group-append">
          <span class="input-group-text" style="padding:0.55rem 0.8rem;cursor:pointer" (click)="!disabled ? container.datetimepicker('show') : null">
            <i class="la la-calendar glyphicon-th"></i>
          </span>
        </div>
      </ng-container>
      <div style="float:left" *ngIf="customDateActive">
        <input type="text" id="datetimepicker" class="form-control m-input" [attr.value]="selectedDateStr" disabled readonly *ngIf="!groupDate" 
          [ngStyle]="{height: '26px', cursor: 'text', display:'inline-block', width:'85%',
                     'border-color': (formKey && formKeyIsValid && required) ? formInput?.isValid() ? '#ebedf2' : '#d9534f66' : null}" />
        <rd-button rd-icon="fas fa-calendar-check" rd-size="small" #customDatePopover=rdPopover [rd-popover]="CustomDatePopover" (rd-popover-onDismiss)="setCustomDate($event)"
          (rd-click)="customDatePopover.open(null);container.datetimepicker('hide')" [rd-disabled]="disabled">
        </rd-button>
      </div>
      <rd-input-text #formInput [(rd-model)]="selectedDate" [rd-form-data]="formKey" [rd-form-data-isValid]="formKeyIsValid" 
        [rd-required]="required" (rd-change)="!$event ? setDate() : null" hidden *ngIf="formKey">
      </rd-input-text>
    </div>
  `,
  providers: [provider]
})
export class InputDateBootstrap extends InputBase implements OnChanges, AfterViewInit {
  constructor(private element: ElementRef) { super(); }

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

  @Input("rd-zoom-level") zoomLevel: number = ArilDateTimePickerZoomLevel.Minute;
  @Input("rd-start-view") startView: number = 2;

  @Input("rd-default") default: number;
  @Input("rd-disabled") disabled: boolean;
  @Input("rd-required") required: boolean = false;
  @Input("rd-custom-date") customDateActive: boolean = false;
  @Input("rd-group-date") groupDate: boolean = true;
  @Input("rd-form-key") formKey: string;
  @Input("rd-form-key-isValid") formKeyIsValid: boolean = true;

  @Input("rd-min") minDate: number = 19500101000000;
  @Input("rd-max") maxDate: number;

  format: string;
  level: string;
  container: any;
  selectedDateStr: string = "";

  CustomDatePopover = CustomDatePopover;

  @ViewChild("formInput") formInput;

  ngAfterViewInit() {
    this.container = this.jQuery(this.element.nativeElement).find('#datetimepicker');
    this.zoomLevelOptions();

    if (this.default) this.selectedDate = this.default;

    this.setDate();
    this.setTimePicker();
  }

  ngOnChanges(changes) {
    if (!this.container) return;

    if (changes.selectedDate) this.setDate();
    if (changes.minDate && !isNaN(this.minDate)) this.container.datetimepicker('setStartDate', RdLib.typeOperations.longToString(this.minDate, 'yyyy-MM-dd hh:mm'));
    if (changes.maxDate && !isNaN(this.maxDate)) this.container.datetimepicker('setEndDate', RdLib.typeOperations.longToString(this.maxDate, 'yyyy-MM-dd hh:mm'));
    if (changes.disabled) this.jQuery(this.container).attr("disabled", this.disabled);
    if (changes.zoomLevel || changes.startView) {
      this.zoomLevelOptions();
      this.container.datetimepicker("remove");
      this.setTimePicker();
      this.container.datetimepicker("update");
    }
  }

  ngOnDestroy() {
    this.container.datetimepicker("remove");
  }

  setDate() {
    if (this.selectedDate) {
      if (!isNaN(this.selectedDate)) {
        this.selectedDateStr = RdLib.typeOperations.longToString(this.selectedDate, this.level);
        this.changeEvent.emit(this.selectedDate);
      }
      else if (typeof this.selectedDate == "string") this.setCustomDate(this.selectedDate);
    }
    else if (this.selectedDateStr) this.container.datetimepicker("reset");
  }

  setTimePicker() {
    this.container.datetimepicker({
      pickTime: false,
      language: AppComponent.user.language,
      autoclose: true,
      weekStart: 1,
      minuteStep: 15,
      startDate: RdLib.typeOperations.longToDate(this.minDate),
      endDate: RdLib.typeOperations.longToDate(this.maxDate),
      pickerPosition: "bottom-left",
      todayBtn: true,
      clearBtn: true,
      startView: this.startView,
      minView: this.zoomLevel,
      todayHighlight: true,
      format: this.format,
      isInline: false
    });

    this.container.datetimepicker().on('changeDate', function (e) {
      if (e.date && e.date.valueOf())
        var dateValue = RdLib.typeOperations.dateToLong(e.date, this.level);
      else dateValue = null;

      this.selectedDate = dateValue;
      this.onChange(dateValue);
    }.bind(this));

    this.container.datetimepicker().on('show', (e) => {  // when dateTimePicker showed customDate clear
      if (this.customDateActive && Object.values(CustomDates).includes(e.target.defaultValue)) {
        let formatedCurrentDateLong = RdLib.typeOperations.dateToLong(new Date(), this.level);
        this.container.datetimepicker('update', RdLib.typeOperations.longToDate(formatedCurrentDateLong));
      }
    })
  }

  zoomLevelOptions() {
    switch (this.zoomLevel) {
      case ArilDateTimePickerZoomLevel.Minute:
        this.format = "dd/MM/yyyy hh:ii";
        this.startView = 2;
        this.level = "minute";
        break;
      case ArilDateTimePickerZoomLevel.Hour:
        this.format = "dd/MM/yyyy hh";
        this.startView = 2;
        this.level = "hour";
        break;
      case ArilDateTimePickerZoomLevel.Day:
        this.format = "dd/MM/yyyy";
        this.startView = 2;
        this.level = "day";
        break;
      case ArilDateTimePickerZoomLevel.Month:
        this.format = "MM/yyyy";
        this.startView = 3;
        this.level = "month";
        break;
      case ArilDateTimePickerZoomLevel.Year:
        this.format = "yyyy";
        this.startView = 4;
        this.level = "year";
        break;
      default:
        this.format = "dd/MM/yyyy hh:ii";
        this.startView = 2;
        this.level = "minute";
        break;
    }
  }

  setCustomDate(date) {
    this.selectedDate = date;
    this.selectedDateStr = date;
    this.jQuery(this.container).val(!!date.match("=") ? date : RdLib.localization.translateEn(date));
    this.onChange(date);
  }
}