'use strict'

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

const FormStorage = (($) => {
  // Constants
  const NAME = 'jsFormStorage'
  const DATA_KEY = NAME
  const STORAGE = window.localStorage

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

      const ui = this
      const $element = $(element)
      const $elements = $element.find('input, textarea, select')

      const setRangeValues = function (el) {
        const $el = $(el)
        $el.siblings('.value').text($el.val())
      }

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

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

      // restore form data from localStorage
      $elements.each((i, el) => {
        const $el = $(el)
        const id = $el.attr('id')
        const type = $el.attr('type')
        const val = STORAGE.getItem(NAME + id)

        if (type === 'file') {
          return true
        }

        if (id && val && type) {
          if (type && (type === 'checkbox' || type === 'radio')) {
            $el.prop('checked', val)
          } else {
            $el.val(val)
          }
        }

        $el.trigger(Events.RESTORE_FIELD)
      })

      // range fields
      $('input[type="range"]').each((i, el) => {
        setRangeValues(el)
      })

      $element.trigger(Events.RESTORE_FIELD)

      $('input[type="range"]').on('change', (e) => {
        setRangeValues(e.currentTarget)
      })

      // store form data into localStorage
      $elements.on('change', (e) => {
        const $el = $(e.currentTarget)
        const id = $el.attr('id')
        const type = $el.attr('type')

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

        let val = $el.val()

        if (type && (type === 'checkbox' || type === 'radio')) {
          val = !!$el.is(':checked')
        }

        if (id && type && type !== 'password') {
          STORAGE.setItem(NAME + id, val)
        }
      })

      $element.on('submit', () => {
        $element.data(DATA_KEY).clear()
      })

      $element
        .find('.btn-toolbar,.form-actions')
        .children('button,[type="submit"],[type="clear"]')
        .on('click', () => {
          $element.data(DATA_KEY).clear()
        })

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

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

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

    clear () {
      STORAGE.clear()
    }

    static _jQueryInterface () {
      if (typeof window.localStorage !== 'undefined') {
        return this.each(function () {
          // attach functionality to element
          const $element = $(this)
          let data = $element.data(DATA_KEY)

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

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

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

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

      $el.jsFormStorage()
    })
  })

  return FormStorage
})($)

export default FormStorage