import $ from 'jquery';
import rafSchd from 'raf-schd';
import { throttle } from 'throttle-debounce';

const { VPData } = window;
const { __ } = VPData;
const $wnd = $(window);

/**
 * Emit Resize Event.
 */
function windowResizeEmit() {
	if (typeof window.Event === 'function') {
		// modern browsers
		window.dispatchEvent(new window.Event('resize'));
	} else {
		// for IE and other old browsers
		// causes deprecation warning on modern browsers
		const evt = window.document.createEvent('UIEvents');
		evt.initUIEvent('resize', true, false, window, 0);
		window.dispatchEvent(evt);
	}
}

const visibilityData = {};
let shouldCheckVisibility = false;
let checkVisibilityTimeout = false;
let isFocusVisible = false;

// fix portfolio inside Tabs and Accordions
// check visibility by timer https://stackoverflow.com/questions/19669786/check-if-element-is-visible-in-dom/33456469
//
// https://github.com/nk-crew/visual-portfolio/issues/11
// https://github.com/nk-crew/visual-portfolio/issues/113
function checkVisibility() {
	clearTimeout(checkVisibilityTimeout);

	if (!shouldCheckVisibility) {
		return;
	}

	const $items = $('.vp-portfolio__ready');

	if ($items.length) {
		let isVisibilityChanged = false;

		$items.each(function () {
			const { vpf } = this;

			if (!vpf) {
				return;
			}

			const currentState = visibilityData[vpf.uid] || 'none';

			visibilityData[vpf.uid] =
				this.offsetParent === null ? 'hidden' : 'visible';

			// changed from hidden to visible.
			if (
				currentState === 'hidden' &&
				visibilityData[vpf.uid] === 'visible'
			) {
				isVisibilityChanged = true;
			}
		});

		// resize, if visibility changed.
		if (isVisibilityChanged) {
			windowResizeEmit();
		}
	} else {
		shouldCheckVisibility = false;
	}

	// run again.
	checkVisibilityTimeout = setTimeout(checkVisibility, 500);
}

// run check function only after portfolio inited.
$(document).on('inited.vpf', (event) => {
	if (event.namespace !== 'vpf') {
		return;
	}

	shouldCheckVisibility = true;

	checkVisibility();
});

/**
 * If the most recent user interaction was via the keyboard;
 * and the key press did not include a meta, alt/option, or control key;
 * then the modality is keyboard. Otherwise, the modality is not keyboard.
 */
document.addEventListener(
	'keydown',
	function (e) {
		if (e.metaKey || e.altKey || e.ctrlKey) {
			return;
		}

		isFocusVisible = true;
	},
	true
);

/**
 * If at any point a user clicks with a pointing device, ensure that we change
 * the modality away from keyboard.
 * This avoids the situation where a user presses a key on an already focused
 * element, and then clicks on a different element, focusing it with a
 * pointing device, while we still think we're in keyboard modality.
 */
document.addEventListener(
	'mousedown',
	() => {
		isFocusVisible = false;
	},
	true
);
document.addEventListener(
	'pointerdown',
	() => {
		isFocusVisible = false;
	},
	true
);
document.addEventListener(
	'touchstart',
	() => {
		isFocusVisible = false;
	},
	true
);

/**
 * Main VP class
 */
class VP {
	constructor($item, userOptions) {
		const self = this;

		self.$item = $item;

		// get id from class
		const classes = $item[0].className.split(/\s+/);
		for (let k = 0; k < classes.length; k += 1) {
			if (classes[k] && /^vp-uid-/.test(classes[k])) {
				self.uid = classes[k].replace(/^vp-uid-/, '');
			}
			if (classes[k] && /^vp-id-/.test(classes[k])) {
				self.id = classes[k].replace(/^vp-id-/, '');
			}
		}
		if (!self.uid) {
			// eslint-disable-next-line no-console
			console.error(__.couldnt_retrieve_vp);
			return;
		}

		self.href = window.location.href;

		self.$items_wrap = $item.find('.vp-portfolio__items');
		self.$slider_thumbnails_wrap = $item.find('.vp-portfolio__thumbnails');
		self.$pagination = $item.find('.vp-portfolio__pagination-wrap');
		self.$filter = $item.find('.vp-portfolio__filter-wrap');
		self.$sort = $item.find('.vp-portfolio__sort-wrap');

		// find single filter block.
		if (self.id) {
			self.$filter = self.$filter.add(
				`.vp-single-filter.vp-id-${self.id} .vp-portfolio__filter-wrap`
			);
		}

		// find single sort block.
		if (self.id) {
			self.$sort = self.$sort.add(
				`.vp-single-sort.vp-id-${self.id} .vp-portfolio__sort-wrap`
			);
		}

		// user options
		self.userOptions = userOptions;

		self.firstRun = true;

		self.init();
	}

