(function ($, window) {
  class BootstrapSwitch {
    constructor (element, options = {}) {
      this.$element = $(element)
      this.options = $.extend(
        {},
        $.fn.bootstrapSwitch.defaults,
        this._getElementOptions(),
        options
      )
      this.prevOptions = {}
      this.$wrapper = $('<div>', {
        class: () => {
          const classes = []
          classes.push(this.options.state ? 'on' : 'off')
          if (this.options.size) {
            classes.push(this.options.size)
          }
          if (this.options.disabled) {
            classes.push('disabled')
          }
          if (this.options.readonly) {
            classes.push('readonly')
          }
          if (this.options.indeterminate) {
            classes.push('indeterminate')
          }
          if (this.options.inverse) {
            classes.push('inverse')
          }
          if (this.$element.attr('id')) {
            classes.push(`id-${this.$element.attr('id')}`)
          }
          return classes
            .map(this._getClass.bind(this))
            .concat([this.options.baseClass], this._getClasses(this.options.wrapperClass))
            .join(' ')
        }
      })
      this.$container = $('<div>', { class: this._getClass('container') })
      this.$on = $('<span>', {
        html: this.options.onText,
        class: `${this._getClass('handle-on')} ${this._getClass(this.options.onColor)}`
      })
      this.$off = $('<span>', {
        html: this.options.offText,
        class: `${this._getClass('handle-off')} ${this._getClass(this.options.offColor)}`
      })
      this.$label = $('<span>', {
        html: this.options.labelText,
        class: this._getClass('label')
      })

      this.$element.on('init.bootstrapSwitch', this.options.onInit.bind(this, element))
      this.$element.on('switchChange.bootstrapSwitch', (...args) => {
        if (this.options.onSwitchChange.apply(element, args) === false) {
          if (this.$element.is(':radio')) {
            $(`[name="${this.$element.attr('name')}"]`).trigger('previousState.bootstrapSwitch', true)
          } else {
            this.$element.trigger('previousState.bootstrapSwitch', true)
          }
        }
      })

      this.$container = this.$element.wrap(this.$container).parent()
      this.$wrapper = this.$container.wrap(this.$wrapper).parent()
      this.$element
        .before(this.options.inverse ? this.$off : this.$on)
        .before(this.$label)
        .before(this.options.inverse ? this.$on : this.$off)

      if (this.options.indeterminate) {
        this.$element.prop('indeterminate', true)
      }

      this._init()
      this._elementHandlers()
      this._handleHandlers()
      this._labelHandlers()
      this._formHandler()
      this._externalLabelHandler()
      this.$element.trigger('init.bootstrapSwitch', this.options.state)
    }

    setPrevOptions () {
      this.prevOptions = Object.assign({}, this.options)
    }

    state (value, skip) {
      if (typeof value === 'undefined') { return this.options.state }
      if (
        (this.options.disabled || this.options.readonly) ||
        (this.options.state && !this.options.radioAllOff && this.$element.is(':radio'))
      ) { return this.$element }
      if (this.$element.is(':radio')) {
        $(`[name="${this.$element.attr('name')}"]`).trigger('setPreviousOptions.bootstrapSwitch')
      } else {
        this.$element.trigger('setPreviousOptions.bootstrapSwitch')
      }
      if (this.options.indeterminate) {
        this.indeterminate(false)
      }
      this.$element
        .prop('checked', Boolean(value))
        .trigger('change.bootstrapSwitch', skip)
      return this.$element
    }

    toggleState (skip) {
      if (this.options.disabled || this.options.readonly) { return this.$element }
      if (this.options.indeterminate) {
        this.indeterminate(false)
        return this.state(true)
      } else {
        return this.$element.prop('checked', !this.options.state).trigger('change.bootstrapSwitch', skip)
      }
    }

    size (value) {
      if (typeof value === 'undefined') { return this.options.size }
      if (this.options.size != null) {
        this.$wrapper.removeClass(this._getClass(this.options.size))
      }
      if (value) {
        this.$wrapper.addClass(this._getClass(value))
      }
      this._width()
      this._containerPosition()
      this.options.size = value
      return this.$element
    }

    animate (value) {
      if (typeof value === 'undefined') { return this.options.animate }
      if (this.options.animate === Boolean(value)) { return this.$element }
      return this.toggleAnimate()
    }

    toggleAnimate () {
      this.options.animate = !this.options.animate
      this.$wrapper.toggleClass(this._getClass('animate'))
      return this.$element
    }

    disabled (value) {
      if (typeof value === 'undefined') { return this.options.disabled }
      if (this.options.disabled === Boolean(value)) { return this.$element }
      return this.toggleDisabled()
    }

    toggleDisabled () {
      this.options.disabled = !this.options.disabled
      this.$element.prop('disabled', this.options.disabled)
      this.$wrapper.toggleClass(this._getClass('disabled'))
      return this.$element
    }

    readonly (value) {
      if (typeof value === 'undefined') { return this.options.readonly }
      if (this.options.readonly === Boolean(value)) { return this.$element }
      return this.toggleReadonly()
    }

    toggleReadonly () {
      this.options.readonly = !this.options.readonly
      this.$element.prop('readonly', this.options.readonly)
      this.$wrapper.toggleClass(this._getClass('readonly'))
      return this.$element
    }

    indeterminate (value) {
      if (typeof value === 'undefined') { return this.options.indeterminate }
      if (this.options.indeterminate === Boolean(value)) { return this.$element }
      return this.toggleIndeterminate()
    }

    toggleIndeterminate () {
      this.options.indeterminate = !this.options.indeterminate
      this.$element.prop('indeterminate', this.options.indeterminate)
      this.$wrapper.toggleClass(this._getClass('indeterminate'))
      this._containerPosition()
      return this.$element
    }

    inverse (value) {
      if (typeof value === 'undefined') { return this.options.inverse }
      if (this.options.inverse === Boolean(value)) { return this.$element }
      return this.toggleInverse()
    }

    toggleInverse () {
      this.$wrapper.toggleClass(this._getClass('inverse'))
      const $on = this.$on.clone(true)
      const $off = this.$off.clone(true)
      this.$on.replaceWith($off)
      this.$off.replaceWith($on)
      this.$on = $off
      this.$off = $on
      this.options.inverse = !this.options.inverse
      return this.$element
    }

    onColor (value) {
      if (typeof value === 'undefined') { return this.options.onColor }
      if (this.options.onColor) {
        this.$on.removeClass(this._getClass(this.options.onColor))
      }
      this.$on.addClass(this._getClass(value))
      this.options.onColor = value
      return this.$element
    }

    offColor (value) {
      if (typeof value === 'undefined') { return this.options.offColor }
      if (this.options.offColor) {
        this.$off.removeClass(this._getClass(this.options.offColor))
      }
      this.$off.addClass(this._getClass(value))
      this.options.offColor = value
      return this.$element
    }

    onText (value) {
      if (typeof value === 'undefined') { return this.options.onText }
      this.$on.html(value)
      this._width()
      this._containerPosition()
      this.options.onText = value
      return this.$element
    }

    offText (value) {
      if (typeof value === 'undefined') { return this.options.offText }
      this.$off.html(value)
      this._width()
      this._containerPosition()
      this.options.offText = value
      return this.$element
    }

    labelText (value) {
      if (typeof value === 'undefined') { return this.options.labelText }
      this.$label.html(value)
      this._width()
      this.options.labelText = value
      return this.$element
    }

    handleWidth (value) {
      if (typeof value === 'undefined') { return this.options.handleWidth }
      this.options.handleWidth = value
      this._width()
      this._containerPosition()
      return this.$element
    }

    labelWidth (value) {
      if (typeof value === 'undefined') { return this.options.labelWidth }
      this.options.labelWidth = value
      this._width()
      this._containerPosition()
      return this.$element
    }

    baseClass (value) {
      return this.options.baseClass
    }

    wrapperClass (value) {
      if (typeof value === 'undefined') { return this.options.wrapperClass }
      if (!value) {
        value = $.fn.bootstrapSwitch.defaults.wrapperClass
      }
      this.$wrapper.removeClass(this._getClasses(this.options.wrapperClass).join(' '))
      this.$wrapper.addClass(this._getClasses(value).join(' '))
      this.options.wrapperClass = value
      return this.$element
    }

    radioAllOff (value) {
      if (typeof value === 'undefined') { return this.options.radioAllOff }
      const val = Boolean(value)
      if (this.options.radioAllOff === val) { return this.$element }
      this.options.radioAllOff = val
      return this.$element
    }

    onInit (value) {
      if (typeof value === 'undefined') { return this.options.onInit }
      if (!value) {
        value = $.fn.bootstrapSwitch.defaults.onInit
      }
      this.options.onInit = value
      return this.$element
    }

    onSwitchChange (value) {
      if (typeof value === 'undefined') {
        return this.options.onSwitchChange
      }
      if (!value) {
        value = $.fn.bootstrapSwitch.defaults.onSwitchChange
      }
      this.options.onSwitchChange = value
      return this.$element
    }

    destroy () {
      const $form = this.$element.closest('form')
      if ($form.length) {
        $form.off('reset.bootstrapSwitch').removeData('bootstrap-switch')
      }
      this.$container
        .children()
        .not(this.$element)
        .remove()
      this.$element
        .unwrap()
        .unwrap()
        .off('.bootstrapSwitch')
        .removeData('bootstrap-switch')
      return this.$element
    }

    _getElementOptions () {
      return {
        state: this.$element.is(':checked'),
        size: this.$element.data('size'),
        animate: this.$element.data('animate'),
        disabled: this.$element.is(':disabled'),
        readonly: this.$element.is('[readonly]'),
        indeterminate: this.$element.data('indeterminate'),
        inverse: this.$element.data('inverse'),
        radioAllOff: this.$element.data('radio-all-off'),
        onColor: this.$element.data('on-color'),
        offColor: this.$element.data('off-color'),
        onText: this.$element.data('on-text'),
        offText: this.$element.data('off-text'),
        labelText: this.$element.data('label-text'),
        handleWidth: this.$element.data('handle-width'),
        labelWidth: this.$element.data('label-width'),
        baseClass: this.$element.data('base-class'),
        wrapperClass: this.$element.data('wrapper-class')
      }
    }

    _width () {
      const $handles = this.$on
        .add(this.$off)
        .add(this.$label)
        .css('width', '')
      let handleWidth
      if (this.options.handleWidth === 'auto') {
        handleWidth = Math.round(Math.max(this.$on.width(), this.$off.width()))
      } else {
        handleWidth = this.options.handleWidth
      }
      $handles.width(handleWidth)
      this.$label.width((index, width) => {
        if (this.options.labelWidth !== 'auto') { return this.options.labelWidth }
        if (width < handleWidth) { return handleWidth }
        return width
      })
      this._handleWidth = this.$on.outerWidth()
      this._labelWidth = this.$label.outerWidth()
      this.$container.width((this._handleWidth * 2) + this._labelWidth)
      return this.$wrapper.width(this._handleWidth + this._labelWidth)
    }

    _containerPosition (state = this.options.state, callback) {
      this.$container.css('margin-left', () => {
        const values = [0, `-${this._handleWidth}px`]
        if (this.options.indeterminate) {
          return `-${this._handleWidth / 2}px`
        }
        if (state) {
          if (this.options.inverse) {
            return values[1]
          } else {
            return values[0]
          }
        } else {
          if (this.options.inverse) {
            return values[0]
          } else {
            return values[1]
          }
        }
      })
    }

    _init () {
      const init = () => {
        this.setPrevOptions()
        this._width()
        this._containerPosition()
        setTimeout(() => {
          if (this.options.animate) {
            return this.$wrapper.addClass(this._getClass('animate'))
          }
        }, 50)
      }
      if (this.$wrapper.is(':visible')) {
        init()
        return
      }
      const initInterval = window.setInterval(() => {
        if (this.$wrapper.is(':visible')) {
          init()
          return window.clearInterval(initInterval)
        }
      }, 50)
    }

    _elementHandlers () {
      return this.$element.on({
        'setPreviousOptions.bootstrapSwitch': this.setPrevOptions.bind(this),

        'previousState.bootstrapSwitch': () => {
          this.options = this.prevOptions
          if (this.options.indeterminate) {
            this.$wrapper.addClass(this._getClass('indeterminate'))
          }
          this.$element
            .prop('checked', this.options.state)
            .trigger('change.bootstrapSwitch', true)
        },

        'change.bootstrapSwitch': (event, skip) => {
          event.preventDefault()
          event.stopImmediatePropagation()
          const state = this.$element.is(':checked')
          this._containerPosition(state)
          if (state === this.options.state) {
            return
          }
          this.options.state = state
          this.$wrapper
            .toggleClass(this._getClass('off'))
            .toggleClass(this._getClass('on'))
          if (!skip) {
            if (this.$element.is(':radio')) {
              $(`[name="${this.$element.attr('name')}"]`)
                .not(this.$element)
                .prop('checked', false)
                .trigger('change.bootstrapSwitch', true)
            }
            this.$element.trigger('switchChange.bootstrapSwitch', [state])
          }
        },

        'focus.bootstrapSwitch': event => {
          event.preventDefault()
          this.$wrapper.addClass(this._getClass('focused'))
        },

        'blur.bootstrapSwitch': event => {
          event.preventDefault()
          this.$wrapper.removeClass(this._getClass('focused'))
        },

        'keydown.bootstrapSwitch': event => {
          if (!event.which || this.options.disabled || this.options.readonly) {
            return
          }
          if (event.which === 37 || event.which === 39) {
            event.preventDefault()
            event.stopImmediatePropagation()
            this.state(event.which === 39)
          }
        }
      })
    }

    _handleHandlers () {
      this.$on.on('click.bootstrapSwitch', event => {
        event.preventDefault()
        event.stopPropagation()
        this.state(false)
        return this.$element.trigger('focus.bootstrapSwitch')
      })
      return this.$off.on('click.bootstrapSwitch', event => {
        event.preventDefault()
        event.stopPropagation()
        this.state(true)
        return this.$element.trigger('focus.bootstrapSwitch')
      })
    }

    _labelHandlers () {
      const handlers = {
        click (event) { event.stopPropagation() },

        'mousedown.bootstrapSwitch touchstart.bootstrapSwitch': event => {
          if (this._dragStart || this.options.disabled || this.options.readonly) {
            return
          }
          event.preventDefault()
          event.stopPropagation()
          this._dragStart = (event.pageX || event.originalEvent.touches[0].pageX) - parseInt(this.$container.css('margin-left'), 10)
          if (this.options.animate) {
            this.$wrapper.removeClass(this._getClass('animate'))
          }
          this.$element.trigger('focus.bootstrapSwitch')
        },

        'mousemove.bootstrapSwitch touchmove.bootstrapSwitch': event => {
          if (this._dragStart == null) { return }
          const difference = (event.pageX || event.originalEvent.touches[0].pageX) - this._dragStart
          event.preventDefault()
          if (difference < -this._handleWidth || difference > 0) { return }
          this._dragEnd = difference
          this.$container.css('margin-left', `${this._dragEnd}px`)
        },

        'mouseup.bootstrapSwitch touchend.bootstrapSwitch': event => {
          if (!this._dragStart) { return }
          event.preventDefault()
          if (this.options.animate) {
            this.$wrapper.addClass(this._getClass('animate'))
          }
          if (this._dragEnd) {
            const state = this._dragEnd > -(this._handleWidth / 2)
            this._dragEnd = false
            this.state(this.options.inverse ? !state : state)
          } else {
            this.state(!this.options.state)
          }
          this._dragStart = false
        },

        'mouseleave.bootstrapSwitch': () => {
          this.$label.trigger('mouseup.bootstrapSwitch')
        }
      }
      this.$label.on(handlers)
    }

    _externalLabelHandler () {
      const $externalLabel = this.$element.closest('label')
      $externalLabel.on('click', event => {
        event.preventDefault()
        event.stopImmediatePropagation()
        if (event.target === $externalLabel[0]) {
          this.toggleState()
        }
      })
    }

    _formHandler () {
      const $form = this.$element.closest('form')
      if ($form.data('bootstrap-switch')) {
        return
      }
      $form
        .on('reset.bootstrapSwitch', () => {
          window.setTimeout(() => {
            $form.find('input')
              .filter(function () { return $(this).data('bootstrap-switch') })
              .each(function () { return $(this).bootstrapSwitch('state', this.checked) })
          }, 1)
        })
        .data('bootstrap-switch', true)
    }

    _getClass (name) {
      return `${this.options.baseClass}-${name}`
    }

    _getClasses (classes) {
      if (!$.isArray(classes)) {
        return [this._getClass(classes)]
      }
      return classes.map(this._getClass.bind(this))
    }
  }

  $.fn.bootstrapSwitch = function (option, ...args) {
    let ret = this
    this.each(function () {
      const $this = $(this)
      let data = $this.data('bootstrap-switch')
      if (!data) {
        data = new BootstrapSwitch(this, option)
        $this.data('bootstrap-switch', data)
      }
      if (typeof option === 'string') {
        ret = data[option].apply(data, args)
      }
    })
    return ret
  }
  $.fn.bootstrapSwitch.Constructor = BootstrapSwitch
  $.fn.bootstrapSwitch.defaults = {
    state: true,
    size: null,
    animate: true,
    disabled: false,
    readonly: false,
    indeterminate: false,
    inverse: false,
    radioAllOff: false,
    onColor: 'primary',
    offColor: 'default',
    onText: 'ON',
    offText: 'OFF',
    labelText: '&nbsp',
    handleWidth: 'auto',
    labelWidth: 'auto',
    baseClass: 'bootstrap-switch',
    wrapperClass: 'wrapper',
    onInit: () => {},
    onSwitchChange: () => {}
  }
})(window.jQuery, window)
