import $ from 'jquery'
import Events from '../_events'

import FormBasics from './_ui.form.basics'
import FormValidateField from './_ui.form.validate.field'
// import SpinnerUI from "./_ui.spinner";

const FormValidate = (($) => {
  // Constants
  const NAME = 'jsFormValidate'
  const DATA_KEY = NAME
  const $Html = $('html, body')

  class FormValidate {
    constructor (element) {
      const ui = this
      const $element = $(element)
      const $fields = $element.find('input,textarea,select')

      ui._element = element
      ui.$element = $element
      $element.data(DATA_KEY, this)

      ui._fields = $fields
      ui._stepped_form = $element.data('jsSteppedForm')

      // prevent browsers checks (will do it using JS)
      $element.attr('novalidate', 'novalidate')

      $element.on(Events.FORM_INIT_STEPPED, () => {
        ui._stepped_form = $element.data('jsSteppedForm')
      })

      // init fields validation
      $fields.each((i, el) => {
        // skip some fields here
        if ($(el).attr('role') === 'combobox') {
          return
        }

        new FormValidateField(el)
      })

      // check form
      $element.on('submit', (e) => {
        ui.validate(true, () => {
          e.preventDefault()

          // switch to step
          if (ui._stepped_form) {
            const $el = $element.find('.error').first()

            if ($el.length) {
              ui._stepped_form.step($el.parents('.step'))
            }
          }

          $element.trigger(Events.FORM_VALIDATION_FAILED)
        })
      })

      $element.addClass(`${NAME}-active`)
      $element.trigger(Events.FORM_INIT_VALIDATE)
    }

    // Public methods
    dispose () {
      const $element = $(this._element)

      $element.removeClass(`${NAME}-active`)
      $.removeData(this._element, DATA_KEY)
      this._element = null
    }

    validate (scrollTo = true, badCallback = false) {
      console.log(`${NAME}: checking the form ...`)

      const ui = this
      let valid = true

      ui._fields.filter(':visible').each((i, el) => {
        const $el = $(el)
        const fieldUI = $el.data('jsFormValidateField')

        if (fieldUI && !fieldUI.validate()) {
          // SpinnerUI.hide();

          ui.$element.addClass('error')

          if (badCallback) {
            badCallback()
          }

          valid = false
          return false
        }
      })

      return valid
    }

    static _jQueryInterface () {
      return this.each(function () {
        // attach functionality to element
        const $element = $(this)
        let data = $element.data(DATA_KEY)

        if (!data) {
          data = new FormValidate(this)
          $element.data(DATA_KEY, data)
        }
      })
    }
  }

  // jQuery interface
  $.fn[NAME] = FormValidate._jQueryInterface
  $.fn[NAME].Constructor = FormValidate
  $.fn[NAME].noConflict = function () {
    $.fn[NAME] = JQUERY_NO_CONFLICT
    return FormValidate._jQueryInterface
  }

  // auto-apply
  $(window).on(`${NAME}.init ${Events.AJAX} ${Events.LOADED}`, () => {
    $('form').each((i, el) => {
      const $el = $(el)

      // skip some forms
      if ($el.hasClass('no-validation')) {
        return true
      }

      $el.jsFormValidate()
    })
  })

  return FormValidate
})($)

export default FormValidate