	// emit event
	// Example:
	// $(document).on('init.vpf', function (event, infiniteObject) {
	//     console.log(infiniteObject);
	// });
	emitEvent(event, data) {
		data = data ? [this].concat(data) : [this];
		this.$item.trigger(`${event}.vpf`, data);
		this.$item.trigger(`${event}.vpf-uid-${this.uid}`, data);
	}

	/**
	 * Init
	 */
	init() {
		const self = this;

		// destroy if already inited
		if (!self.firstRun) {
			self.destroy();
		}

		self.destroyed = false;

		self.$item.addClass('vp-portfolio__ready');

		// init options
		self.initOptions();

		// init events
		self.initEvents();

		// init layout
		self.initLayout();

		// init custom colors
		self.initCustomColors();

		self.emitEvent('init');

		if (self.id) {
			$(`.vp-single-filter.vp-id-${self.id}`)
				.addClass('vp-single-filter__ready')
				.parent('.vp-portfolio__layout-elements')
				.addClass('vp-portfolio__layout-elements__ready');
			$(`.vp-single-sort.vp-id-${self.id}`)
				.addClass('vp-single-sort__ready')
				.parent('.vp-portfolio__layout-elements')
				.addClass('vp-portfolio__layout-elements__ready');
		}

		// resized
		self.resized();

		// images loaded
		self.imagesLoaded();

		self.emitEvent('inited');

		self.firstRun = false;
	}

	/**
	 * Check if script loaded in preview.
	 *
	 * @return {boolean} is in preview.
	 */
	isPreview() {
		const self = this;

		return !!self.$item.closest('#vp_preview').length;
	}

	/**
	 * Called after resized container.
	 */
	resized() {
		windowResizeEmit();

		this.emitEvent('resized');
	}

	/**
	 * Images loaded.
	 */
	imagesLoaded() {
		const self = this;

		if (!self.$items_wrap.imagesLoaded) {
			return;
		}

		self.$items_wrap.imagesLoaded().progress(() => {
			this.emitEvent('imagesLoaded');
		});
	}

	/**
	 * Destroy
	 */
	destroy() {
		const self = this;

		// remove loaded class
		self.$item.removeClass('vp-portfolio__ready');

		if (self.id) {
			$(`.vp-single-filter.vp-id-${self.id}`)
				.removeClass('vp-single-filter__ready')
				.parent('.vp-portfolio__layout-elements')
				.removeClass('vp-portfolio__layout-elements__ready');
			$(`.vp-single-sort.vp-id-${self.id}`)
				.removeClass('vp-single-sort__ready')
				.parent('.vp-portfolio__layout-elements')
				.removeClass('vp-portfolio__layout-elements__ready');
		}

		// destroy events
		self.destroyEvents();

		// remove all generated styles
		self.removeStyle();
		self.renderStyle();

		self.emitEvent('destroy');

		self.destroyed = true;
	}

