class Clock {
  constructor(options) {
    this._el = $.el("#clock");
    this._delimiter = options.delimiter;
    this._twentyFourHourClock = options.twentyFourHourClock;
    this._setDate = this._setDate.bind(this);
    this._el.addEventListener("click", options.toggleHelp);
    this._start();
  }

  _setDate() {
    const now = new Date();
    let hour = now.getHours();
    if (!this._twentyFourHourClock && hour > 12) {
      hour -= 12;
    }
    let minute = now.getMinutes();
    let second = now.getSeconds();

    let month = now.getMonth() + 1; // getMonth returns a value between 0 and 11, so add 1 to get the actual month number
    let day = now.getDate();
    let year = now.getFullYear().toString().slice(-2); // Get last two digits of the full year

    const formattedHour = $.pad(hour);
    const formattedMinute = $.pad(minute);
    const formattedSecond = $.pad(second);
    const formattedMonth = $.pad(month);
    const formattedDay = $.pad(day);

    this._el.innerHTML = `${formattedMonth}${this._delimiter}${formattedDay}${this._delimiter}${year} ${formattedHour}:${formattedMinute}:${formattedSecond}`;
    this._el.setAttribute(
      "datetime",
      `${year}-${formattedMonth}-${formattedDay}T${formattedHour}:${formattedMinute}:${formattedSecond}`
    );
  }

  _start() {
    this._setDate();
    setInterval(this._setDate, 1000);
  }
}