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

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

export enum TimeSelectorTypes {
  Day,
  Month,
  Year
}
export enum TimeDirectionTypes {
  Prev,
  Next
}
export enum Months {
  January = 1,
  February,
  March,
  April,
  May,
  June,
  July,
  August,
  September,
  October,
  November,
  December
}

@Component({
  selector: 'rd-time-selector',
  template: `
    <span>
      <span style="margin-right: 10px; margin-bottom: 20px;" *ngIf="type == TimeSelectorTypes.Day">
        <span style="cursor: pointer; width: 15px; font-weight: bold; color: #63799D" (click)="navigateDay(TimeDirectionTypes.Prev)"><i style="font-size: 20px" class="fas fa-angle-left"></i></span>
        <span style="font-size: 16px; font-weight: normal; cursor: default; color: #63799D;vertical-align:text-bottom"> {{selectedDay}} </span>
        <span style="cursor: pointer; width: 15px; font-weight: bold; color: #63799D" (click)="navigateDay(TimeDirectionTypes.Next)"><i style="font-size: 20px" class="fas fa-angle-right"></i></span>
      </span>
      <span style="margin-right: 10px; margin-bottom: 20px;" *ngIf="type != TimeSelectorTypes.Year">
        <span style="cursor: pointer; width: 15px; font-weight: bold; color: #63799D" (click)="navigateMonth(TimeDirectionTypes.Prev)"><i style="font-size: 20px" class="fas fa-angle-left"></i></span>
        <span style="font-size: 16px; font-weight: normal; cursor: default; color: #63799D;vertical-align:text-bottom"> {{translateEn(Months[selectedMonth])}} </span>
        <span style="cursor: pointer; width: 15px; font-weight: bold; color: #63799D" (click)="navigateMonth(TimeDirectionTypes.Next)"><i style="font-size: 20px" class="fas fa-angle-right"></i></span>
      </span>
      <span style="margin-right: 10px; margin-bottom: 20px;">
        <span style="cursor: pointer; width: 15px; font-weight: bold; color: #63799D" (click)="navigateYear(TimeDirectionTypes.Prev)"><i style="font-size: 20px" class="fas fa-angle-left"></i></span>
        <span style="font-size: 16px; font-weight: normal; cursor: default; color: #63799D;vertical-align:text-bottom"> {{selectedYear}} </span>
        <span style="cursor: pointer; width: 15px; font-weight: bold; color: #63799D" (click)="navigateYear(TimeDirectionTypes.Next)"><i style="font-size: 20px" class="fas fa-angle-right"></i></span>
      </span>
    </span>`,
  providers: [provider]
})
export class InputTimeSelector extends InputBase implements OnChanges {

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

  @Input('rd-type') type: TimeSelectorTypes = TimeSelectorTypes.Month;

  selectedDay: number = 1;
  selectedYear: number;
  selectedMonth: number;

  Months = Months;
  TimeDirectionTypes = TimeDirectionTypes;
  TimeSelectorTypes = TimeSelectorTypes;
  translateEn = RdLib.localization.translateEn;

  ngOnChanges() {
    if (this.selectedDate) {
      var modelHasDate = true;
      if (!RdLib.typeOperations.longToString(this.selectedDate, null)) {
        this.error("Invalid Date");
        return;
      }
    }
    else {
      modelHasDate = false;
      this.selectedDate = RdLib.typeOperations.dateToLong(new Date(), this.type == TimeSelectorTypes.Month ? 'month' : 'day');
    }

    this.setTimeDetails();

    if (modelHasDate) this.setDate();
    else this.changes(this.setDate());
  }

  navigateYear(direction) {
    if (direction == TimeDirectionTypes.Prev) this.selectedYear--;
    else this.selectedYear++;

    this.changes(this.setDate());
  }

  navigateMonth(direction) {
    if (direction == TimeDirectionTypes.Prev) this.selectedMonth--;
    else this.selectedMonth++;

    this.changes(this.setDate());
  }

  navigateDay(direction) {
    if (direction == TimeDirectionTypes.Prev) this.selectedDay--;
    else this.selectedDay++;

    this.changes(this.setDate());
  }

  private changes(selectedDate) {
    this.modelChange.emit(selectedDate);
    this.changeEvent.emit(selectedDate);
  }

  setDate() {
    this.selectedDate = RdLib.typeOperations.dateToLong(new Date(this.selectedYear, (this.selectedMonth - 1), this.type == TimeSelectorTypes.Month ? 1 : this.selectedDay));
    this.setTimeDetails();

    return this.selectedDate;
  }

  setTimeDetails() {
    this.selectedYear = RdLib.typeOperations.longToDate(this.selectedDate).getFullYear();
    this.selectedMonth = RdLib.typeOperations.longToDate(this.selectedDate).getMonth() + 1;
    this.selectedDay = RdLib.typeOperations.longToDate(this.selectedDate).getDate();
  }
}