	/**
	 * Add style to the current portfolio list
	 *
	 * @param {string} selector css selector
	 * @param {string} styles   object with styles
	 * @param {string} media    string with media query
	 */
	addStyle(selector, styles, media) {
		media = media || '';

		const self = this;
		const { uid } = self;

		if (!self.stylesList) {
			self.stylesList = {};
		}

		if (typeof self.stylesList[uid] === 'undefined') {
			self.stylesList[uid] = {};
		}
		if (typeof self.stylesList[uid][media] === 'undefined') {
			self.stylesList[uid][media] = {};
		}
		if (typeof self.stylesList[uid][media][selector] === 'undefined') {
			self.stylesList[uid][media][selector] = {};
		}

		self.stylesList[uid][media][selector] = $.extend(
			self.stylesList[uid][media][selector],
			styles
		);

		self.emitEvent('addStyle', [selector, styles, media, self.stylesList]);
	}

	/**
	 * Remove style from the current portfolio list
	 *
	 * @param {string} selector css selector (if not set - removed all styles)
	 * @param {string} styles   object with styles
	 * @param {string} media    string with media query
	 */
	removeStyle(selector, styles, media) {
		media = media || '';

		const self = this;
		const { uid } = self;

		if (!self.stylesList) {
			self.stylesList = {};
		}

		if (typeof self.stylesList[uid] !== 'undefined' && !selector) {
			self.stylesList[uid] = {};
		}

		if (
			typeof self.stylesList[uid] !== 'undefined' &&
			typeof self.stylesList[uid][media] !== 'undefined' &&
			typeof self.stylesList[uid][media][selector] !== 'undefined' &&
			selector
		) {
			delete self.stylesList[uid][media][selector];
		}

		self.emitEvent('removeStyle', [selector, styles, self.stylesList]);
	}

	/**
	 * Render style for the current portfolio list
	 */
	renderStyle() {
		const self = this;

		// timeout for the case, when styles added one by one
		const { uid } = self;
		let stylesString = '';

		if (!self.stylesList) {
			self.stylesList = {};
		}

		// create string with styles
		if (typeof self.stylesList[uid] !== 'undefined') {
			Object.keys(self.stylesList[uid]).forEach((m) => {
				// media
				if (m) {
					stylesString += `@media ${m} {`;
				}
				Object.keys(self.stylesList[uid][m]).forEach((s) => {
					// selector
					const selectorParent = `.vp-uid-${uid}`;
					let selector = `${selectorParent} ${s}`;

					// add parent selector after `,`.
					selector = selector.replace(
						/, |,/g,
						`, ${selectorParent} `
					);

					stylesString += `${selector} {`;
					Object.keys(self.stylesList[uid][m][s]).forEach((p) => {
						// property and value
						stylesString += `${p}:${self.stylesList[uid][m][s][p]};`;
					});
					stylesString += '}';
				});
				// media
				if (m) {
					stylesString += '}';
				}
			});
		}

		// add in style tag
		let $style = $(`#vp-style-${uid}`);
		if (!$style.length) {
			$style = $('<style>')
				.attr('id', `vp-style-${uid}`)
				.appendTo('head');
		}
		$style.html(stylesString);

		self.emitEvent('renderStyle', [stylesString, self.stylesList, $style]);
	}

	/**
	 * First char to lower case
	 *
	 * @param {string} str string to transform
	 * @return {string} result string
	 */
	firstToLowerCase(str) {
		return str.substr(0, 1).toLowerCase() + str.substr(1);
	}

	/**
	 * Init options
	 *
	 * @param {Object} userOptions user options
	 */
	initOptions(userOptions) {
		const self = this;

		// default options
		self.defaults = {
			layout: 'tile',
			itemsGap: 0,
			pagination: 'load-more',
		};

		// new user options
		if (userOptions) {
			self.userOptions = userOptions;
		}

		// prepare data options
		const dataOptions = self.$item[0].dataset;
		const pureDataOptions = {};
		Object.keys(dataOptions).forEach((k) => {
			if (k && k.substring(0, 2) === 'vp') {
				pureDataOptions[self.firstToLowerCase(k.substring(2))] =
					dataOptions[k];
			}
		});

		self.options = $.extend(
			{},
			self.defaults,
			pureDataOptions,
			self.userOptions
		);

		self.emitEvent('initOptions');
	}

