import * as mpd from "./lib/mpd.js";

let node;
let inputs = {};
const prefix = "cyp";

function loadFromStorage(key, def) {
	return localStorage.getItem(`${prefix}-${key}`) || def;
}

function saveToStorage(key, value) {
	return localStorage.setItem(`${prefix}-${key}`, value);
}

function load() {
	let theme = loadFromStorage("theme", "dark");
	inputs.theme.value = theme;
	setTheme(theme);

	let color = loadFromStorage("color", "dodgerblue");
	inputs.color.forEach(input => {
		input.checked = (input.value == color);
		input.parentNode.style.color = input.value;
	});
	setColor(color);
}

function setTheme(theme) {
	saveToStorage("theme", theme);
	document.documentElement.dataset.theme = theme;
}

function setColor(color) {
	saveToStorage("color", color);
	document.documentElement.dataset.color = color;
}

async function setVolume(volume) {
	mpd.command(`setvol ${volume}`);
}

export async function notifyVolume(volume) {
	inputs.volume.value = volume;
}

export async function activate() {}

export function init(n) {
	node = n;

	inputs.theme = n.querySelector("[name=theme]");
	inputs.color = Array.from(n.querySelectorAll("[name=color]"));
	inputs.volume = n.querySelector("[name=volume]");

	load();

	inputs.theme.addEventListener("change", e => setTheme(e.target.value));
	inputs.color.forEach(input => {
		input.addEventListener("click", e => setColor(e.target.value));
	});

	inputs.volume.addEventListener("input", e => setVolume(e.target.valueAsNumber));
}