import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import {Event} from "../../services/event.service";
import {MonthCalendarEvent} from "../month-calendar/month-calendar.component";

@Component({
  selector: 'app-month-calendar-event',
  templateUrl: './month-calendar-event.component.html',
  styleUrls: ['./month-calendar-event.component.scss']
})
export class MonthCalendarEventComponent implements OnInit {

  @Input()
  event: Event;

  @Output()
  onEvent = new EventEmitter<MonthCalendarEvent>();

  constructor() {
  }

  ngOnInit() {
  }

  hasTrainer() {
    return !!this.event.trainer;
  }

  formatTrainer() {
    const trainer = this.event.trainer;
    return trainer.name;
  }

  selectEvent() {
    this.onEvent.emit({
      type: 'SELECT_EVENT',
      event: this.event
    })
  }

  maySelect() {
    return this.isRegistered() ? true : this.event.hasFreeSeats;
  }

  isRegistered() {
    return this.event.registrations?.length > 0;
  }

  isDisabled() {
    return !this.isRegistered() && !this.event.hasFreeSeats;
  }

  getEventThemeClass(): string {

    const theme = this.event?.eventType?.theme;
    let styleClass = "bg-dark";
    if (this.event.deleted_at) {
      styleClass = "bg-secondary";
    } else {

      if (this.isDisabled()) {
        styleClass = "bg-secondary";
      } else {
        if (theme != null && theme.length > 0) {
          if (this.isRegistered()) {
            styleClass += " event-theme-active-" + theme;
          } else {
            styleClass += " event-theme-normal-" + theme;
          }
        } else {
          if (this.isRegistered()) {
            styleClass += " bg-primary";
          } else {
            styleClass += " bg-dark";
          }
        }
      }
    }
    return styleClass;
  }
}