	/**
	 * Init events
	 */
	initEvents() {
		const self = this;
		const evp = `.vpf-uid-${self.uid}`;

		// Stretch
		function stretch() {
			const rect = self.$item[0].getBoundingClientRect();
			const { left } = rect;
			const right = window.innerWidth - rect.right;

			const ml = parseFloat(self.$item.css('margin-left') || 0);
			const mr = parseFloat(self.$item.css('margin-right') || 0);
			self.$item.css({
				marginLeft: ml - left,
				marginRight: mr - right,
				maxWidth: 'none',
				width: 'auto',
			});
		}
		if (self.$item.hasClass('vp-portfolio__stretch') && !self.isPreview()) {
			$wnd.on(`load${evp} resize${evp} orientationchange${evp}`, () => {
				stretch();
			});
			stretch();
		}

		// add helper focus class
		// TODO: change to CSS :has() when will be widely available
		// @link https://caniuse.com/?search=%3Ahas
		self.$item.on(`focus${evp}`, '.vp-portfolio__item a', function () {
			const $item = $(this).closest('.vp-portfolio__item');

			$item.addClass('vp-portfolio__item-focus');

			if (isFocusVisible) {
				$item.addClass('vp-portfolio__item-focus-visible');
			}
		});
		self.$item.on(`blur${evp}`, '.vp-portfolio__item a', function () {
			$(this)
				.closest('.vp-portfolio__item')
				.removeClass(
					'vp-portfolio__item-focus vp-portfolio__item-focus-visible'
				);
		});

		// on filter click
		self.$filter.on(
			`click${evp}`,
			'.vp-filter .vp-filter__item a',
			function (e) {
				e.preventDefault();
				const $this = $(this);
				if (!self.loading) {
					$this
						.closest('.vp-filter__item')
						.addClass('vp-filter__item-active')
						.siblings()
						.removeClass('vp-filter__item-active');
				}
				self.loadNewItems($this.attr('href'), true);
			}
		);

		// on sort click
		self.$sort.on(`click${evp}`, '.vp-sort .vp-sort__item a', function (e) {
			e.preventDefault();
			const $this = $(this);
			if (!self.loading) {
				$this
					.closest('.vp-sort__item')
					.addClass('vp-sort__item-active')
					.siblings()
					.removeClass('vp-sort__item-active');
			}
			self.loadNewItems($this.attr('href'), true);
		});

		// on filter/sort select change
		self.$filter
			.add(self.$sort)
			.on(
				`change${evp}`,
				'.vp-filter select, .vp-sort select',
				function () {
					const $this = $(this);
					const value = $this.val();
					const $option = $this.find(`[value="${value}"]`);

					if ($option.length) {
						self.loadNewItems($option.attr('data-vp-url'), true);
					}
				}
			);

		// on pagination click
		self.$item.on(
			`click${evp}`,
			'.vp-pagination .vp-pagination__item a',
			function (e) {
				e.preventDefault();
				const $this = $(this);
				const $pagination = $this.closest('.vp-pagination');

				if (
					$pagination.hasClass('vp-pagination__no-more') &&
					self.options.pagination !== 'paged'
				) {
					return;
				}

				self.loadNewItems(
					$this.attr('href'),
					self.options.pagination === 'paged'
				);

				// Scroll to top
				if (
					self.options.pagination === 'paged' &&
					$pagination.hasClass('vp-pagination__scroll-top')
				) {
					const $adminBar = $('#wpadminbar');
					const currentTop =
						window.pageYOffset ||
						document.documentElement.scrollTop;
					let { top } = self.$item.offset();

					// Custom user offset.
					if ($pagination.attr('data-vp-pagination-scroll-top')) {
						top -=
							parseInt(
								$pagination.attr(
									'data-vp-pagination-scroll-top'
								),
								10
							) || 0;
					}

					// Admin bar offset.
					if (
						$adminBar.length &&
						$adminBar.css('position') === 'fixed'
					) {
						top -= $adminBar.outerHeight();
					}

					// Limit max offset.
					top = Math.max(0, top);

					if (currentTop > top) {
						window.scrollTo({
							top,
							behavior: 'smooth',
						});
					}
				}
			}
		);

		// on categories of item click
		self.$item.on(
			`click${evp}`,
			'.vp-portfolio__items .vp-portfolio__item-meta-category a',
			function (e) {
				e.preventDefault();
				e.stopPropagation();
				self.loadNewItems($(this).attr('href'), true);
			}
		);

		// resized container
		self.$item.on(`transitionend${evp}`, '.vp-portfolio__items', (e) => {
			if (e.currentTarget === e.target) {
				self.resized();
			}
		});

		self.emitEvent('initEvents');
	}

