
// passwordWrapp()
function passwordWrapp() {

   function Password(parent=document.body, open=false) {

      const passField = document.createElement('input')

      const checkBox = document.createElement('input')
      checkBox.type = 'checkbox'

      parent.append(passField)
      parent.append(checkBox)

      this.setValue = (newValue) => {
         passField.value = newValue
      }
      this.getValue = () => passField.value

      this.setOpen = (newOpen) => {
         open = newOpen
         
         if (open === true) {
            checkBox.checked = true
            passField.type = 'text'
         } else if (open === false) {
            checkBox.checked = false
            passField.type = 'password'
         }
      }
      this.setOpen(open)

      this.getOpen = () => checkBox.checked


      passField.oninput = () => {
         if (typeof this.onChange === 'function') {
            this.onChange(this.getValue())
         }      
      }

      checkBox.oninput = () => {
         if (this.getOpen() === true) {
            this.setOpen(true)
         } else {
            this.setOpen(false)
         }
         if (typeof this.onOpenChange === 'function') {
            this.onOpenChange(this.getOpen())
         } 
      }
   }

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


// loginFormWrapp2()
function loginFormWrapp2() {

   function LoginForm(parent=document.body, open=false) {

      const loginField = document.createElement('input')
      loginField.type = 'text'

      const passField = document.createElement('input')

      const checkBox = document.createElement('input')
      checkBox.type = 'checkbox'

      const button = document.createElement('button')
      button.innerText = 'Подтвердить'
      button.disabled = true

      parent.append(loginField)
      parent.append(passField)
      parent.append(checkBox)
      parent.append(button)

      this.setLoginValue = (newValue) => {
         loginField.value = newValue
      }
      this.getLoginValue = () => loginField.value


      this.setPassValue = (newValue) => {
         passField.value = newValue
      }
      this.getPassValue = () => passField.value


      this.setOpen = (newOpen) => {
         open = newOpen         
         if (open === true) {
            checkBox.checked = true
            passField.type = 'text'
         } else if (open === false) {
            checkBox.checked = false
            passField.type = 'password'
         }
      }
      this.setOpen(open)
      this.getOpen = () => checkBox.checked

      loginField.oninput = () => {
         if (this.getLoginValue() && this.getPassValue()) {
            button.disabled = false
         } else {
            button.disabled = true
         }
         if (typeof this.onLoginChange === 'function') {
            this.onLoginChange(this.getLoginValue())
         }      
      }

      passField.oninput = () => {
         if (this.getLoginValue() && this.getPassValue()) {
            button.disabled = false
         } else {
            button.disabled = true
         }
         if (typeof this.onPassChange === 'function') {
            this.onPassChange(this.getPassValue())
         }      
      }

      checkBox.oninput = () => {
         if (this.getOpen() === true) {
            this.setOpen(true)
         } else {
            this.setOpen(false)
         }
         if (typeof this.onOpenChange === 'function') {
            this.onOpenChange(this.getOpen())
         } 
      }
   }

   let loginForm = new LoginForm(document.body)
}


// loginFormConstructorWrapp2()
function loginFormConstructorWrapp2() {

   function LoginForm(parent=document.body, open=false) {

      const loginField = document.createElement('input')
      loginField.type = 'text'

      const passField = document.createElement('input')

      const checkBox = document.createElement('input')
      checkBox.type = 'checkbox'

      const button = document.createElement('button')
      button.innerText = 'Подтвердить'

      parent.append(loginField)
      parent.append(passField)
      parent.append(checkBox)
      parent.append(button)


      this.setLoginValue = (newValue) => {
         loginField.value = newValue
      }
      this.getLoginValue = () => loginField.value


      this.setPassValue = (newValue) => {
         passField.value = newValue
      }
      this.getPassValue = () => passField.value


      this.setOpen = (newOpen) => {
         open = newOpen         
         if (open === true) {
            checkBox.checked = true
            passField.type = 'text'
         } else if (open === false) {
            checkBox.checked = false
            passField.type = 'password'
         }
      }
      this.setOpen(open)
      this.getOpen = () => checkBox.checked


      let btnState = true
      this.setBtn = (newValue=btnState) => {
         btnState = newValue
         if (this.getLoginValue() && this.getPassValue()) {
            btnState = false
         } else {
            btnState = true
         }
         button.disabled = btnState
      }
      this.setBtn()
      this.getBtn = () => button.disabled


      this.makeCallback = (name, content) => {
         if (typeof name === 'function') {
            name(content)
         } 
      }


      loginField.oninput = () => {
         this.setBtn()
         this.makeCallback(this.onLoginChange, this.getLoginValue())     
      }

      passField.oninput = () => {
         this.setBtn()
         this.makeCallback(this.onPassChange, this.getPassValue())     
      }

      checkBox.oninput = () => {
         if (this.getOpen() === true) {
            this.setOpen(true)
         } else {
            this.setOpen(false)
         }
         this.setBtn()
         this.makeCallback(this.onOpenChange, this.getOpen())
      }

      button.onclick = () => {
         this.makeCallback(this.onBtnClick, 'click')
      }
   }

   let loginForm = new LoginForm(document.body)

   loginForm.onLoginChange = data => console.log(data)
   loginForm.onPassChange = data => console.log(data)
   loginForm.onBtnClick = click => console.log(click)
}


// passwordVerifyWrapp2()
function passwordVerifyWrapp2() {

   function LoginForm(parent=document.body, open=false) {

      const loginField = document.createElement('input')
      loginField.type = 'text'

      const passField = document.createElement('input')
      const passField2 = document.createElement('input')

      const checkBox = document.createElement('input')
      checkBox.type = 'checkbox'

      const button = document.createElement('button')
      button.innerText = 'Подтвердить'

      parent.append(loginField)
      parent.append(passField)
      parent.append(passField2)
      parent.append(checkBox)
      parent.append(button)


      this.setLoginValue = (newValue) => {
         loginField.value = newValue
      }
      this.getLoginValue = () => loginField.value


      this.setPassValue = (newValue) => {
         passField.value = newValue
      }
      this.getPassValue = () => passField.value

      this.setPassValue2 = (newValue) => {
         passField2.value = newValue
      }
      this.getPassValue2 = () => passField2.value

      this.setOpen = (newOpen) => {
         open = newOpen 
         checkBox.checked = open
         if (open === true) {
            passField.type = 'text'
            passField2.style.display = 'none'
         } else if (open === false) {
            passField.type = 'password'
            passField2.style.display = 'inline'
            passField2.type = 'password'
         }
      }
      this.setOpen(open)
      this.getOpen = () => checkBox.checked

      let btnState = true
      this.setBtn = (newValue=btnState) => {
         btnState = newValue
         if (this.getOpen() ? this.getLoginValue() && this.getPassValue() : 
               this.getLoginValue() && this.getPassValue() && this.getPassValue() === this.getPassValue2()) {
            btnState = false
         } else {
            btnState = true
         }
         button.disabled = btnState
      }
      this.setBtn()
      this.getBtn = () => button.disabled



      this.makeCallback = (name, content) => {
         if (typeof name === 'function') {
            name(content)
         } 
      }


      loginField.oninput = () => {
         this.setBtn()
         this.makeCallback(this.onLoginChange, this.getLoginValue())     
      }

      passField.oninput = () => {
         this.setBtn()
         this.makeCallback(this.onPassChange, this.getPassValue())     
      }

      passField2.oninput = () => {
         this.setBtn()
         this.makeCallback(this.onPass2Change, this.getPassValue2())     
      }

      checkBox.oninput = () => {
         if (this.getOpen() === true) {
            this.setOpen(true)
         } else {
            this.setOpen(false)
         }
         this.setBtn()
         this.makeCallback(this.onOpenChange, this.getOpen())
      }

      button.onclick = () => {
         this.makeCallback(this.onBtnClick, 'click')
      }
   }

   let loginForm = new LoginForm()
}


formWrapp()
function formWrapp() {
   function Form(el, data, okCallback, cancelCallback){
      let formBody = document.createElement('div')
      let okButton = document.createElement('button')
      okButton.innerHTML = 'OK'
   
      let cancelButton = document.createElement('button')
      cancelButton.innerHTML = 'Cancel'
   
      formBody.innerHTML = '<h1>тут будет форма после перервы</h1>'
      const table = document.createElement('table')
      formBody.append(table)

      if (typeof okCallback === 'function'){
          formBody.appendChild(okButton);
          okButton.onclick = (e) => {
              console.log(this)
              this.okCallback(e)
          }
      }
   
      if (typeof cancelCallback === 'function'){
          formBody.appendChild(cancelButton);
          cancelButton.onclick = cancelCallback
      }
            
      let inputCreators = {
         String(key, value, oninput){
             let input = document.createElement('input')
             input.type = 'text'
             input.placeholder = key
             input.value       = value
             input.oninput     = () => oninput(input.value)
             return input
         },
         Boolean(key, value, oninput){
             let input = document.createElement('input')
             input.type = 'checkbox'
             input.checked     = value
             input.oninput     = () => oninput(input.checked)
             return input
         },
         Date(key, value, oninput){
             let input = document.createElement('input')
             input.type = 'datetime-local'
             // при преобразовании объекта к строке смещается часовой пояс на нулевой, выражение ниже восстанавливает текущий
             input.value       = new Date(value - (new Date()).getTimezoneOffset() * 60 * 1000).toISOString().slice(0,-1)
             input.oninput     = () => oninput(new Date(input.value))
             return input
         },
         Number(key, value, oninput){
            let input = document.createElement('input')
            input.type = 'text'
            input.placeholder = key
            input.value       = value
            input.oninput     = () => oninput(input.value)
            return input
        },
      }


      el.appendChild(formBody)
      for (const [key, value] of Object.entries(data)) {
         const tr = document.createElement('tr')
         table.append(tr)

         const th = document.createElement('th')
         th.innerText = key
         tr.append(th)

         const td = document.createElement('td')
         tr.append(td)
  
         
         const input = inputCreators[value.constructor.name](key, value, (valueOfInput) => {
            if (key in this.validators) {
               let valid = this.validators[key](valueOfInput,key,data,input)
               console.log(valid)
               if (valid === true) {
                  data[key] = valueOfInput
                  tdErr.innerText = ''
                  input.style.color = 'black'
               } else if (typeof valid === 'string') {
                  tdErr.innerText = valid
                  input.style.color = 'red'
               }
            } else {
               data[key] = valueOfInput
            }
         })
         // input.value = value
         tr.append(input)
         // input.oninput = () => {
         //    data[key] = input.value
         // }

         const tdErr = document.createElement('td')
         tr.append(tdErr)
      }
   
   
      this.okCallback     = okCallback
      this.cancelCallback = cancelCallback
   
      this.data           = data
      this.validators     = {}
   }
   
   
   let form = new Form(formContainer, {
      name: 'Anakin',
      surname: 'Skywalker',
      married: true,
      birthday: new Date((new Date).getTime() - 86400000 * 30*365)
   }, () => console.log('ok'),() => console.log('cancel') )
   form.okCallback = () => console.log('ok2')

   form.validators.surname = (value, key, data, input) => value.length > 2 && 
                                                       value[0].toUpperCase() == value[0] &&
                                                      !value.includes(' ') ? true : 'Wrong name'
   console.log(form)


   // fetch('https://open.er-api.com/v6/latest/USD')
   // .then(res => res.json())
   // .then(data => {
   //    currencyRates = data.rates
   //    let rates = new Form(formContainer, currencyRates, () => console.log('ok'),() => console.log('cancel') )
   //    rates.okCallback = () => console.log('ok2') 
   // })
}





