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

    const img = document.createElement('img')
    img.src   = '1@3x.png'
    el.append(img)
    this.getValue = () => value;
    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
        if ("onchange" in this && typeof this.onchange === "function"){
            this.onchange(value);
        }
        img.style.transform = `rotate(${getAngle()}deg)`;
    }
    img.onmousewheel = e => {
        const {deltaY} = e

        const newValue = value + deltaY*wheelSpeed
        this.setValue(newValue)

        e.preventDefault()
    }
    img.onclick = e => {
        console.log(e, img.width)
        const {layerX} = e
        const {width} = img
        if (layerX > width/2){
            this.setValue(value +step)
        }
        else {
            this.setValue(value -step)
        }
        //найти координаты относительно img
        //найти, левее или правее центра происходит клик
        //если правее - сделать setValue(value +step)
        //если левее - сделать setValue(value -step)
    }
    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(y, x))

        // console.log(x,y, getAngle(), prevMouseAngle,  prevMouseAngle - getAngle())
        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(y, x))
        let moveAngleDiff = (currentAngle - prevMouseAngle)
        this.setValue(value + moveAngleDiff/ratio)
        prevMouseAngle = currentAngle
    }
    img.onmouseout = img.onmouseup = () => {
        prevMouseAngle = null
    }
    this.setValue(value);
}

const volumeControl  = new Control(container1, {value: 50})
volumeControl.onchange = value => console.log(value)
console.log(volumeControl.getValue());

// RGB
let test = document.querySelector('.test');
function setRGB (){
    test.style.backgroundColor = 'rgb(' + red.getValue() + ',' + green.getValue() + ',' + blue.getValue() + ')';
}
const red  = new Control(container2, {min: 0, max: 255})
red.onchange = setRGB;
const green  = new Control(container2, {min: 0, max: 255})
green.onchange = setRGB;
const blue  = new Control(container2, {min: 0, max: 255})
blue.onchange = setRGB;

// Music
let blockMusic = document.querySelector('#myPlayer');
const music  = new Control(container3, {min: 0, max: 100})
music.onchange = (value) => {blockMusic.volume = value / 100};

//Password
function Password(parent, open){
    let value = '';
    let passWordForm = document.createElement('input');
    let buttonForm = document.createElement('button');
    buttonForm.textContent = 'invisible';
    passWordForm.placeholder = 'password';
    parent.append(passWordForm);
    parent.append(buttonForm);

    buttonForm.onclick = () => {
        if ("onOpenChange" in this && typeof this.onOpenChange === "function"){
            this.onOpenChange(!!open);
        }
        if (open === true) {
            buttonForm.textContent = 'visible';
            open = false;
            let hidden = '';
            for (let i = 0; i < value.length; i++) {
                hidden += '*';
            }
            passWordForm.value = hidden;
        }
        else if (open === false) {
            buttonForm.textContent = 'invisible';
            open = true;
            passWordForm.value = value;
        }
    }
    passWordForm.oninput = () => {
        value = passWordForm.value;
        if ("onChange" in this && typeof this.onChange === "function"){
            this.onChange(value);
        }
    }

    this.setValue = newValue => {
        if (newValue.length > 4 && newValue.length < 20){
            value = newValue;
            passWordForm.value = value;
        }
    }
    this.getValue = () => value;
    this.setOpen = bool => {
        if (typeof bool === 'boolean') {
            open = bool;
            buttonForm.onclick;
        }
    }
    this.getOpen = () => !!open;
}
// let p = new Password(document.body, true)
// p.onChange = data => console.log(data)
// p.onOpenChange = open => console.log(open)
// p.setValue('qwerty')
// console.log(p.getValue())
// p.setOpen(false)
// console.log(p.getOpen())

// LoginForm
function LoginForm () {
    let login = document.createElement('input');
    login.placeholder = 'login';
    login.oninput = () => disable();

    let pass = new Password(containerForm, true);
    pass.setValue = pass.value;
    pass.onChange = () => disable();

    let btn = document.createElement('button');
    btn.disabled = true;
    btn.textContent = 'Submit';

    containerForm.append(login);
    containerForm.append(btn);

    function disable(data) {
        btn.disabled = !(pass.getValue() !== '' && login.value !== '');
    }
}
let loginForm = new LoginForm();

//LoginForm Constructor
function LoginFormConstructor() {
    let login = document.createElement('input');
    login.placeholder = 'login';
    login.oninput = () => disable();

    let pass = new Password(containerForm, true);
    pass.setValue = pass.value;
    pass.onChange = () => disable();

    let btn = document.createElement('button');
    btn.disabled = true;
    btn.textContent = 'Submit';

    containerForm.append(login);
    containerForm.append(btn);

    function disable(data) {
        btn.disabled = !(pass.getValue() !== '' && login.value !== '');
    }
    this.getValueLogin = () => login.value;
    this.setValueLogin = newValue => {
        if (newValue.length > 4 && newValue.length < 20){
            login.value = newValue;
        }
    };
    this.getValuePassword = () => pass.getValue();
    this.setValuePassword = newValue => pass.setValue(newValue);
    this.getOpenPassword = () => pass.getOpen();
    this.setOpenPassword = bool => pass.setOpen(bool);
}

//Password Verify
let pass1 = new Password(containerForm1, true);
let pass2 = new Password(containerForm1, true);

let btn = document.createElement('button');
btn.textContent = 'Checked';
btn.disabled = true;
containerForm1.append(btn);

let secondPass = document.createElement('input');
secondPass.type = 'password';
secondPass.style.visibility = 'hidden';
containerForm1.append(secondPass);

function check(){
    btn.disabled = pass1.getValue() !== pass2.getValue();
}
btn.onclick = () => {
    if (btn.disabled === false) {
        if (pass1.getOpen() === false && pass2.getOpen() === false) {
            secondPass.value = pass1.getValue();
            secondPass.style.visibility = 'visible';
        }
        else if(pass1.getOpen() === true && pass2.getOpen() === true) {
            secondPass.value = pass1.getValue();
            secondPass.style.visibility = 'hidden';
        }
    }
}
pass1.onChange = () => check();
pass2.onChange = () => check();