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

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

  @Input()
  day: DayToDisplay;

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

  oMoment: any;

  constructor() { }

  ngOnInit() {
    if ( this.day ){
    this.oMoment = dateToMoment(this.day.date);
    }
  }

  getDayOfWeekName(){
    return this.oMoment.format('dddd');
  }

  getDateOfDay(){
    return this.oMoment.format('DD');
  }

  getMonthOfDay(){
    return this.oMoment.format('MMM');
  }

  hasEvents(){
    return this.day.active && this.day.events && this.day.events.length;
  }

  @HostBinding('class') get styleClass(){
    let styleClass = "day   text-truncate";
    // if ( !this.day.active ){
    //   styleClass += " d-none d-md-block bg-light text-muted";
    // } else {
    //   styleClass += " bg-light "
    // }
    return styleClass;
  }

  handleEvent($event){
    this.onEvent.emit($event);
  }

}
