import Tone from 'tone'
import keys from './lib/keys'
import kalimba from './lib/kalimba'
import colundi from './lib/colundi'
import { mod, browser, requestAudioContext } from './lib/util'
import { Grid, Views, HexFactory } from 'honeycomb-grid'
 
const Hex = HexFactory({
  size: 50,
	template: function(hex) {
		return `
	    <svg class='hex'>
				<polygon points="43.30127019 0 86.60254039 25 86.60254039 75 43.30127019 100 0 75 0 25"/>
			</svg>
		`
	}
})

const container = document.querySelector("#container")
const view = Views.DOM({
	container: container,
	origin: {
	  x: container.offsetWidth / 2,
		y: container.offsetHeight / 2,
	}
})

const origin = Hex(0,0,0)
const seen = {}
let perimeter = [ origin ]

for (let i = 0, len = colundi.list.length; i < len;) {
	const hex = perimeter.shift()
	const id = hexToString(hex)
	if (seen[id]) continue
	seen[id] = true
	let pair = colundi.list[i]
	const neighbors = [0,1,2,3,4,5].map((i) => Hex.neighbor(hex, i))
	perimeter = perimeter.concat(neighbors)
 	view.renderHexes([ hex ])
	const el = container.lastChild
	el.querySelector('polygon').setAttribute('fill', pair.color)
	i++
}

requestAudioContext(() => {
})

keys.listen(function(index){
	index += 20
  const freq = colundi.index(index)
  kalimba.play(freq)
})

function hexToString(hex) {
  return [hex.x, hex.y, hex.z].join("_")
}