// Helpers

function appendElement(parentElement, tag) {
  element = document.createElement(tag)
  parentElement.appendChild(element)
  return element
}
  
function appendText(parentElement, text) {
  element = document.createTextNode(text)
  parentElement.appendChild(element)
  return element
}

// Select tonality

tonalities_b = ['C', 'D♭', 'D', 'E♭', 'E', 'F', 'G♭', 'G', 'A♭', 'A', 'B♭', 'B']
tonalities_s = ['C', 'C♯', 'D', 'D♯', 'E', 'F', 'F♯', 'G', 'G♯', 'A', 'A♯', 'B']

function getRoot(c) {
  if (c.indexOf('♯') > -1 || c.indexOf('♭') > -1) {
    return c.substring(0, 2)
  } else {
    return c[0]
  }
}

function getShift(t1, t2) {
  return tonalities_b.indexOf(getRoot(t2)) - tonalities_b.indexOf(getRoot(t1))
}

function applyShift(tonalities, t1, s) {
  let root = getRoot(t1)
  const mode = t1.substring(root.length)
  const index = tonalities_b.indexOf(root) > -1 ? tonalities_b.indexOf(root) : tonalities_s.indexOf(root)
  root = tonalities[(index + s + tonalities.length) % tonalities.length]
  return `${root}${mode}`
}

const node = document.getElementById('g-Tonality')
if (node !== null) {
  let tonality = node.innerText
  mode = tonality[tonality.length - 1] == 'm' ? 'm' : ''

  select = document.createElement('select')
  select['name'] = 'tonality'
  tonalities_b.forEach(t => {
    option = appendElement(select, 'option')
    option['value'] = t
    if (tonality == `${t}${mode}`) {
      option['selected'] = true
    }
    appendText(option, `${t}${mode}`)
  })
  select.onchange = (e) => {
    const shift = getShift(tonality, e.target.value)
    tonality = e.target.value
    tonalities = tonality === 'F' || tonality.indexOf('♭') > -1 ? tonalities_b : tonalities_s
    document.querySelectorAll('.g-Chords__Chord').forEach(chord => {
      if (chord.innerText !== '%') {
        chord.innerText = applyShift(tonalities, chord.innerText, shift)
      }
    })
  }
  node.parentNode.replaceChild(select, node)
}