const redValue = document.getElementById("red");
const greenValue = document.getElementById("green");
const blueValue = document.getElementById("blue");

function Control(el, {value=0, 
    min=0, 
    max=100, 
    minAngle=0,
    maxAngle=360, 
    wheelSpeed=0.05,
    step=1}={}){

const img = document.createElement('img')
img.src   = './assets/1@3x.png'
el.append(img)

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

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

if (typeof this.onchange === 'function' && newValue !== value)
this.onchange(newValue)

value = newValue

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

img.onmousewheel = (event) => {
const {deltaY} = event
//console.log(deltaY)
this.setValue(value  + deltaY * wheelSpeed)
event.preventDefault()
}

img.onclick = (event) => {
const {layerX} = event
if (layerX < img.width/2)
this.setValue(value  -step)
else
this.setValue(value  +step)
event.preventDefault()
}

const event2Deg  = event => {
const {layerX, layerY} = event
const {width, height}  = img
const x = layerX - width/2
const y = height/2 - layerY 

//console.log(x, y, width, height)

return ((Math.atan2(y, x) / (2 * Math.PI)) * 360 + 360) % 360
}

let prevAngle = null

img.onmousedown = (event) => {
prevAngle = event2Deg(event)
}

img.onmousemove = (event) => {
if (prevAngle === null) return

const currentAngle = event2Deg(event) 
const deltaValue = (prevAngle - currentAngle) / ratio 
//console.log(prevAngle - currentAngle, deltaValue)
this.setValue(value  +deltaValue)

prevAngle = currentAngle
event.preventDefault()
}

img.onmouseup = (event) => {
prevAngle = null
}


this.setValue(value)
this.getValue = () => value
}

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

////сделать три крутилки для RGB
////и обновлять цвет блока/фона блока при вращении любой из трех
//setTimeout(() => volumeControl.setValue(80), 2000)

// }

function setRGB(){
redValue.value = red.getValue().toFixed();
greenValue.value = green.getValue().toFixed();
blueValue.value = blue.getValue().toFixed();

document.body.style.backgroundColor = `rgb(${red.getValue()}, ${green.getValue()}, ${blue.getValue()})`;
//какой то блок, которому меняем цвет через rgba и цвета крутилок
}

const volumeControl  = new Control(container2, {value: 75, 
                                min: 0, 
                                max: 100, 
                                minAngle: -90, maxAngle: 90})
console.log(volumeControl);

volumeControl.onchange = setVolume;
const audio = document.getElementById("audio");

function setVolume(){
    audio.volume = (volumeControl.getValue())/100
    console.log( audio.volume)
    
}

//пришейте к нему тэг audio для громкости