(function($){
	const webSiteWrapperSelector = '.wp-site-blocks'

	const MainMenuScrollHint = {
		initilize: function () {
			const self = this;
			this._findItems();

			if (!this.inited) {
				this.state = "";
				this.disableOffsetBottom = 15;
				this.$menu.on("scroll", this.parentScrollHandlerDebounced.bind(this));
				this.menus.forEach( item => $( item ).parent().on("scroll", this.parentScrollHandlerDebounced.bind(this)) );

				this.$info.find(".scroll-info").on("click", function () {
					const $menuWrapper = self.getScrollItem();

					$menuWrapper.animate(
						{ scrollTop: $menuWrapper.height() + $menuWrapper.scrollTop() },
						1000,
					);
				});

				this.parentScrollHandler();
			}
			this.inited = true;
			this.windowResizeHandlerDebounced();
			this.parentScrollHandlerDebounced();
			this.debounceId = -1;

			this.isNeedScroll = true;
			this.debug = false;
		},

		_findItems: function() {
			this.$menuWrapper = $(".main-menu__inner");
			this.$menu = this.$menuWrapper.find(".menu").parent();
			this.menus = [ ...this.$menuWrapper.find(".submenus .submenus-wrapper") ]
			this.$info = this.$menuWrapper.find(".scroll-info__wrapper");

			this.$buttonWrapper = this.$menuWrapper.find(".main-menu__button-wrap");
		},

		recalc: function () {
			const distanceToBottom = this.calculateDistanceToBottom();

			if (this.debug) {
				console.log("\n\n~~~~ RECALC ~~~~~");
				console.log('scroll distance: ', this.calculateScrollDistance());
				console.log('offset: ', this.disableOffsetBottom);
				console.log('distanse to bottom: ', distanceToBottom);
				console.log("is submenu: ", this.getScrollItem());
				console.log("~~~~ RECALC END ~~~~~\n");
			}

			if (distanceToBottom >= this.disableOffsetBottom) {
				this.show({ source: 'resize' });
			} else {
				this.hide({ source: "resize" });
			}
		},

		windowResizeHandler: function () {
			this.recalc();
		},

		parentScrollHandler: function () {
			this.recalc();
		},

		calculateDistanceToBottom: function () {
			const $menu = this.getScrollItem();

			return $menu.prop("scrollHeight") -
				$menu.height() -
				$menu.scrollTop();
		},

		calculateScrollDistance: function () {
			return this.$menu.prop("scrollHeight") - this.$menu.prop("clientHeight");
		},

		getScrollItem: function() {
			const media = window.matchMedia("(max-width: 1279px)").matches
			const submenus = $( this.menus.findLast( item => $( item ).closest( '.submenus' ).hasClass( 'opened' ) && media ) ).parent()

			return submenus[0] ? submenus : this.$menu
		},

		show: function({debug = false, source = ''} = {}) {
			if(this.state == "show") return;
			if(this.debug || debug) console.log(`show from ${source}`);
			this.$info.find('.scroll-info').slideDown();
			this.state = "show";
		},

		hide: function({debug = false, source = ''} = {}) {
			if (this.state == "hide") return;
			if(this.debug || debug) console.log(`hide from ${source}`);
			this.$info.find('.scroll-info').slideUp();
			this.state = "hide";
		}
	};

	const mainMenu = function ( $section ) {
		let $headerMenuBtn = $section.find('.page-header__menu-button'),
			$menu = $section.siblings('.main-menu'),
			$menuWrap = $menu.find('.main-menu__menu'),
			$menuList = $menu.find('.menu'),
			$menuInner = $menu.find('.main-menu__inner'),
			$menuOverlay = $section.siblings('.main-menu-overlay'),
			$menuBack = $menu.find('.main-menu__back');

		$menuList.children('li').each(function () {
			let $item = $(this);
			let itemIndex = $item.index();
			//$item.attr('id', 'main-menu-item-' + itemIndex);
			$item.attr('id', 'first-level-item-' + itemIndex).addClass('first-level-item');

			//second level
			$item.children('ul').children('li').each(function () {
				let $subItem = $(this);
				let subItemIndex = $subItem.index();
				$subItem.attr('id', 'second-level-item-' + itemIndex + '-' + subItemIndex).addClass('second-level-item');

				//third level
				$subItem.children('ul').children('li').each(function () {
					let $subItem2 = $(this);
					let subItem2Index = $subItem2.index();
					$subItem2.attr('id', 'third-level-item-' + itemIndex + '-' + subItemIndex + '-' + subItem2Index).addClass('third-level-item');

					//fourth level
					$subItem2.children('ul').children('li').each(function () {
						let $subItem3 = $(this);
						let subItem3Index = $subItem3.index();
						$subItem3.attr('id', 'fourth-level-item-' + itemIndex + '-' + subItemIndex + '-' + subItem2Index + '-' + subItem3Index).addClass('fourth-level-item');
					});
				});

			});
		});

		$headerMenuBtn.on('click', function (e) {
			e.preventDefault();
			let $this = $(this);
			if ( $this.hasClass('active') ) {
				$menuOverlay.fadeOut();
				$this.removeClass('active');
				$menu.removeClass('active subnav-active');
				$('body').removeClass('no-scroll');
				$menu.find('.submenus').removeClass('opened');
				$menu.find('.submenus').find('.sub-menu').removeClass('show');
				$menu.find('.main-menu__back').removeClass('show');
			} else {
				$menuOverlay.fadeIn();
				$this.addClass('active');
				$menu.addClass('active');
				$('body').addClass('no-scroll');
			}
		});

		window.addEventListener('resize', () => {					
			let $headerMenu = $section.find('.page-header__nav').find('.menu');

			if( window.matchMedia('(max-width: 1280px)').matches && !$headerMenu.length && $menu.length ) {
				if( $menu.find('.opened').length ) {
					$menu.find('.main-menu__back').addClass('show');
				}
			}				

			if(!$headerMenu.length || !$headerMenuBtn.hasClass('active')) return

			if( window.matchMedia('(min-width: 1280px)').matches ) {
				console.log('333');
				$menuOverlay.fadeOut();
				$headerMenuBtn.removeClass('active');
				$menu.removeClass('active subnav-active subnav-2lvl-active subnav-3lvl-active');
				$('body').removeClass('no-scroll');
				$menu.find('.submenus').removeClass('opened');
				$menu.find('.submenus').find('.sub-menu').removeClass('show');
				$menu.find('.main-menu__back').removeClass('show');
			}
		})

		$menu.on('click', function (e) {
			if ( $(e.target).is( $menu ) ) {
				$headerMenuBtn.click();
			}
		});

		let $submenusLvl1 = $menu.find('.menu>li>ul.sub-menu');
		let $submenusLvl2 = $menu.find('.menu>li>ul.sub-menu>li>ul.sub-menu');
		let $submenusLvl3 = $menu.find('.menu>li>ul.sub-menu>li>ul.sub-menu>li>ul.sub-menu');

		if ( $submenusLvl1.length ) {
			let $submenusLvl1Wrap = $('<div class="submenus submenus--first-level"><div class="scrollbar-outer"><div class="submenus-wrapper submenus-wrapper--lvl1"></div></div></div>');
			let $submenusLvl2Wrap = $('<div class="submenus submenus--second-level"><div class="scrollbar-outer"><div class="submenus-wrapper submenus-wrapper--lvl2"></div></div></div>');
			let $submenusLvl3Wrap = $('<div class="submenus submenus--third-level"><div class="scrollbar-outer"><div class="submenus-wrapper submenus-wrapper--lvl3"></div></div></div>');
			$menuWrap.append($submenusLvl1Wrap);
			$submenusLvl1.each(function (i, item) {
				let $submenu = $(item);
				$submenu.attr('id', `submenu-${$submenu.closest('li.menu-item-has-children').attr('id')}`)
				$submenu.appendTo($('.submenus-wrapper--lvl1'));
			});

			if ( $submenusLvl2.length ) {
				$menuWrap.append($submenusLvl2Wrap);
				$submenusLvl2.each(function (i, item) {
					let $submenu = $(item);
					$submenu.attr('id', `submenu-${$submenu.closest('li.menu-item-has-children').attr('id')}`)
					$submenu.appendTo($('.submenus-wrapper--lvl2'));
				});
			}

			if ( $submenusLvl3.length ) {
				$menuWrap.append($submenusLvl3Wrap);
				$submenusLvl3.each(function (i, item) {
					let $submenu = $(item);
					$submenu.attr('id', `submenu-${$submenu.closest('li.menu-item-has-children').attr('id')}`)
					$submenu.appendTo($('.submenus-wrapper--lvl3'));
				});
			}
			
			let accumulatedTime = 0;
			let intervalId = null;

			function startAccumulating(elem) {
				intervalId = setInterval(() => {

					if ( accumulatedTime >= 1000 ) {
						stopAccumulating(elem, true)
					} else {						
						accumulatedTime += 100;
					}
				}, 100);
			}

			function stopAccumulating(elem = null, isMenuShouldBeHidden = false) {
				clearInterval(intervalId);
				intervalId = null;
				accumulatedTime = 0;
				if(elem && isMenuShouldBeHidden) {
					hoverOnSimpleMenuItem(elem)
				}
			}

			function hoverOnMenuItemWithChild (elem) {
				let $this = $(elem);

				$menuWrap.find('a.active').removeClass('active');
				$this.children('a').addClass('active');
				let id = $this.attr('id');
				
				if($this.hasClass('first-level-item')) {
					$menu.addClass('subnav-active');
					$submenusLvl1Wrap.find('.sub-menu').removeClass('show');
					$submenusLvl1Wrap.find(`#submenu-${id}`).addClass('show');
					$submenusLvl1Wrap.addClass('opened');
					$submenusLvl2Wrap.find('.sub-menu').removeClass('show');
					$submenusLvl2Wrap.removeClass('opened');
					$menu.removeClass('subnav-2lvl-active');
					$submenusLvl3Wrap.find('.sub-menu').removeClass('show');
					$submenusLvl3Wrap.removeClass('opened');
					$menu.removeClass('subnav-3lvl-active');
				} else if($this.hasClass('second-level-item')) {
					$menu.addClass('subnav-2lvl-active');
					$submenusLvl2Wrap.find('.sub-menu').removeClass('show');
					$submenusLvl2Wrap.find(`#submenu-${id}`).addClass('show');
					$submenusLvl2Wrap.addClass('opened');
				} else if($this.hasClass('third-level-item')) {
					$menu.addClass('subnav-3lvl-active');
					$submenusLvl3Wrap.find('.sub-menu').removeClass('show');
					$submenusLvl3Wrap.find(`#submenu-${id}`).addClass('show');
					$submenusLvl3Wrap.addClass('opened');
				}
			}

			function hoverOnSimpleMenuItem (elem) {
				let $this = $(elem);

				if($this.hasClass('first-level-item')) {
					$menuInner.find('.sub-menu').removeClass('show');
					$submenusLvl1Wrap.removeClass('opened');
					if ( $submenusLvl2.length ) {
						$submenusLvl2Wrap.removeClass('opened');
					}
					if ( $submenusLvl3.length ) {
						$submenusLvl3Wrap.removeClass('opened');
					}
					$menuWrap.find('a.active').removeClass('active');
					$menu.removeClass('subnav-active subnav-2lvl-active subnav-3lvl-active');
					$menuBack.removeClass('show');
				} else if($this.hasClass('second-level-item')) {
					$menu.removeClass('subnav-3lvl-active subnav-2lvl-active');
					$submenusLvl2Wrap.removeClass('opened');
					$submenusLvl2Wrap.find('.sub-menu').removeClass('show');
					$submenusLvl1Wrap.find('a.active').removeClass('active');
					$submenusLvl2Wrap.find('a.active').removeClass('active');
					if ( $submenusLvl3.length ) {
						$submenusLvl3Wrap.removeClass('opened');
						$submenusLvl3Wrap.find('.sub-menu').removeClass('show');
						$submenusLvl3Wrap.find('a.active').removeClass('active');
					}
				} else if($this.hasClass('third-level-item')) {
					$menu.removeClass('subnav-3lvl-active');
					$submenusLvl3Wrap.removeClass('opened');
					$submenusLvl3Wrap.find('.sub-menu').removeClass('show');
					$submenusLvl2Wrap.find('a.active').removeClass('active');
				}
				$submenusLvl3Wrap.find('a.active').removeClass('active');
			}

			$menuWrap.find('.menu-item').on('mouseenter', function () {
				if( app.options.isMobile || app.options.isTablet ) {
					return;
				} else {
					let $this = $(this);
					if ( $this.hasClass('menu-item-has-children') ) {
						stopAccumulating()
						hoverOnMenuItemWithChild($this)

						$this.one('mouseleave', () => {
							startAccumulating($this);
						})
					} else {
						if ( intervalId ) return		
						hoverOnSimpleMenuItem($this)
					}					
				}

				if( $menu.hasClass('subnav-active') ) {
					$submenusLvl1Wrap.one('mouseenter', () => {
						stopAccumulating();
					})
				}
				if( $menu.hasClass('subnav-2lvl-active') ) {
					$submenusLvl2Wrap.one('mouseenter', () => {
						stopAccumulating();
					})
				}
				if( $menu.hasClass('subnav-3lvl-active') ) {
					$submenusLvl3Wrap.one('mouseenter', () => {
						stopAccumulating();
					})
				}
			});

			$menuWrap.find('.menu-item').children('a').on('click', function (e) {
					let $link = $(this);

					if( app.options.isMobile || app.options.isTablet ) {
						if( $(e.target).hasClass('parent-menu-item-arrow') ) {
							e.preventDefault();
							let $this = $(this).parent('li');
							if ( $this.hasClass('menu-item-has-children') ) {
								let id = $this.attr('id');
								$menu.addClass('subnav-active');
								$menuBack.addClass('show');
								if($this.hasClass('first-level-item')) {
									$submenusLvl1Wrap.find('.sub-menu').removeClass('show');
									$submenusLvl1Wrap.find(`#submenu-${id}`).addClass('show');
									$submenusLvl1Wrap.addClass('opened');
								} else if($this.hasClass('second-level-item')) {
									$menu.addClass('subnav-2lvl-active');
									$submenusLvl2Wrap.find('.sub-menu').removeClass('show');
									$submenusLvl2Wrap.find(`#submenu-${id}`).addClass('show');
									$submenusLvl2Wrap.addClass('opened');
								} else if($this.hasClass('third-level-item')) {
									$menu.addClass('subnav-3lvl-active');
									$submenusLvl3Wrap.find('.sub-menu').removeClass('show');
									$submenusLvl3Wrap.find(`#submenu-${id}`).addClass('show');
									$submenusLvl3Wrap.addClass('opened');
								}
								MainMenuScrollHint.parentScrollHandlerDebounced();
							} else {
								$submenusLvl1Wrap.find('.sub-menu').removeClass('show');
								$submenusLvl1Wrap.removeClass('opened');
								if ( $submenusLvl2.length ) {
									$submenusLvl2Wrap.find('.sub-menu').removeClass('show');
									$submenusLvl2Wrap.removeClass('opened');
								}
								if ( $submenusLvl3.length ) {
									$submenusLvl3Wrap.find('.sub-menu').removeClass('show');
									$submenusLvl3Wrap.removeClass('opened');
								}
								$menuBack.removeClass('show');
								$menu.removeClass('subnav-active subnav-2lvl-active subnav-3lvl-active');
							}
						} else if($link.attr('href') == '#') {
							e.preventDefault();
						}
					} else {
						return;
					}
				}
			);

			$menuInner.on('mouseleave', function () {
				if( app.options.isMobile || app.options.isTablet ) {
					return;
				} else {
					$menuInner.find('.sub-menu').removeClass('show');
					$submenusLvl1Wrap.removeClass('opened');
					if ( $submenusLvl3.length ) {
						$submenusLvl2Wrap.removeClass('opened');
					}
					if ( $submenusLvl3.length ) {
						$submenusLvl3Wrap.removeClass('opened');
					}
					$menuWrap.find('a.active').removeClass('active');
					$menu.removeClass('subnav-active subnav-2lvl-active subnav-3lvl-active');
				}
			});

			if( $menuBack.length ) {
				$menuBack.on('click', function (e) {
					e.preventDefault();

					if($submenusLvl3Wrap.hasClass('opened')) {
						$submenusLvl3Wrap.find('.sub-menu').removeClass('show');
						$submenusLvl3Wrap.removeClass('opened');
						$menu.removeClass('subnav-3lvl-active');
						return;
					} else if($submenusLvl2Wrap.hasClass('opened')) {
						$submenusLvl2Wrap.find('.sub-menu').removeClass('show');
						$submenusLvl2Wrap.removeClass('opened');
						$menu.removeClass('subnav-2lvl-active subnav-3lvl-active');
						return;
					} else {
						$submenusLvl1Wrap.find('.sub-menu').removeClass('show');
						$submenusLvl1Wrap.removeClass('opened');
						$menuBack.removeClass('show');
						$menu.removeClass('subnav-active subnav-2lvl-active subnav-3lvl-active');
					}
					MainMenuScrollHint.parentScrollHandlerDebounced()
				});
			}
		}

		if( $section.hasClass('page-header--v1') ) {
			let $desktopMenu = $section.find('#desktop-menu>.menu-item-has-children>.sub-menu');

			if( $desktopMenu.length ) {
				$desktopMenu.each(function (e) {
					let $subMenu = $(this);
					$subMenu.wrap('<div class="sub-menu__wrapper"></div>');

					if( !$subMenu.find('.menu-item-has-children').length ) {
						$subMenu.addClass('one-level');
					} else {
						$subMenu.find('.menu-item-has-children').on('mouseenter', function (e) {
							if($(this)[0].getBoundingClientRect().right > document.querySelector(webSiteWrapperSelector).clientWidth - 276) {
								$(this).children('.sub-menu').addClass('to-left');
							} else {
								$(this).children('.sub-menu').removeClass('to-left');
							}
						});
					}
				});
			}
		}
	}

	const customScrollbarsForMenu = function() {
		if ($(`${webSiteWrapperSelector} .main-menu`).find('.scrollbar-outer').length) {
			setTimeout(function () {
				$(`${webSiteWrapperSelector} .main-menu`).find('.scrollbar-outer:not(.scroll-content)').scrollbar({
					ignoreMobile: true,
					ignoreOverlay: true,
					// disableBodyScroll: true,
					passive: true,
					onUpdate:
						MainMenuScrollHint.windowResizeHandlerDebounced.bind(
							MainMenuScrollHint
						),
				});
			}, 1000);
		}
	}

    let initializeBlock = function(section = false, initializeMenu = true) {
		const $section = section ? $(section) : $('.page-header');

		MainMenuScrollHint.windowResizeHandlerDebounced = debounce(
			MainMenuScrollHint.windowResizeHandler,
			1000
		);

		MainMenuScrollHint.parentScrollHandlerDebounced = debounce(
			MainMenuScrollHint.parentScrollHandler,
			400
		);
		MainMenuScrollHint.windowResizeHandlerDebounced();
		MainMenuScrollHint.initilize();

		if(initializeMenu) {
			mainMenu( $section )
		}
		customScrollbarsForMenu( $section )
    }

	window.acf.addAction("ready", function () {
        const siteEditor = window.acf.isGutenberg();
 
        if (siteEditor) {
            // site editor (back-end)
            window.acf.addAction(
                'render_block_preview/type=section-header',
                adminInitializeBlock( initializeBlock, '.page-header' )
            );
        } else {
            // front-end
			$(document).ready(function(){
				initializeBlock();
		
				window.addEventListener('resize', function () {
					initializeBlock(false, false);
				});
			});
        }
    });
})(jQuery);