// interaction

const primaryNav = document.querySelector('nav')
const menuItem = document.querySelector('#menuItem')
const content = document.querySelectorAll('.content')

// TODO: (create voice class per button)
let menuVoices = []

const subMenu = (activePage) => {
  let menu = document.querySelector(`\#${activePage} \.subMenu`)
  if (menu) {
    return menu
  } else {
    return null
  }
}

const showContent = (section) => {
  for (let sect of content) {
    if (c.dataset.link == sect.id) {
      sect.className = 'content visible'
    } else if (!c.dataset.link) {
      sect.className = 'content'
    } else {
      sect.className = 'content'
    }
  }
}

for (let c of primaryNav.children) {
  // TODO: (create voice class per button)
  menuVoices[c.dataset.link] = new Synth(audioEngine)
  menuVoices[c.dataset.link].gain.connect(masterGain)

  c.addEventListener('click', () => {
    menuVoices[c.dataset.link].mod()

    for (let _c of primaryNav.children) {
      if (c === _c && c.dataset.link != '~') {
        c.className = 'active'

        if (subMenu(c.dataset.link)) {
          for (let s of subMenu(c.dataset.link).children) {
            s.addEventListener('click', () => {
              console.log(`clicked : ${s.dataset.link}`)
            })
          }
        }
      } else {
        _c.className = ''
      }
    }

    for (let sect of content) {
      if (c.dataset.link == sect.id) {
        sect.className = 'content visible'
      } else if (!c.dataset.link) {
        sect.className = 'content'
      } else {
        sect.className = 'content'
      }
    }
  })

  c.addEventListener('mouseenter', () => {
    menuItem.innerHTML = c.dataset.link
    menuItem.className = 'active'
    menuVoices[c.dataset.link].noteOn()
  })

  c.addEventListener('mouseout', () => {
    menuItem.className = 'inactive'
    menuVoices[c.dataset.link].noteOff()
  })

  menuItem.addEventListener('transitionend', () => {
    if (menuItem.className == 'inactive') {
      menuItem.innerHTML = ''
    }
  })
}