import $ from 'jquery'

import Selectize from 'selectize'

Selectize.prototype.onClick = () => {}

Selectize.define('stop_backspace_delete', function(options) {
	var self = this

	this.deleteSelection = (function() {
		var original = self.deleteSelection

		return function(e) {
			if (!e || e.keyCode !== 8) {
				return original.apply(this, arguments)
			}

			return false
		}
	})()
})

Selectize.define('allow_typing_without_backspace', function(options) {
	var self = this

	this.onKeyDown = (function() {
		var original = self.onKeyDown
		return function(e) {
			var index, option

			if (!this.isFull()) {
				return original.apply(this, arguments)
			}

			if (this.$control_input.val() === '') {
				var inp = String.fromCharCode(e.keyCode)

				if (/[a-zA-Z0-9-_ ]/.test(inp)) {
					this.clear()
					this.setTextboxValue(inp)
					this.refreshOptions(true)

					e.preventDefault()
					return
				}
			}

			return original.apply(this, arguments)
		}
	})()

	this.onBlur = (function() {
		var original = self.onBlur

		return function(e) {
			var index, option

			if (!this.isFull()) {
				this.setValue(this.$input.attr('data-previous-value'))
			}

			return original.apply(this, arguments)
		}
	})()
})

ctEvents.on('ct:selectize:init', () => initSelectize())
$(initSelectize)

$(document.body).bind('updated_wc_div', () => initSelectize())
$(document.body).bind('country_to_state_changed', function(_, __, wrapper) {
	if (wrapper.find('#shipping_state, #billing_state').is('input')) {
		wrapper
			.find('#shipping_state, #billing_state')
			.parent()
			.find('.selectize-control')
			.remove()
	}

	initSelectize()
})

$(document.body).bind('woocommerce_update_variation_values', function(
	_,
	__,
	wrapper
) {
	setTimeout(() => {
		$('.product-type-variable .variations select')
			.toArray()
			.map(el => initSingleSelectize(el, true))
	})
})

$('.product-type-variable .reset_variations').on('click', () => {
	$('.product-type-variable .variations select')
		.toArray()
		.map(el => el.selectize && el.selectize.setValue('', true))
})

function initSelectize() {
	$('select')
		.toArray()
		.filter(el => {
			if (
				$(el).is('.product-type-variable .variations select') ||
				$(el).is('#shipping_state, #billing_state')
			) {
				// return false
			}

			return true
		})
		.map(el => initSingleSelectize(el))
}

function initSingleSelectize(element, allow = false) {
	// return

	if (
		$(element).is('.comment-form #rating') ||
		($(element).is('.product-type-variable .variations select') && !allow)
	) {
		return
	}

	if (element.selectize) {
		return
	}

	const hasSearch =
		$(element).is('.woocommerce-address-fields .country_select') ||
		$(element).is('.woocommerce-address-fields .state_select')

	const selectize = $(element).selectize({
		plugins: hasSearch
			? ['allow_typing_without_backspace']
			: ['stop_backspace_delete'],

		allowEmptyOption: true,

		onDropdownOpen: $dropdown => {
			element.selectize.$control.addClass('ct-dropdown-rotate-start')

			requestAnimationFrame(() => {
				element.selectize.$control.removeClass(
					'ct-dropdown-rotate-start'
				)

				element.selectize.$control.addClass('ct-dropdown-rotate-end')

				setTimeout(() => {
					element.selectize.$control.removeClass(
						'ct-dropdown-rotate-end'
					)

					element.selectize.$control.addClass('ct-dropdown-rotate')
				}, 200)
			})
		},

		onDropdownClose: $dropdown => {
			element.selectize.$control.removeClass('ct-dropdown-rotate')
			element.selectize.$control.addClass('ct-dropdown-rotate-end')

			requestAnimationFrame(() => {
				element.selectize.$control.removeClass('ct-dropdown-rotate-end')

				element.selectize.$control.addClass('ct-dropdown-rotate-start')

				setTimeout(() => {
					element.selectize.$control.removeClass(
						'ct-dropdown-rotate-start'
					)
				}, 200)
			})

			$($dropdown)
				.find('.selected')
				.not('.active')
				.removeClass('selected')
		},

		onChange() {
			$(element).change()
			$(element).trigger('change.wc-variation-form')
		},

		onClear() {
			element.selectize.$control.find('i').remove()
			$('<i>').appendTo(element.selectize.$control)
		}
	})

	if (!hasSearch) {
		element.selectize.$control.addClass('ct-disable-search')
	}

	$('<i>').appendTo(element.selectize.$control)
}

function whenTransitionEnds(el, cb) {
	const end = () => {
		el.removeEventListener('transitionend', onEnd)
		cb()
	}

	const onEnd = e => {
		if (e.target === el) {
			end()
		}
	}

	el.addEventListener('transitionend', onEnd)
}