// メニューを取得
const menu = document.querySelector('.menu')
// drawerを取得
const drawer = document.querySelector('.drawer')

// メニューをクリックした時に
menu.addEventListener('click', () => {
  // drawerにclass onをつける。すでについている場合ははずす
  drawer.classList.toggle('on')
})

// クリックするタグを全部取得
const questions = Array.from(document.querySelectorAll('.q'))

questions.forEach((el) => {
  // クリックした時の処理を追加
  el.addEventListener('click', () => {
    // クリックした時に次のタグにonをつける。既についている場合は外す。
    el.nextElementSibling.classList.toggle('on')
  })
})

// .slider-itemを取得、そのままだとNodeListなのでArrya.fromで配列に変更
const sliderItems = Array.from(document.querySelectorAll('.slider-item'))
// 切り替えspeed 3000ms
const speed = 3000

// 初期どこにいるか0はじまり on がついている位置を初期値とする
let currentNum = sliderItems.indexOf(document.querySelector('.slider-item.on'))

// num番目を表示する
const selectItem = (num) => {
  currentNum = num
  
  // numがスライド以上だった場合は0に戻る
  if(sliderItems.length <= num) {
    currentNum = 0
  }
  
   // onがついているタグを全て一旦消す
  sliderItems.forEach((el) => {
    el.classList.remove('on')
  })

   // currentNum番目にonをつける
  sliderItems[currentNum].classList.add('on')
}

// speed ミリ秒でselectItemを実行。現在の位置 + 1した値を引数で渡す
setInterval(() => {
  selectItem(currentNum + 1)
}, speed)

// data-modalが付いているタグを全て取得
const modalActions = document.querySelectorAll('[data-modal]')
// .modalが付いているタグを全て取得
const modals = document.querySelectorAll('.modal')
// .closeが付いているタグを全て取得
const closes = document.querySelectorAll('.modal-close')

// クリックする要素についての処理
// クリックした時にdata-modal-contentの値を取得し、その文字列のidの要素にonをつける
modalActions.forEach((action) => {
  // data-modal-contentの中身を取得
  const id = action.dataset.modalContent
  // 上で取得した文字列をidで取得する
  const modalContent = document.querySelector('#' + id)
  // クリックした時に取得した要素にonをつける
  action.addEventListener('click', () => {
    modalContent.classList.add('on')
  })
})

// modalのコンテンツの外をクリックしした時に閉じるように
modals.forEach((modal) => {
  modal.addEventListener('click', (e) => {
     // クリックした位置のタグがコンテンツ外だったらonを外す
    if(e.target === modal) {
      modal.classList.remove('on')
    } 
  })
})

// 閉じるボタン
closes.forEach((close) => {
  close.addEventListener('click', () => {
      // 親をたどって、最も近い.modalを取得
    const modal = close.closest('.modal')
    if(modal) {
        // modalのonを削除
      modal.classList.remove('on')
    } 
  })
})