class TimeDate {
  constructor() {
    this._timeDateButton = document.querySelector("#time-date");
    this._timeLabel = document.querySelector("#time-date #time-label");
    this._dateLabel = document.querySelector("#time-date #date-label");
    this._passForm = document.querySelector("#pass-form");
    this._init();
  }

  _updateTimeDate() {
    let date = theme_utils.get_current_localized_date();
    let time = theme_utils.get_current_localized_time();

    this._dateLabel.innerText = date;
    this._timeLabel.innerText = time;
  }

  _setTimer() {
    this._updateTimeDate();
    setInterval(() => {
      this._updateTimeDate();
    }, 1000);
  }

  _setButtons() {
    this._timeDateButton.addEventListener("click", (ev) => {
      this.toggleTimeDate();
    });
    this._passForm.addEventListener("keydown", (ev) => {
      if (ev.keyCode == 27) {
        this.toggleTimeDate();
      }
    });
  }

  async toggleTimeDate() {
    this._timeDateButton.blur();
    this._passForm.blur();
    if (this._timeDateButton.classList.contains("hide")) {
      this._passForm.classList.add("hide");
      await wait(300);
      this._timeDateButton.classList.remove("hide");
      await wait(100);
      this._timeDateButton.focus();
    } else {
      this._timeDateButton.classList.add("hide");
      await wait(300);
      this._passForm.classList.remove("hide");
    }
  }

  _init() {
    this._setTimer();
    this._setButtons();
  }
}