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

    const img = document.createElement('img')
    img.src = '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
        }
        value = newValue
        img.style.transform = `rotate(${getAngle()}deg)`

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

    this.getValue = () => value


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

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

    
    //перевод радианов в градусы и смещение в координаты от 0 до 360 градусов
    const toDeg = rad => ((rad * 180) / Math.PI + 360 + 90) % 360

    let prevMouseAngle = null

    img.onmousedown = e => {
        const y = e.layerY - img.height/2
        const x = e.layerX - img.width/2
        prevMouseAngle = toDeg(Math.atan2(x,y))

        e.preventDefault()
    }
    img.onmousemove = e => {
        if (prevMouseAngle === null) return
        const y = e.layerY - img.height/2
        const x = e.layerX - img.width/2
        let currentAngle = toDeg(Math.atan2(x,y))
        let moveAngleDiff = (currentAngle - prevMouseAngle)

        this.setValue(value - moveAngleDiff/ratio)
        prevMouseAngle = currentAngle

        console.log()
    }
    img.onmouseout = img.onmouseup = e => {
        prevMouseAngle = null
    }


    this.setValue(value)
}
// console.log(volumeControl.getValue())
// setTimeout(() => volumeControl.setValue(80), 2000)

function setRgb() {
    color.style.backgroundColor = `rgb(${red.getValue()}, ${green.getValue()}, ${blue.getValue()})`
}
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


function setVolume() {
    audio.volume = volumeControl.getValue()/100
}
const volumeControl  = new Control(container2, {value:100, min:0, max:100})
    volumeControl.onchange = setVolume
    audio.onvolumechange = () => {
        // console.log(audio.volume)
        volumeControl.setValue(audio.volume*100)
    }

audio.onloadedmetadata = function() {
    function setTime() {    
        audio.currentTime = playControl.getValue()
    }
    const playControl  = new Control(container2, {min:0, max:audio.duration})
        playControl.onchange = setTime
    // setInterval(() => {
    //     playControl.setValue(audio.currentTime)
    // }, 10000);
    // audio.ontimeupdate = (e) => {
    //     e.preventDefault()
    //     console.log(audio.currentTime)
    // }
}




