import { loadInstruments } from "./instruments.js";

export class Conductor {
  instruments;

  constructor() {}

  showingWhichContent;
  interacted = true;

  get instruments() {
    return this.instruments;
  }

  static setTitle() {
    const now = new Date();
    const future = new Date(now.getTime() + 59 * 1000); // 59 seconds later

    const formattedDate = `${Conductor.padZero(
      now.getDate()
    )}.${Conductor.padZero(now.getMonth() + 1)}.${now.getFullYear()}`;
    const formattedTime = `${Conductor.padZero(
      now.getHours()
    )}:${Conductor.padZero(now.getMinutes())}:${this.padZero(
      now.getSeconds()
    )}`;
    const formattedFutureTime = `${Conductor.padZero(
      future.getHours()
    )}:${Conductor.padZero(future.getMinutes())}:${Conductor.padZero(
      future.getSeconds()
    )}`;

    title.innerHTML = `${formattedDate}<span class="tab-space"></span>${formattedTime} - ${formattedFutureTime} UTC`;
  }

  showMainContent() {
    Conductor.setTitle();
    this.fadeAndReplaceADiv("main-content", "loading-screen");
  }

  fadeAndReplaceADiv(innyDivId, outtyDivId) {
    const outty = document.getElementById(outtyDivId);
    const inny = document.getElementById(innyDivId);
    outty.classList.remove("fade-in");
    outty.classList.add("fade-out");

    outty.style.display = "none";
    inny.style.display = "flex";
    inny.style.opacity = "0";
    void inny.offsetWidth;
    inny.classList.add("fade-in");
    inny.style.opacity = "1";
  }

  static padZero(num) {
    return num.toString().padStart(2, "0");
  }

  async init() {
    this.instruments = await loadInstruments();
  }
}
