import { RecordingContent } from './../../../interfaces/boxes';
import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-box-recording',
  templateUrl: './box-recording.component.html',
  styleUrls: ['./box-recording.component.css']
})
export class BoxRecordingComponent {
  _recording: RecordingContent;
  startTime: Date;
  endTime: Date;

  @Input() set recording(value: RecordingContent) {
    this._recording = value;
    this.startTime = new Date(value.device_recording.start_time.value);
    this.endTime = new Date(value.device_recording.end_time.value);
  }

  /**
 * Returns a string representing a date or date range;
 * @param _date1 start date
 * @param _date2 end date
 */
  formatDateRange(_date1: Date, _date2: Date): string {
    const date1 = new Date(_date1);

    const monthNames = ['January', 'February', 'March', 'April', 'May', 'June',
      'July', 'August', 'September', 'October', 'November', 'December'
    ];

    const result = `${monthNames[date1.getMonth()].slice(0, 3)} ${date1.getDate()}`;

    if (!!_date2) {
      const date2 = new Date(_date2);

      const equalDates =
        date1.getDate() === date2.getDate() &&
        date1.getMonth() === date2.getMonth() &&
        date1.getFullYear() === date2.getFullYear();

      if (equalDates) {
        return result + ', ' + date1.getFullYear();
      } else {
        return `${result} - ${monthNames[date2.getMonth()].slice(0, 3)} ${date2.getDate()}, ${date2.getFullYear()}`;
      }
    }

    return result + ', ' + date1.getFullYear();
  }

}