"use strict";
//
// クラス----------------------------------------------
//
class Calendar {
  constructor() {
    let today = new Date();
    this.year = today.getFullYear();
    this.month = `0${today.getMonth() + 1}`.slice(-2);
  }

  prevMonth() {
    if (Number(this.month) === 1) {
      this.month = `12`;
      this.year += -1;
    } else {
      this.month = `0${Number(this.month) - 1}`.slice(-2);
    }
  }

  nextMonth() {
    if (Number(this.month) === 12) {
      this.month = `01`;
      this.year += 1;
    } else {
      this.month = `0${Number(this.month) + 1}`.slice(-2);
    }
  }
}
// ---------------------------------------------------

//
// 初回ロード-----------------------------------------
//
window.onload = init();

function init() {
  const calendar = new Calendar();
  // デフォルトで当月の年月を表示
  displayCal(calendar);
  // ローディング画面⇒メイン画面
  displayMain();

  // クリックイベント：前月を表示
  document
    .querySelector(".calendar__prev.--js")
    .addEventListener("click", function () {
      calendar.prevMonth();
      displayCalPrev(calendar);
    });
  // クリックイベント：翌月を表示
  document
    .querySelector(".calendar__next.--js")
    .addEventListener("click", () => {
      calendar.nextMonth();
      displayCalNext(calendar);
    });
}
// -------------------------------------------------------

//
// 関数---------------------------------------------------
//

// 関数：当月を表示させる
function displayCal(cal) {
  document.querySelector(
    ".calendar__container.--js"
  ).innerHTML = `<p class="calendar__date">${cal.year}年${cal.month}月</p>`;
}

// 関数：ローディング画面⇒メイン画面
function displayMain() {
  document.querySelector(".loading.--js").classList.add("--hidden");
  document.querySelector(".main.--js").classList.remove("--hidden");
}

// 関数：前月を表示させる
function displayCalPrev(cal) {
  document.querySelector(
    ".calendar__container.--js"
  ).innerHTML = `<p class="calendar__date__prev">${cal.year}年${cal.month}月</p>`;
}

// 翌月を表示させる
function displayCalNext(cal) {
  document.querySelector(
    ".calendar__container.--js"
  ).innerHTML = `<p class="calendar__date__next">${cal.year}年${cal.month}月</p>`;
}
// -----------------------------------------------------------