import {Component, Input, OnInit} from '@angular/core';
import {ScheduleInfo, ScheduleService} from "../../../api";

@Component({
  selector: 'app-active-schedule',
  templateUrl: './active-schedule.component.html',
  styleUrls: ['./active-schedule.component.css']
})
export class ActiveScheduleComponent implements OnInit{
  activeSchedule: ScheduleInfo | undefined

  startTime: number = 0;
  currentTime: number = 0;
  displayTime: string = "00:00:00"

  constructor(private scheduleService: ScheduleService) {


  }


  updateTime() {
    const now = Date.now();
    const elapsed = this.activeSchedule != undefined ? now - this.startTime + this.currentTime : this.currentTime;
    this.displayTime = this.formatTime(elapsed);
    console.log("Update!")
    requestAnimationFrame(() => this.updateTime());
  }

  formatTime(milliseconds: number): string {
    const seconds = Math.floor((milliseconds / 1000) % 60);
    const minutes = Math.floor((milliseconds / 1000 / 60) % 60);
    const hours = Math.floor(milliseconds / 1000 / 60 / 60);
    return `${this.padNumber(hours)}:${this.padNumber(minutes)}:${this.padNumber(seconds)}`;
  }
  padNumber(num: number): string {
    return num < 10 ? `0${num}` : `${num}`;
  }

  ngOnInit(): void {
    this.scheduleService.schedulesActiveGet().subscribe({
      next: resp => {
        this.activeSchedule = resp;
        this.startTime = new Date(this.activeSchedule.startTime).getTime();
        this.updateTime()
      }
    })
  }


}