import { ID } from "../../util.js";
export class Picker {
	constructor(parentID, spriteSheet, ranges, style, selected = null, clickEvent) {
		this.parentID = parentID;
		this.selected = selected;
		this.buttons = [];
		const buttonBar = ID(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;
		ID(this.parentID).querySelectorAll('.button').forEach(item => {
			item.style = "";
			item.active = "false";
		});
		target.style = "background: #4CAF50;";
		target.active = "true";
	}

}

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