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();
    const mute = document.getElementById("mute");

    mute.addEventListener("click", () => {
      const mutedSrc = "/assets/svg/sound-on.svg";
      const unMutedSrc = "/assets/svg/mute.svg";
      interacted = !interacted;
      interacted ? unMute() : muter();
      mute.src = interacted ? mutedSrc : unMutedSrc;

      startAudio();
      fadeInVolume();
    });

    this.fadeAndReplaceADiv("main-content", "loading-screen");
    this.fadeAndReplaceADiv("buttons", "buttons");
    this.showingWhichContent = "main-content";

    document.getElementById("menu-button").onclick = function () {
      toggleInfo();
    };
  }

  toggleInfo() {
    if (this.showingWhichContent === "main-content") {
      this.fadeAndReplaceADiv("about-content", "main-content");
      cleanUpAndRestart();
      this.showingWhichContent = "about-content";
    } else {
      this.fadeAndReplaceADiv("main-content", "about-content");
      this.showingWhichContent = "main-content";
    }
  }

  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() {
    const instrumentsKey = document.getElementById("instrument-key-div");
    this.instruments = await loadInstruments();
    const instNames = Object.keys(this.instruments);
    for (const instrument of instNames) {
      const keyDiv = document.createElement("div");
      const keySvg = document.createElement("object");
      const keyName = document.createElement("div");
      keyName.innerText = instrument.toUpperCase();
      keySvg.type = "image/svg+xml";
      keySvg.data = this.instruments[instrument].image;
      keyDiv.appendChild(keySvg);
      keyDiv.appendChild(keyName);
      keyDiv.classList.add("instrument-key");
      instrumentsKey.appendChild(keyDiv);
    }
  }
}
