/**
 * Custom polyfill NodeList.prototype.forEach
 *
 * @see https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach
 */
if (window.NodeList && !NodeList.prototype.forEach) {
	NodeList.prototype.forEach = Array.prototype.forEach;
}

var WPBFPremium = {};

WPBFPremium.site = (function ($) {
	var isInsideCustomizer = window.wp && wp.customize ? true : false;
	var breakpoints = {
		desktop: 1024,
		tablet: 768,
		mobile: 480
	};
	var activeBreakpoint = 'desktop';
	var opts = {};

	/**
	 * Call main functions.
	 */
	function init() {
		setupBreakpoints();
		setupOpts();
		setupMegaMenu();
		setupSubmenu();
		setupWooMenu();
		setupResponsiveVideoOptIn();
		setupPostGridMasonry();

		if (isInsideCustomizer) {
			wp.customize.bind("preview-ready", function () {
				listenPartialRefresh();
			});
		}
	}

	/**
	 * Listen to WordPress selective refresh inside customizer.
	 */
	function listenPartialRefresh() {
		wp.customize.selectiveRefresh.bind('partial-content-rendered', function (placement) {
			/**
			 * A lot of partial refresh registered to work on header area.
			 * Better to not checking the "placement.partial.id".
			 */
			setupOpts();
		});
	}

	/**
	 * Setup breakpoints for desktop, tablet, and mobile.
	 */
	function setupBreakpoints() {
		setupBreakpoint('desktop');
		setupBreakpoint('tablet');
		setupBreakpoint('mobile');
	}

	/**
	 * Setup breakpoint.
	 * Retrieve breakpoint based on body class.
	 * 
	 * @param {string} device The device class.
	 */
	function setupBreakpoint(device) {
		var matchRule = "wpbf-" + device + "-breakpoint-[\\w-]*\\b";
		var breakpointClass = $('body').attr("class").match(matchRule);

		if (breakpointClass != null) {
			breakpoints[device] = breakpointClass.toString().match(/\d+/);
			breakpoints[device] = Array.isArray(breakpoints[device]) ? breakpoints[device][0] : breakpoints[device];
		}
	}

	/**
	 * Setup general options.
	 */
	function setupOpts() {
		opts.nav = document.querySelector('.wpbf-navigation');
		opts.duration = opts.nav && "" !== opts.nav.dataset.subMenuAnimationDuration ? parseInt( opts.nav.dataset.subMenuAnimationDuration ) : 250;
	}


	/**
	 * Setup mega menu.
	 */
	function setupMegaMenu() {
		// Prevent click on headlines
		$(document).on('click', '.wpbf-mega-menu > .sub-menu > .menu-item a[href="#"]', function (e) {
			e.preventDefault();
		});
	}

	/**
	 * Setup submenu.
	 */
	function setupSubmenu() {
		setupDownAnim();
		setupUpAnim();
		setupZoomInAnim();
		setupZoomOutAnim();
	}

	/**
	 * Setup submenu's down animation.
	 */
	function setupDownAnim() {
		var selector = '.wpbf-sub-menu-animation-down > .menu-item-has-children';

		$(document)
			.on('mouseenter', selector, function () {
				$('.sub-menu', this).first().css({ display: 'block' }).stop().animate({ marginTop: '0', opacity: '1' }, opts.duration);
			})
			.on('mouseleave', selector, function () {
				$('.sub-menu', this).first().stop().animate({ opacity: '0', marginTop: '-10px' }, opts.duration, function () {
					this.style.display = 'none';
				});
			});
	}

	/**
	 * Setup submenu's up animation.
	 */
	function setupUpAnim() {
		var selector = '.wpbf-sub-menu-animation-up > .menu-item-has-children';

		$(document)
			.on('mouseenter', selector, function () {
				$('.sub-menu', this).first().css({ display: 'block' }).stop().animate({ marginTop: '0', opacity: '1' }, opts.duration);
			})
			.on('mouseleave', selector, function () {
				$('.sub-menu', this).first().stop().animate({ opacity: '0', marginTop: '10px' }, opts.duration, function () {
					this.style.display = 'none';
				});
			});
	}

	/**
	 * Setup submenu's zoom in animation.
	 */
	function setupZoomInAnim() {
		var selector = '.wpbf-sub-menu-animation-zoom-in > .menu-item-has-children';

		$(document)
			.on('mouseenter', selector, function () {
				$('.sub-menu', this).first().stop(true).css({ display: 'block' }).transition({ scale: '1', opacity: '1' }, opts.duration);
			})
			.on('mouseleave', selector, function () {
				$('.sub-menu', this).first().stop(true).transition({ scale: '.95', opacity: '0' }, opts.duration).fadeOut(5);
			});
	}

	/**
	 * Setup submenu's zoom out animation.
	 */
	function setupZoomOutAnim() {
		var selector = '.wpbf-sub-menu-animation-zoom-out > .menu-item-has-children';

		$(document)
			.on('mouseenter', selector, function () {
				$('.sub-menu', this).first().stop(true).css({ display: 'block' }).transition({ scale: '1', opacity: '1' }, opts.duration);
			})
			.on('mouseleave', selector, function () {
				$('.sub-menu', this).first().stop(true).transition({ scale: '1.05', opacity: '0' }, opts.duration).fadeOut(5);
			});
	}

	/**
	 * Setup WooCommerce menu.
	 */
	function setupWooMenu() {
		$(document).on({
			mouseenter: function () {
				$(this).find('.wpbf-woo-sub-menu').stop().fadeIn(opts.duration);
			},
			mouseleave: function () {
				$(this).find('.wpbf-woo-sub-menu').stop().fadeOut(opts.duration);
			}
		}, '.wpbf-woo-menu-item.menu-item-has-children');
	}

	/**
	 * Setup responsive video opt-in.
	 */
	function setupResponsiveVideoOptIn() {
		$(document).on('click', '.wpbf-video-opt-in-button, .wpbf-video-opt-in-image', function (e) {
			e.preventDefault();

			var $parentNext = $(this).parent().next();
			var url = $parentNext.attr("data-wpbf-video");

			$parentNext.attr('data-wpbf-video');
			$parentNext.children().attr("src", url);
			$parentNext.removeClass('opt-in');
			this.parentNode.remove(this);
		});
	}

	/**
	 * Setup post grid masonry.
	 */
	function setupPostGridMasonry() {
		window.addEventListener('load', function (e) {

			var $grid = $('.wpbf-post-grid-masonry');
			if (!$grid.length) return;

			$grid.isotope({
				itemSelector: '.wpbf-article-wrapper',
				transitionDuration: 0,
			});

		});
	}

	init();

	return {
		isInsideCustomizer: isInsideCustomizer,
		breakpoints: breakpoints,
		activeBreakpoint: activeBreakpoint
	};

})(jQuery);