// Password

// function Password(parent, 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())

// Напишите функцию конструктор Password, которая будет в родительском элементе создавать поле ввода для пароля и кнопку/иконку/чекбокс, 
// который будет переключать режим просмотра пароля в поле ввода.
// Параметры:
// * parent - родительский элемент
// * open - стартовое состояние
// Методы:
// * setValue/getValue - задают/читают значения
// * setOpen/getOpen - задают/читают открытость текста в поле ввода
// Колбэки (функции обратного вызова, данные изнутри объекта):
// * onChange - запускается по событию oninput в поле ввода, передает текст наружу
// * onOpenChange - запускается по изменению состояния открытости пароля

function Password(parent, open) {
  let value = ''
  let pass = document.createElement('input')
  pass.id = 'password'
  let check = document.createElement('input')
  check.id = 'checkbox'
  check.type = 'checkbox'
  parent.append(pass, check)
  check.onchange = () => {
    this.setOpen(check.checked)
  }
  //добавить pass oninput, который из pass забирает value, запускает setValue
  this.getValue = function () {
    return value
  }
  this.setValue = function (value) {
    // передает value в onchange если он есть
  }
  this.getOpen = function () {
    return open
  }
  this.setOpen = function (newOpen) {
    open = newOpen
    pass.type = open ? 'text' : 'password'
    check.checked = open
    if (typeof this.onOpenChange === 'function') {
      this.onOpenChange(open)
    }
  }
  this.setOpen(open)
}

let p = new Password(document.body, true)
document.getElementById('password').placeholder = 'Enter password'

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())

const hr1 = document.createElement('hr')
document.body.appendChild(hr1)

// LoginForm

// С помощью предыдущего кода Password сделайте форму логина, кнопка в которой будет активна только если и login и пароль не пусты

function LoginForm(parent, open) {
  let value = ''

  // login

  let log = document.createElement('input')
  log.id = 'login'
  log.placeholder = 'Enter login'

  // password

  let pass = document.createElement('input')
  pass.id = 'password'
  pass.placeholder = 'Enter password'

  // checkbox

  let check = document.createElement('input')
  check.id = 'checkbox'
  check.type = 'checkbox'

  // submit

  let submit = document.createElement('input')
  submit.id = 'submit'
  submit.type = 'submit'
  submit.disabled = true;

  parent.append(log, pass, check, submit)

  check.onchange = () => {
    this.setOpen(check.checked)
  }
  this.getValue = function () {
    return value
  }
  this.setValue = function (value) {
  }
  this.getOpen = function () {
    return open
  }
  this.setOpen = function (newOpen) {
    open = newOpen
    pass.type = open ? 'text' : 'password'
    check.checked = open
    if (typeof this.onOpenChange === 'function') {
      this.onOpenChange(open)
    }
  }
  this.setOpen(open)

  let isFulfilled = function () {
    return log && log.value && pass && pass.value ? true : false;
  }

  let setSubmit = function () {
    if (isFulfilled()) {
      submit.disabled = false;
    } else {
      submit.disabled = true;
    }
  }

  setSubmit();

  pass.onkeyup = () => {
    setSubmit();
  }

  log.onkeyup = () => {
    setSubmit();
  }
}

let lF = new LoginForm(document.body, true)

lF.onChange = data => console.log(data)
lF.onOpenChange = open => console.log(open)

lF.setValue('qwerty')
console.log(lF.getValue())

lF.setOpen(false)
console.log(lF.getOpen())

const hr2 = document.createElement('hr')
document.body.appendChild(hr2)

// LoginForm Constructor

// оформите предыдущую задачу как функцию-конструктор. Продумайте и предусмотрите геттеры, сеттеры и колбэки.

function LoginFormConstructor(parent, open) {

  // login

  let log = document.createElement('input')
  log.id = 'login'
  log.placeholder = 'Enter login'

  // password

  let pass = document.createElement('input')
  pass.id = 'password'
  pass.placeholder = 'Enter password'

  // checkbox

  let check = document.createElement('input')
  check.id = 'checkbox'
  check.type = 'checkbox'

  // submit

  let submit = document.createElement('input')
  submit.id = 'submit'
  submit.type = 'submit'
  submit.disabled = true

  parent.append(log, pass, check, submit)

  // form

  let form = {
    log: log.value,
    pass: pass.value,
    check: check.checked,
    submitDisabled: submit.disabled
  }

  // fields check

  let isFulfilled = function () {
    return log && log.value && pass && pass.value ? true : false
  }

  let setSubmit = function () {
    if (isFulfilled()) {
      submit.disabled = false
    } else {
      submit.disabled = true
    }
    form.submitDisabled = submit.disabled
    if (typeof this.onChange === 'function') {
      this.onChange(form)
    }
  }

  pass.onkeyup = () => {
    setSubmit()
    form.pass = pass.value;
    if (typeof this.onChange === 'function') {
      this.onChange(pass.value);
    }
    if (typeof this.onChange === 'function') {
      this.onChange(form);
    }
  }

  log.onkeyup = () => {
    setSubmit()
    form.log = log.value;
    if (typeof this.onChange === 'function') {
      this.onChange(log.value);
    }
    if (typeof this.onChange === 'function') {
      this.onChange(form);
    }
  }

  // checkbox check

  check.onchange = () => {
    form.check = check.checked;
    if (check.checked) {
      pass.type = 'text';
    } else {
      pass.type = 'password';
    };

    if (typeof this.onChange === 'function') {
      this.onChange(check.checked);
    }
    if (typeof this.onChange === 'function') {
      this.onChange(form);
    }
  }

  // getter

  this.getValue = function () {
    return form;
  }

  // setter

  this.setValue = function (newLogVal, newPassVal, newCheckVal) {

    if (typeof newLogVal === 'string') {
      log.value = newLogVal;
      log.onkeyup();
    };
    if (typeof newPassVal === 'string') {
      pass.value = newPassVal;
      pass.onkeyup();
    };
    if (typeof newCheckVal === 'boolean') {
      check.disabled = newCheckVal;
      check.onchange();
    };
  }
}

let loginForm = new LoginFormConstructor(document.body, true)

loginForm.setValue('ObiWanKenobi', 'jediRules', false)

console.log(loginForm.getValue())

const hr3 = document.createElement('hr')
document.body.appendChild(hr3)

// Password Verify

// С помощью Password сделайте пару инпутов, которые проверяют введеный пароль (в двух полях ввода) на совпадение. 
// Кнопка должна активизироваться при совпадающих паролях. При открытом пароле второе поле вводы должно пропадать с экрана 
// Таким образом:
// * Когда Password в скрытом режиме - появляется второй инпут (<input type='password'>) с паролем в скрытом режиме
// * Когда Password в открытом режиме - второй инпут пропадат