import { Component, Output, EventEmitter, ElementRef, Input, ExistingProvider, forwardRef, OnInit, OnDestroy } from '@angular/core';
import { RdLib } from "../../base/rdLib";
import { AppComponent } from "../../app.component";
import { ScriptLoaderService } from "../../library/script-loader.service";
import { InputBase } from './inputBase';

declare const moment;

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

export class ChangeObject {
  start: number;
  end: number
}

@Component({
  selector: 'rd-date-range',
  template: `
    <span class="m-subheader__daterange" id="dateRange">
      <span class="m-subheader__daterange-label">
        <span class="m-subheader__daterange-title"></span>
        <span class="m-subheader__daterange-date m--font-brand"></span>
      </span>
      <a href="javascript:;" class="btn btn-sm btn-brand m-btn m-btn--icon m-btn--icon-only m-btn--custom m-btn--pill" style="margin-left:4px">
        <i class="la la-angle-down"></i>
      </a>
    </span>
  `,
  providers: [provider],
})
export class InputDateRange extends InputBase implements OnInit, OnDestroy {
  constructor(private element: ElementRef, private script: ScriptLoaderService) {
    super();
    this.script.load(["./assets/js/moment.min.js", "./assets/js/moment-tr.js"]);
  }

  @Input("startDate") startDate: number;
  @Input("endDate") endDate: number;
  @Input("rd-before-start-day") beforeStartDay: number = 1;
  @Output("rd-change") changeEvent: EventEmitter<ChangeObject> = new EventEmitter<ChangeObject>();

  container: any;
  rangeLocale: object = {};
  daysLocale: Array<string> = [];
  monthLocale: Array<string> = [];

  ngOnInit() {
    this.getLocales();
    this.container = this.jQuery(this.element.nativeElement).find('#dateRange');

    this.container.daterangepicker({
      opens: 'right',
      startDate: this.startDate ? moment(this.startDate, "YYYYMMDD") : moment().subtract(this.beforeStartDay, 'days'),
      endDate: this.endDate ? moment(this.endDate, "YYYYMMDD") : moment(),
      showDropdowns: true,
      showWeekNumbers: true,
      timePicker: false,
      timePickerIncrement: 1,
      timePicker12Hour: true,
      ranges: this.rangeLocale,
      buttonClasses: ['btn btn-sm'],
      applyClass: 'green',
      cancelClass: 'red',
      format: 'MM/DD/YYYY',
      separator: ' to ',
      locale: {
        applyLabel: RdLib.localization.translateEn('Apply'),
        cancelLabel: RdLib.localization.translateEn('Cancel'),
        customRangeLabel: RdLib.localization.translateEn('Custom Range'),
        daysOfWeek: this.daysLocale,
        monthNames: this.monthLocale,
        firstDay: 1
      }
    }, (start, end) => {
      this.changeEvent.emit({
        start: RdLib.typeOperations.dateToLong(start.toDate()),
        end: RdLib.typeOperations.dateToLong(end.toDate())
      });
      this.jQuery(this.container).find('span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
    });

    let now = moment();
    let yesterday = moment().subtract(this.beforeStartDay, 'days');

    this.jQuery(this.container).find('span').html(moment().subtract(this.beforeStartDay, 'days').format('MMMM D, YYYY') + ' - ' + moment().format('MMMM D, YYYY'));

    this.changeEvent.emit({
      start: RdLib.typeOperations.dateToLong(yesterday.toDate()),
      end: RdLib.typeOperations.dateToLong(now.toDate())
    });
  }

  ngOnDestroy() {
    this.container.data("daterangepicker").remove();
  }

  getLocales() {
    this.rangeLocale[RdLib.localization.translateEn("Yesterday")] = [moment().subtract(1, 'days'), moment()];
    this.rangeLocale[RdLib.localization.translateEn("Last 1 Month")] = [moment().subtract(30, 'days'), moment()];
    this.rangeLocale[RdLib.localization.translateEn("Last 3 Months")] = [moment().subtract(90, 'days'), moment()];
    this.rangeLocale[RdLib.localization.translateEn("Last 6 Months")] = [moment().subtract(180, 'days'), moment()];

    if (AppComponent.user.language == 'en') {
      this.daysLocale = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
      this.monthLocale = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
    } else {
      this.daysLocale = ["Paz", "Pts", "Sal", "Çar", "Per", "Cum", "Cts"];
      this.monthLocale = ['Ocak', 'Şubat', 'Mart', 'Nisan', 'Mayıs', 'Haziran', 'Temmmuz', 'Ağustos', 'Eylül', 'Ekim', 'Kasım', 'Aralık'];
    }
  }
}