const generateToneButton = document.querySelector('#generate-tone > button:nth-of-type(1)')
const generateNoteButton = document.querySelector('#generate-tone > button:nth-of-type(2)')
const playButton = document.querySelector('#generate-tone > button:nth-of-type(3)')
const stopButton = document.querySelector('#generate-tone > button:nth-of-type(4)')
const toneDisplay = document.querySelector('#generate-tone dd')
const minInput = document.querySelector('#generate-tone input:nth-of-type(1)')
const maxInput = document.querySelector('#generate-tone input:nth-of-type(2)')

const synth = new Tone.Synth().toDestination()

let newTone
let lowest = 'a0'
let highest = 'c8'
const notes = [
	['c'],
	['c#','db'],
	['d'],
	['d#', 'eb'],
	['e'],
	['f'],
	['f#','gb'],
	['g'],
	['g#', 'ab'],
	['a'],
	['a#', 'bb'],
	['b']
]

minInput.setAttribute('placeholder', lowest)
maxInput.setAttribute('placeholder', highest)

generateToneButton.addEventListener('click', () => {
	Tone.start()
	const minFreq = teoria.note(lowest).fq()
	const maxFreq = teoria.note(highest).fq()
	newTone = (Math.random() * (maxFreq - minFreq)) + minFreq 
	toneDisplay.innerHTML = newTone
})

generateNoteButton.addEventListener('click', () => {
	Tone.start()

	const lowOctave = parseInt(lowest.charAt(1)) * 12
	const lowNote = notes.findIndex(enharmonics => enharmonics.includes(lowest.charAt(0)))
	const highOctave = parseInt(highest.charAt(1)) * 12
	const highNote = notes.findIndex(enharmonics => enharmonics.includes(highest.charAt(0)))

	const lowPitch = lowOctave + lowNote
	const highPitch = highOctave + highNote
	const pitchSpread = highPitch - lowPitch
	const randomAddedPitches = Math.floor(Math.random() * (pitchSpread + 1) )
	const randomPitch = lowPitch + randomAddedPitches

	const randomPitchOctave = Math.floor(randomPitch / 12)
	const randomPitchNote = randomPitch % 12

	newTone = notes[randomPitchNote][0] + randomPitchOctave
	toneDisplay.innerHTML = newTone
})

playButton.addEventListener('click', ()=>{
	synth.triggerAttack(newTone)
})

stopButton.addEventListener('click', ()=>{
	synth.triggerRelease()
})

minInput.addEventListener('change', ()=>{
	lowest = minInput.value
})

maxInput.addEventListener('change', ()=>{
	highest = maxInput.value
})