export class Picker {
	constructor(parentID, spriteSheet, ranges, style, selected = null, clickEvent){
		this.parentID = parentID
		this.selected = selected;
		this.buttons = []
		const buttonBar = document.getElementById(parentID);

		for(let i=0;i < ranges[1]-ranges[0];i++) {
		let span = document.createElement('span')
			span.className = `button ${style}`
			const n = i + ranges[0]
			span.appendChild(spriteSheet[n]);
			buttonBar.appendChild(span);
			span.no = i;

			span.addEventListener('click', e => {
					this.select(e.target.no);
					if (clickEvent instanceof Function) {
					clickEvent()
					}
			});
			this.buttons.push(span)
		};
		if (typeof selected ==="number") {
			this.select(selected)
		}
	}
	select(number) {
		const target = this.buttons[number]
		this.selected = number
		document.getElementById(this.parentID).querySelectorAll('.button').forEach(item => {
			item.style ="";
			item.active ="false";
		})
		target.style = "background: #4CAF50;"
		target.active = "true"
	}

}

export function destroy(parentID) {
	const buttonBar = document.getElementById(parentID);
	while (buttonBar.lastChild) {
		buttonBar.removeChild(buttonBar.lastChild)
	}
}