function Control(
	el,
	{
		value = 10,
		min = 0,
		max = 100,
		minAngle = -90,
		maxAngle = 90,
		wheelSpeed = 0.01,
		step = 1,
	} = {}
) {
	const img = document.createElement("img");
	img.src = "img/1@3x.png";
	el.append(img);

	const ratio = (maxAngle - minAngle) / (max - min);
	const getAngle = () => (value - min) * ratio + minAngle;

	this.setValue = (newValue) => {
		if (newValue < min) {
			newValue = min;
		}

		if (newValue > max) {
			newValue = max;
		}

		value = newValue;

		if (typeof this.onchange === "function") {
			this.onchange(value);
		}

		img.style.transform = `rotate(${getAngle()}deg)`;
	};

	this.getValue = () => value;

	img.onmousewheel = (e) => {
		const { deltaY } = e;
		e.preventDefault();
		this.setValue(value + deltaY * wheelSpeed);
	};

	img.onclick = (e) => {
		const { layerX } = e;
		console.log(e, layerX);
		if (layerX > img.width / 2) this.setValue(value + step);
		else this.setValue(value - step);
	};

	this.setValue(value);
}

function setRGB() {
	let a = red.getValue(value * wheelSpeed);
	let b = green.getValue(value * wheelSpeed);
	let c = blue.getValue(value * wheelSpeed);

	let rgbDone = (div.style.background = `rgb(${a}, ${b}, ${c})`);
	return console.log(rgbDone);
}

const red = new Control(container1, { min: 0, max: 255 });
red.onchange = setRGB();
const green = new Control(container1, { min: 0, max: 255 });
green.onchange = setRGB();
const blue = new Control(container1, { min: 0, max: 255 });
blue.onchange = setRGB();

const volumeControl = new Control(container1, { value: 50 });
volumeControl.onchange = (value) => {
	audio.volume = value / 100;
	console.log("ON CHANGE", value);
};

const audio = document.createElement("audio");
audio.setAttribute("controls", "");
audio.src = "/media/klychko.mp3";
document.body.append(audio);

const div = document.createElement("div");
div.style.width = "300px";
div.style.height = "300px";
document.body.append(div);