export const formInputChangeEventListener = (id: string) => {
  try {
    if (id) {
      setTimeout(() => {
        // select all the input in the form
        // const inputs: any = document.querySelectorAll(`#${id} input`)
        const form: any = document.querySelectorAll(`#${id}`)

        let list = []
        if (form && form.length) {
          list = form[0]
        }
        if (list && list.length) {
          for (const i of list) {
            i.dataset.originalValue = i.value || ''

            // input for switch
            if (i.className.includes('el-switch__input')) {
              i.dataset.originalValue = i.checked
            }

            i.addEventListener('input', (e: any) => {
              listener(e, i)
            })

            i.addEventListener('focusout', (e: any) => {
              listener(e, i, false)
            })
          }
        }
      }, 200)
    }
  } catch (err) {
    // console.log(err)
  }
}

export function listener(e: any, i: any, allowEmpty = true) {
  const currentValue = e.target?.value || e.value || ''

  // for focusout event, if original is '' and current value also ''
  // remove the touched: true
  if (
    !allowEmpty &&
    i.dataset.originalValue === currentValue &&
    i.dataset.originalValue === ''
  ) {
    delete i.dataset.touched
    return
  }

  // if the value change, set the input as touched
  if (i.dataset && 'originalValue' in i.dataset) {
    if (i.dataset.originalValue !== currentValue || !i.dataset.originalValue) {
      i.dataset.touched = true
    } else {
      delete i.dataset.touched
    }

    // to check switch input changes
    if (i.className.includes('el-switch__input')) {
      if (e.checked !== i.dataset.originalValue) {
        i.dataset.touched = true
      }
    }
  }
}

export const checkIsFormTouched = (): boolean => {
  let prompt = false
  try {
    const form: any = document.querySelectorAll('form')

    let list = []
    if (form && form.length) {
      list = form[0]
    }
    if (list && list.length) {
      for (const i of list) {
        if (i.dataset && i.dataset.touched) {
          prompt = true
          break
        }
      }
    }
  } catch (err) {
    // console.log(err)
  }

  return prompt
}