import { Component, OnInit } from '@angular/core';
import { RdPopUp } from '../../base/rdPopUp';
import { RdLib } from '../../base/rdLib';
import { EventModes, ICalenderEventItem } from './calendar';

@Component({
  template: `
    <rd-modal>
      <rd-title *ngIf="!start">{{translateEn('Add Event')}}</rd-title>
      <rd-title *ngIf="start">{{translateEn('Update Event')}}</rd-title>
      <rd-body>
        <rd-form>
          <rd-body>
            <rd-field [rd-text]="translateEn('Title')" fontBold paddingTopZero>
              <rd-input-text [(rd-model)]="event.title" rd-form-data="title" [rd-required]="true"></rd-input-text>
            </rd-field>
            <rd-field [rd-text]="translateEn('Description')" fontBold paddingTopZero>
              <rd-input-text [(rd-model)]="event.description" rd-form-data="description"></rd-input-text>
            </rd-field>
            <rd-field [rd-text]="translateEn('Start')" fontBold paddingTopZero>
              <rd-input-date [(rd-model)]="start" rd-zoom-level="time" rd-form-data="start" [rd-required]="true"></rd-input-date>
            </rd-field>
            <rd-field [rd-text]="translateEn('End')" fontBold paddingTopZero>
              <rd-input-date [(rd-model)]="end" rd-zoom-level="time" rd-form-data="end"></rd-input-date>
            </rd-field>
            <rd-field rd-text="" fontBold paddingTopZero>
              <rd-input-bool [(rd-model)]="event.allDay" [rd-text]="translateEn('All Day')" rd-form-data="isAllDay"></rd-input-bool>        
            </rd-field>
          </rd-body>
          <rd-footer>
            <rd-submit (rd-click)="close(closeFunc())"></rd-submit>
            <rd-button [rd-text]="translateEn('Delete')" rd-icon="fas fa-trash-alt" rd-color="red" rd-size="small" (rd-confirm-popover)="$event ? close() : null" *ngIf="mode == 'update'"></rd-button>
          </rd-footer>
        </rd-form>
      </rd-body>
    </rd-modal>
  `
})
export class CalendarEventModal extends RdPopUp implements OnInit {

  mode: EventModes;
  event: ICalenderEventItem;
  start: number;
  end: number;

  translateEn = RdLib.localization.translateEn;

  ngOnInit() {
    this.start = this.event.start ? RdLib.typeOperations.dateToLong(this.event.start.utcOffset(3, true).toDate(), "time") : null;
    this.end = this.event.end ? RdLib.typeOperations.dateToLong(this.event.end.utcOffset(3, true).toDate(), "time") : null;
  }

  closeFunc() {
    this.event.start = this.start;
    this.event.end = this.end;
    return this.event;
  }
}