import { isString } from 'vally'

isString(1) // => false

const isLessThan = (num: number) => (val: any):boolean => { /* actual implementation */ }

// config.js

import {
  createConfig,
  isEmail,
  isNoneEmptyString,
  isNumberString
} from 'vally'

// Custom validator
// Because we need another parameter for our function to specify the threshold,
// we simply curry our validator function. The actual invokation to get a
// real validator function would look like this: isLessThan(10)
const isLessThan = (num: number) => (val: any): boolean => {
  if (isNumberString(val)) return false

  return parseInt(val) < num
}

// Because we only want to fetch DOM-elements via document.querySelector
// we can use the createConfig helper function to create a valid configuration.
// Therefore we specify our specs with selectors, which in turn are used to
// fetch the actual DOM nodes
const specs = [
  {
    selector: '#mail',
    validators: [
      {
        fn: isNoneEmptyString,
        errorSelector: 'mail-error',
        msg: 'Please enter a value.'
      },
      {
        fn: isEmail,
        errorSelector: 'mail-error',
        msg: 'Please enter a valid email address.'
      }
    ]
  },
  {
    selector: '#number',
    validators: [{
      fn: isNumberString,
      errorSelector: 'number-error',
      msg: 'Please enter a number.'
    }]
  },
  {
    selector: '#custom',
    validators: [
      {
        fn: isNoneEmptyString,
        errorSelector: 'custom-error',
        msg: 'Please enter a value.'
      },
      {
        fn: isLessThan(10),
        errorSelector: 'custom-error',
        msg: 'Please enter a number smaller than ten.'
      }
    ]
  }
]

export config = createConfig(specs)

// index.js

import {
  initWithBindings,
  validate
} from 'vally'

import { config } from './config'

// Our callback will recieve a result object and act on its field validations
const callback = (e: Event, { validations }: { validations: Valiations }): void => {
  validations.forEach(v => {
    const msgNode = document.getElementById(v.validator.errorSelector)

    if (v.isValid) {
      v.node.classList.remove('error')

      // Hide msg
      if (msgNode ) msgNode.classList.add('hidden')
    } else {
      v.node.classList.add('error')

      // Show error msg
      if (msgNode) {
        msgNode.classList.remove('hidden')
        msgNode.innerHTML = v.validator.msg
      }
    }
  })
}

// Create a pre-configured partially applied validate function that we can use
// on our submit button. We technically don't need to do this
// as we only need to validate on submit. But in a real-world application you might
// need to re-use your validate function
// and this makes it easier.
const validateForm = () => validate(config)

const init = () => {
  // Bind our callback to the keyup event on each individual field
  initWithBindings(config, 'keyup', callback, 100)

  // Bind our validate function to our submit button
  const btnSubmit = document.getElementById('submit')
  if (!btnSubmit) return

  btnSubmit.addEventListener('click', (e) => {
    e.preventDefault()

    const result = validateForm()

    if (result.isValid) {
      // logic to send our form
    } else {
      // React to our validation result
      callback(e, result)
    }

  })
}

init()