//password
function Password(parent, open=false) {
    let _isVisible = open
    let _value = ''
    let input = document.createElement('input')
    input.placeholder = 'password'
    let wrapper = document.createElement('div')
    let btn = document.createElement('button')
    btn.innerText = 'Hide/Show'

    this.getHTMLElement = function() {
        return input
    }

    this.getValue = function() {
        return _value
    }

    this.setValue = function(newValue) {
        _value = newValue
        input.value = _value
    }

    this.setOpen = function(bool) {
        _isVisible = bool
        let _type = _isVisible? 'text' : 'password'
        input.setAttribute('type', `${_type}`)
    } 

    this.getOpen = function() {
        return _isVisible
    }

    this.onChange = function(event) {
        _value = event.target.value
    }

    this.onOpenChange = function(openSetter) {
        openSetter(!_isVisible)
    }

    input.addEventListener('input', this.onChange)

    btn.addEventListener('click', () => {
        this.onOpenChange(this.setOpen)
    })

    wrapper.setAttribute('class', 'Password')
    this.setOpen(open)

    wrapper.append(input, btn)
    parent.append(wrapper)
}

let pass = new Password(document.body, true)

//check if Password constructor works
pass.setValue('hello world')
pass.setOpen(false)
console.log(pass.getOpen())
console.log(pass.getValue())
window.setTimeout(()=> {
    console.log('old value:', pass.getValue())
    pass.setValue('YOU CAN SEE ME!')
    pass.setOpen(true)
}, 5000)

//_login form
function Login (parent) {
    let _value = ''
    let input = document.createElement('input')
    input.type = 'text'
    input.placeholder = 'login'
    input.style.display = 'block'
    parent.append(input)

    this.getHTMLElement = function() {
        return input
    }

    this.getValue = function() {
        return _value
    }

    this.setValue = function(newValue) {
        _value = newValue
        input.value = _value
    }

    this.onChange = function(event) {
        _value = event.target.value
    }

    input.addEventListener('input', this.onChange)
}


//loginForm Constructor
function loginForm(parent, heading='loginForm Constructor') {
    let form = document.createElement('div')
    form.id = 'loginForm'
    form.style.border = '5px double black'
    form.style.width = 'fit-content'
    form.style.textAlign = 'center'
    form.style.padding = '15px'
    form.style.margin = '15px'

    let h2 = document.createElement('h2')
    h2.innerText = heading
    form.append(heading)

    let _login = new Login(form)
    let _password = new Password(form)

    let login_btn = document.createElement('button')
    login_btn.innerText = 'Log in'
    login_btn.disabled = true

    form.append(login_btn)
    for(let item of form.children) {
        item.style.margin = '10px'
    }

    this.getLogin = function() {
        return _login.getValue()
    }

    this.getPassword = function() {
        return _password.getValue()
    }

    this.isPasswordOpened = function() {
        return _password.getOpen()
    }

    this.setPasswordOpened = function(bool) {
        _password.setOpen(bool)
    }

    this.setLogin = function(newLogin) {
        _login.setValue(newLogin)
        checkFields()
    }

    this.setPass = function(newPass) {
        _password.setValue(newPass)
        checkFields()
    }

    function checkFields() {
        if (_login.getValue() && _password.getValue()) {
            login_btn.disabled = false
        } else {
            login_btn.disabled = true
        }
    }

    _login.getHTMLElement().addEventListener('input', checkFields)
    _password.getHTMLElement().addEventListener('input', checkFields)

    parent.append(form)
}

let form = new loginForm(document.body)

form.setLogin('default_user')
form.setPass('pass example', true)

window.setTimeout(()=> {
    console.log(form.getPassword())
    console.log('before open', form.isPasswordOpened())
    form.setPasswordOpened(true)
    console.log('after open', form.isPasswordOpened())
    console.log(form.getLogin())
}, 5000)