import { Component, Input, ElementRef, Output, EventEmitter, OnInit, OnChanges, AfterViewInit } from '@angular/core';
import { RdComponent } from '../../base/rdComponent';
import { AppComponent } from '../../app.component';
import { RdLib } from '../../base/rdLib';
import { ScriptLoaderService } from '../../library/script-loader.service';
import { StyleLoaderService } from '../../library/style-loader.service';
import { CalendarEventModal } from './calendarEventModal';

/**
 * Sample Events
   {
     title: "Meeting",
     allDay: true/false,
     start: "2018-11-27T10:00:00",
     end: "2018-11-27T11:00:00",
     url: "http://google.com.tr",
     className: "m-fc-event--accent m-fc-event--solid-danger"
   }
 */
export type EventModes = "update" | "create";
export interface ICalenderEventItem {
  _id: any;
  title: string;
  description: string;
  allDay?: boolean;
  start: any;
  end: any;
  url?: string;
  className: string;
}

declare const moment;

@Component({
  selector: 'rd-calendar',
  template: `
    <rd-portlet [rd-text]="calendarText" rd-icon="fas fa-calendar-alt" rd-color="blue">
      <rd-tools>
        <rd-tool rd-icon="far fa-calendar-alt" rd-animate="flash infinite" [rd-text]="iconText" (rd-click)="openEventPopup()"></rd-tool>
      </rd-tools>
      <rd-body>
        <div id="calendar"></div>
      </rd-body>
    </rd-portlet>
  `
})
export class Calendar extends RdComponent implements OnInit, OnChanges, AfterViewInit {
  constructor(
    private element: ElementRef,
    private script: ScriptLoaderService,
    private style: StyleLoaderService) {
    super();
    this.style.load(["./assets/css/fullcalendar.bundle.css"]);
    this.script.load([
      "./assets/js/fullcalendar.bundle.js",
      "./assets/js/fullcalendar.locale.tr.js",
      "./assets/js/moment.min.js",
      "./assets/js/moment-tr.js",
    ])
  }

  @Input("rd-events") events: Array<ICalenderEventItem> = [];
  @Output("rd-change") changeEvent: EventEmitter<any> = new EventEmitter<any>();

  container;
  calendarText: string = RdLib.localization.translateEn("Calendar");
  iconText: string = RdLib.localization.translateEn("Add Event");

  ngOnInit() {
    for (let item of this.events) {
      this.setClasses(item);
      this.setMomentDate(item);
    }
  }

  ngOnChanges(changes) {
    if (!this.container) return;
    if (changes.events) this.container.fullCalendar("updateEvents", this.events);
  }

  ngAfterViewInit() {
    this.container = this.jQuery(this.element.nativeElement).find('#calendar');
    this.container.fullCalendar({
      firstDay: 1, // Monday
      locale: AppComponent.user.language,
      header: {
        left: "prev, next, today",
        center: "title",
        right: "month, agendaWeek, agendaDay, listWeek"
      },
      height: "10rem",
      editable: true,
      eventLimit: true,
      navLinks: true,
      events: this.events,
      dayClick: (date) => this.container.fullCalendar("changeView", "agendaDay", date),
      eventClick: (e) => {
        if (!e.url) this.openEventPopup(e);
      },
      eventDrop: (e, dateChanges) => {
        this.changeEvent.emit(this.container.fullCalendar("clientEvents"));
      },
      eventResize: (e, dateChanges) => {
        this.changeEvent.emit(this.container.fullCalendar("clientEvents"));
      }
    });
  }

  setMomentDate(item) {
    let sDate = moment(RdLib.typeOperations.longToDate(item.start));
    let eDate = moment(RdLib.typeOperations.longToDate(item.end));

    if (item.allDay) {
      item.start = sDate.format("YYYY-MM-DD");
      if (item.end) item.end = eDate.format("YYYY-MM-DD");
    }
    else {
      item.start = sDate.format("YYYY-MM-DD") + 'T' + sDate.format("HH:mm");
      item.end = eDate.format("YYYY-MM-DD") + 'T' + eDate.format("HH:mm");
    }
  }

  setClasses(item: ICalenderEventItem) {
    let random = Math.floor(Math.random() * this.dotClasses.length);
    if (!item._id) item.className = this.dotClasses[random] + ' ' + this.bgClasses[random];
  }

  openEventPopup(event?) {
    CalendarEventModal.open()
      .onLoad(controller => {
        controller.event = event ? event : {};
        controller.mode = event ? "update" : "create";
      })
      .onDismiss((e: ICalenderEventItem) => {
        if (e) {
          this.setClasses(e);
          this.setMomentDate(e);
          if (e._id) this.container.fullCalendar("updateEvent", e);
          else this.container.fullCalendar("addEventSource", [e]);
        }
        else this.container.fullCalendar("removeEvents", [event._id]);

        this.changeEvent.emit(this.container.fullCalendar("clientEvents"));
      });
  }

  bgClasses = [
    "m-fc-event--solid-info", "m-fc-event--solid-focus", "m-fc-event--solid-warning",
    "m-fc-event--solid-danger", "m-fc-event--solid-primary", "m-fc-event--solid-accent"
  ];
  dotClasses = [
    "m-fc-event--danger", "m-fc-event--warning", "m-fc-event--info",
    "m-fc-event--primary", "m-fc-event--accent", "m-fc-event--metal"
  ];
}