	/**
	 * Destroy events
	 */
	destroyEvents() {
		const self = this;
		const evp = `.vpf-uid-${self.uid}`;

		// destroy click events
		self.$item.off(evp);
		self.$filter.off(evp);
		self.$sort.off(evp);

		// destroy window events
		$wnd.off(evp);

		self.emitEvent('destroyEvents');
	}

	/**
	 * Init layout
	 */
	initLayout() {
		const self = this;

		self.emitEvent('initLayout');

		self.renderStyle();
	}

	/**
	 * Init custom color by data attributes:
	 * data-vp-bg-color
	 * data-vp-text-color
	 */
	initCustomColors() {
		const self = this;

		self.$item.find('[data-vp-bg-color]').each(function () {
			const val = $(this).attr('data-vp-bg-color');
			self.addStyle(`[data-vp-bg-color="${val}"]`, {
				'background-color': `${val} !important`,
			});
		});

		self.$item.find('[data-vp-text-color]').each(function () {
			const val = $(this).attr('data-vp-text-color');
			self.addStyle(`[data-vp-text-color="${val}"]`, {
				color: `${val} !important`,
			});
		});

		self.renderStyle();

		self.emitEvent('initCustomColors');
	}

	/**
	 * Add New Items
	 *
	 * @param {object|dom|jQuery} $items         - elements.
	 * @param {bool}              removeExisting - remove existing elements.
	 * @param {Object}            $newVP         - new visual portfolio jQuery.
	 */
	addItems($items, removeExisting, $newVP) {
		const self = this;

		self.emitEvent('addItems', [$items, removeExisting, $newVP]);
	}

	/**
	 * Remove Items
	 *
	 * @param {object|dom|jQuery} $items - elements.
	 */
	removeItems($items) {
		const self = this;

		self.emitEvent('removeItems', [$items]);
	}

	/**
	 * AJAX Load New Items
	 *
	 * @param {string}   url            - url to request.
	 * @param {bool}     removeExisting - remove existing elements.
	 * @param {Function} cb             - callback.
	 */
	loadNewItems(url, removeExisting, cb) {
		const self = this;
		const { randomSeed } = self.options;

		if (
			(self.loading && typeof self.loading.readyState === 'undefined') ||
			!url ||
			self.href === url
		) {
			return;
		}

		// Abort previous AJAX loader to prevent conflict.
		// We need it mostly for Search feature, because users can type also when already in loading state.
		if (self.loading && self.loading.readyState && self.loading.abort) {
			self.loading.abort();
		}

		const ajaxData = {
			method: 'POST',
			url,
			data: {
				vpf_ajax_call: true,
				vpf_random_seed:
					typeof randomSeed !== 'undefined' ? randomSeed : false,
			},
			complete({ responseText }) {
				self.href = url;
				self.replaceItems(responseText, removeExisting, cb);
			},
		};

		self.loading = true;

		self.$item.addClass('vp-portfolio__loading');

		self.emitEvent('startLoadingNewItems', [url, ajaxData]);

		self.loading = $.ajax(ajaxData);
	}

