'use strict'

import $ from 'jquery'

import Events from '../_events'
import Spinner from '../_components/_ui.spinner'
import FormValidateField from './_ui.form.validate.field'

import '../../thirdparty/jQuery-TE_v.1.4.0/jquery-te-1.4.0.css'
import '../../thirdparty/jQuery-TE_v.1.4.0/uncompressed/jquery-te-1.4.0.js'

const JqteUI = (($) => {
  const NAME = 'jsJqteUI'
  const DATA_KEY = NAME

  const jqteOptions = {
    color: false,
    fsize: false,
    funit: 'em',
    format: false,
    rule: false,
    source: false,
    sub: false,
    sup: false,
  }

  class JqteUI {
    constructor (element) {
      console.log(`${NAME}: init`)

      const ui = this
      const $element = $(element)
      const validationUI = $element.data('jsFormValidateField')

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

      // dynamic error control
      if (validationUI) {
        $element
          .parents('.jqte')
          .find('.jqte_editor')
          .on('change', (e) => {
            validationUI.validate()
          })
      }
    }

    static dispose () {
      console.log(`${NAME}: dispose`)
    }

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

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

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

  // auto-apply
  $(window).on(`${Events.AJAX} ${Events.LOADED}`, () => {
    $('textarea.jqte-field').jsJqteUI()
  })

  return JqteUI
})($)

export default JqteUI