	/**
	 * Replace items to the new loaded using AJAX
	 *
	 * @param {string}   content        - new page content.
	 * @param {bool}     removeExisting - remove existing elements.
	 * @param {Function} cb             - callback.
	 */
	replaceItems(content, removeExisting, cb) {
		const self = this;

		if (!content) {
			return;
		}

		// load to invisible container, then append to posts container
		content = content
			.replace('<body', '<body><div id="vp-ajax-load-body"')
			.replace('</body>', '</div></body>');
		const $body = $(content).filter('#vp-ajax-load-body');

		// find current block on new page
		const $newVP = $body.find(`.vp-portfolio.vp-uid-${self.uid}`);

		// insert new items
		if ($newVP.length) {
			const newItems = $newVP.find('.vp-portfolio__items').html();
			const nothingFound = $newVP.hasClass('vp-portfolio-not-found');

			// We should clean up notices here, as they may be cloned over and over.
			self.$item.find('.vp-notice').remove();

			if (nothingFound) {
				self.$item
					.find('.vp-portfolio__items-wrap')
					.before($newVP.find('.vp-notice').clone());
				self.$item.addClass('vp-portfolio-not-found');
			} else {
				self.$item.removeClass('vp-portfolio-not-found');
			}

			// update filter
			if (self.$filter.length) {
				self.$filter.each(function () {
					const $filter = $(this);
					let newFilterContent = '';

					if ($filter.parent().hasClass('vp-single-filter')) {
						newFilterContent = $body
							.find(
								`[class="${$filter
									.parent()
									.attr('class')
									.replace(
										' vp-single-filter__ready',
										''
									)}"] .vp-portfolio__filter-wrap`
							)
							.html();
					} else {
						newFilterContent = $newVP
							.find('.vp-portfolio__filter-wrap')
							.html();
					}

					$filter.html(newFilterContent);
				});
			}

			// update sort
			if (self.$sort.length) {
				self.$sort.each(function () {
					const $sort = $(this);
					let newFilterContent = '';

					if ($sort.parent().hasClass('vp-single-sort')) {
						newFilterContent = $body
							.find(
								`[class="${$sort
									.parent()
									.attr('class')
									.replace(
										' vp-single-sort__ready',
										''
									)}"] .vp-portfolio__sort-wrap`
							)
							.html();
					} else {
						newFilterContent = $newVP
							.find('.vp-portfolio__sort-wrap')
							.html();
					}

					$sort.html(newFilterContent);
				});
			}

			// update pagination
			if (self.$pagination.length) {
				self.$pagination.html(
					$newVP.find('.vp-portfolio__pagination-wrap').html()
				);
			}

			self.addItems($(newItems), removeExisting, $newVP);

			self.emitEvent('loadedNewItems', [$newVP, removeExisting, content]);

			if (cb) {
				cb();
			}
		}

		// update next page data
		const nextPageUrl = $newVP.attr('data-vp-next-page-url');
		self.options.nextPageUrl = nextPageUrl;
		self.$item.attr('data-vp-next-page-url', nextPageUrl);

		self.$item.removeClass('vp-portfolio__loading');

		self.loading = false;

		self.emitEvent('endLoadingNewItems');

		// images loaded
		self.imagesLoaded();

		// init custom colors
		self.initCustomColors();
	}
}

// extend VP object.
$(document).trigger('extendClass.vpf', [VP]);

// global definition
const plugin = function (options, ...args) {
	let ret;

	this.each(function () {
		if (typeof ret !== 'undefined') {
			return;
		}

		if (typeof options === 'object' || typeof options === 'undefined') {
			if (!this.vpf) {
				this.vpf = new VP($(this), options);
			}
		} else if (this.vpf) {
			ret = this.vpf[options](...args);
		}
	});

	return typeof ret !== 'undefined' ? ret : this;
};
plugin.constructor = VP;

// no conflict
const oldPlugin = $.fn.vpf;
$.fn.vpf = plugin;
$.fn.vpf.noConflict = function () {
	$.fn.vpf = oldPlugin;
	return this;
};

// initialization
$(() => {
	$('.vp-portfolio').vpf();
});

const throttledInit = throttle(
	200,
	rafSchd(() => {
		$('.vp-portfolio:not(.vp-portfolio__ready)').vpf();
	})
);
if (window.MutationObserver) {
	new window.MutationObserver(throttledInit).observe(
		document.documentElement,
		{
			childList: true,
			subtree: true,
		}
	);
} else {
	$(document).on('DOMContentLoaded DOMNodeInserted load', () => {
		throttledInit();
	});
}