document.addEventListener("DOMContentLoaded", display_mega_menu_on_load);
document.addEventListener(
	"astPartialContentRendered",
	display_mega_menu_on_load
);

/**
 * Remove "hidden" class after the page is fully loaded to fix the visibility issue of MegaMenu width.
 */
function display_mega_menu_on_load() {
	var menu_content = document.querySelectorAll(".content-width-mega");
	if (menu_content.length > 0) {
		for (var i = 0; i < menu_content.length; i++) {
			if ((menu_content[i].getAttribute('data-megamenu-trigger') || 'hover') === 'hover') {
				menu_content[i].addEventListener("mouseenter", function (event) {
					var mega_menu_container = event.target.querySelector(
						".astra-mega-menu-width-content"
					);
					if (null !== mega_menu_container) {
						mega_menu_container.classList.remove("ast-hidden");
					}
				});
			}
		}
	}

	var menu_container = document.querySelectorAll(".menu-container-width-mega");
	if (menu_container.length > 0) {
		for (var i = 0; i < menu_container.length; i++) {
			if ((menu_container[i].getAttribute('data-megamenu-trigger') || 'hover') === 'hover') {
				menu_container[i].addEventListener("mouseenter", function (event) {
					var mega_menu_container = event.target.querySelector(
						".astra-mega-menu-width-menu-container"
					);
					if (null !== mega_menu_container) {
						mega_menu_container.classList.remove("ast-hidden");
					}
				});
			}
		}
	}

	var menu_full_width = document.querySelectorAll(".full-width-mega");
	if (menu_full_width.length > 0) {
		for (var i = 0; i < menu_full_width.length; i++) {
			if ((menu_full_width[i].getAttribute('data-megamenu-trigger') || 'hover') === 'hover') {
				menu_full_width[i].addEventListener("mouseenter", function (event) {
					var mega_menu_container = event.target.querySelector(
						".astra-full-megamenu-wrapper"
					);
					var mega_menu_submenu = event.target.querySelector(
						".astra-mega-menu-width-full"
					);
					if (null !== mega_menu_container) {
						mega_menu_container.classList.remove("ast-hidden");
					}
					if (null !== mega_menu_submenu) {
						mega_menu_submenu.classList.remove("ast-hidden");
					}
				});
			}
		}
	}

	var menu_full_width_stretched = document.querySelectorAll(
		".full-stretched-width-mega"
	);
	if (menu_full_width_stretched.length > 0) {
		for (var i = 0; i < menu_full_width_stretched.length; i++) {
			if ((menu_full_width_stretched[i].getAttribute('data-megamenu-trigger') || 'hover') === 'hover') {
				menu_full_width_stretched[i].addEventListener(
					"mouseenter",
					function (event) {
						var mega_menu_container = event.target.querySelector(
							".astra-full-megamenu-wrapper"
						);
						var mega_menu_submenu = event.target.querySelector(
							".astra-mega-menu-width-full-stretched"
						);
						if (null !== mega_menu_container) {
							mega_menu_container.classList.remove("ast-hidden");
						}
						if (null !== mega_menu_submenu) {
							mega_menu_submenu.classList.remove("ast-hidden");
						}
					}
				);
			}
		}
	}

	var customWidthStretched = document.querySelectorAll(".custom-width-mega");
	if (customWidthStretched.length > 0) {
		for (var i = 0; i < customWidthStretched.length; i++) {
			if ((customWidthStretched[i].getAttribute('data-megamenu-trigger') || 'hover') === 'hover') {
				customWidthStretched[i].addEventListener("mouseenter", function (event) {
					var megaMenuSubmenu = event.target.querySelector(
						".astra-mega-menu-width-custom"
					);
					if (null !== megaMenuSubmenu) {
						megaMenuSubmenu.classList.remove("ast-hidden");
					}
				});
			}
		}
	}
}

var items = document.getElementsByClassName("astra-megamenu-li");

function apply_megamenu_width_styles() {
	[].slice.call(items).forEach(container => {
		var calculateMegamenuWidth = function () {
			var ast_container = jQuery(container).parents(".ast-container"),
				$main_container = ast_container.children(),
				$full_width_main_container = ast_container.parent(),
				$this = jQuery(container);

			// Full width mega menu
			if (
				$this.hasClass("full-width-mega") ||
				$this.hasClass("full-stretched-width-mega")
			) {
				$main_container = jQuery($main_container).closest(".ast-container");
			}

			if (
				parseInt(window.innerWidth) > parseInt(astra.break_point) &&
				"ast-hf-mobile-menu" !== $this.parent().attr("id") &&
				"ast-desktop-toggle-menu" !== $this.parent().attr("id")
			) {
				var $menuWidth = $main_container.width(),
					$menuPosition = $main_container.offset(),
					$menuItemPosition = $this.offset(),
					positionLeft =
						$menuItemPosition.left -
						($menuPosition.left +
							parseFloat($main_container.css("paddingLeft"))),
					positionRight = $menuWidth - ($menuItemPosition.left + $menuPosition.left) + 130;

				var $fullMenuWidth = $full_width_main_container.width(),
					$fullMenuPosition = $full_width_main_container.offset(),
					fullPositionLeft =
						$menuItemPosition.left -
						($fullMenuPosition.left +
							parseFloat($full_width_main_container.css("paddingLeft")));

				if ($this.hasClass("custom-width-mega")) {
					var customMegaMenuWidth =
						window
							.getComputedStyle(
								$this.find(".astra-mega-menu-width-custom")[0],
								"::before"
							)
							.getPropertyValue("content") || 1200;

					customMegaMenuWidth = customMegaMenuWidth.replace(/[^0-9]/g, "");
					customMegaMenuWidth = parseInt(customMegaMenuWidth);

					if (customMegaMenuWidth <= $menuWidth) {
						var extra_width = parseInt($menuWidth - customMegaMenuWidth),
							customWithPositionLeft = parseInt(positionLeft - extra_width),
							customWithPositionRight =
								$menuPosition.left - customWithPositionLeft;
					} else {
						var extra_width = parseInt(customMegaMenuWidth - $menuWidth),
							customWithPositionLeft = parseInt(positionLeft + extra_width),
							customWithPositionRight =
								$menuPosition.left + customWithPositionLeft;
					}
				}

				if ($this.hasClass("menu-container-width-mega")) {
					var menu_width_container =
						jQuery(container).parents(".main-navigation");

					if ($full_width_main_container.hasClass("ast-above-header")) {
						menu_width_container = jQuery(".ast-above-header-navigation");
					} else if ($full_width_main_container.hasClass("ast-below-header")) {
						menu_width_container = jQuery(".ast-below-header-actual-nav");
					}

					if (menu_width_container.length) {
						$target_container = menu_width_container;
					} else {
						$target_container = $this.parent("ul");
					}

					$menuWidth = $target_container.width() + "px";
					var $offset_right =
						jQuery(window).width() -
						($target_container.offset().left + $target_container.outerWidth());
					var $current_offset = $this.offset();
					var $width =
							jQuery(window).width() - $offset_right - $current_offset.left,
						positionLeft = parseInt($target_container.width() - $width),
						positionRight =
							parseInt($menuWidth) -
							$this.outerWidth() -
							parseInt($target_container.width() - $width);
				}
				if ($this.hasClass("full-width-mega")) {
					$this
						.find(".astra-full-megamenu-wrapper")
						.css({
							left: "-" + fullPositionLeft + "px",
							width: $fullMenuWidth,
						});
					$this.find(".astra-megamenu").css({ width: $menuWidth });
				} else if ($this.hasClass("full-stretched-width-mega")) {
					$this
						.find(".astra-full-megamenu-wrapper")
						.css({
							left: "-" + fullPositionLeft + "px",
							width: $fullMenuWidth,
						});
				} else if ($this.hasClass("custom-width-mega")) {
					if (astra.isRtl) {
						$this
							.find(".astra-mega-menu-width-custom")
							.css({
								// right: "-" + customWithPositionRight + "px",
								width: customMegaMenuWidth + "px",
							});
					} else {
						$this
							.find(".astra-mega-menu-width-custom")
							.css({
								left: "-" + customWithPositionLeft + "px",
								width: customMegaMenuWidth + "px",
							});
					}
				} else if ($this.hasClass("content-width-mega")){
                                        if (astra.isRtl){
                                                var menuItemRight = $menuPosition.left + $menuWidth - ($menuItemPosition.left + $this.outerWidth());
                                                $this
                                                        .find(".astra-megamenu")
                                                        .css({ right: "-" + menuItemRight + "px", width: $menuWidth })
                                                        .data("astra-hover-right", menuItemRight);
                                        } else {
						$this
							.find(".astra-megamenu")
							.css({ left: "-" + positionLeft + "px", width: $menuWidth });
					}
				}
				else {
					if (astra.isRtl) {
						$this
							.find(".astra-megamenu")
							.css({ right: "-" + positionRight + "px", width: $menuWidth });
                                                $this.data("astra-hover-right", positionRight);
					} else {
						$this
							.find(".astra-megamenu")
							.css({ left: "-" + positionLeft + "px", width: $menuWidth });
					}
				}
			} else {
				if (astra.isRtl) {
					$this
						.find(".astra-megamenu")
						.css({ right: "", width: "", "background-image": "" });
					$this
						.find(".astra-full-megamenu-wrapper")
						.css({ right: "", width: "", "background-image": "" });
				} else {
					$this
						.find(".astra-megamenu")
						.css({ left: "", width: "", "background-image": "" });
					$this
						.find(".astra-full-megamenu-wrapper")
						.css({ left: "", width: "", "background-image": "" });
				}
			}
		};

		if ((jQuery(container).data('megamenu-trigger') || 'hover') === 'click') {
			jQuery(container).find('> a').on('click', function (e) {
				var $this = jQuery(container);
				var isOpen = $this.hasClass('megamenu-active');

				jQuery('.astra-megamenu-li.megamenu-active').removeClass('megamenu-active');

				if (!isOpen) {
					e.preventDefault();
					$this.addClass('megamenu-active');
					$this.find('.ast-hidden').removeClass('ast-hidden');
					calculateMegamenuWidth();
				}
			});

			jQuery(document).on('click', function (e) {
				if (!jQuery(e.target).closest('.astra-megamenu-li').length) {
					jQuery('.astra-megamenu-li.megamenu-active').removeClass('megamenu-active');
				}
			});
		} else {
			jQuery(container).hover(calculateMegamenuWidth);

			jQuery(container).mouseenter(function () {
				document.dispatchEvent(
					new CustomEvent("astra_mega_menu_on_hover", { detail: {} })
				);
			});
		}
	});
}

apply_megamenu_width_styles();

document.addEventListener("astMenuHoverStyleChanged", function () {
	apply_megamenu_width_styles();
});

// Achieve accessibility for megamenus using focusin on <a>.
[].slice.call(items).forEach(function (container) {
	var ast_container = jQuery(container).parents(".ast-container"),
		$main_container = ast_container.children(),
		$full_width_main_container = ast_container.parent(),
		$this = jQuery(container);

	// Full width mega menu
	if (
		$this.hasClass("full-width-mega") ||
		$this.hasClass("full-stretched-width-mega")
	) {
		$main_container = jQuery($main_container).closest(".ast-container");
		$this.find(".astra-full-megamenu-wrapper").removeClass("ast-hidden");
	}

	$this.find(".menu-link").focusin(function (e) {
		if (!astra.is_header_footer_builder_active) {
			$this.find(".sub-menu").addClass("astra-megamenu-focus");
			$this
				.find(".astra-full-megamenu-wrapper")
				.addClass("astra-megamenu-wrapper-focus");
		}

		$this.find(".sub-menu").removeClass("ast-hidden");
		if (
			parseInt(jQuery(window).width()) > parseInt(astra.break_point) &&
			"ast-hf-mobile-menu" !== $this.parent().attr("id") &&
			"ast-desktop-toggle-menu" !== $this.parent().attr("id")
		) {
			var $menuWidth = $main_container.width(),
				$menuPosition = $main_container.offset(),
				$menuItemPosition = $this.offset(),
				positionLeft =
					$menuItemPosition.left -
					($menuPosition.left + parseFloat($main_container.css("paddingLeft"))),
                                positionRight = $menuWidth - ($menuItemPosition.left + $menuPosition.left) + 130;

			var $fullMenuWidth = $full_width_main_container.width(),
				$fullMenuPosition = $full_width_main_container.offset(),
				fullPositionLeft =
					$menuItemPosition.left -
					($fullMenuPosition.left +
						parseFloat($full_width_main_container.css("paddingLeft")));

			if ($this.hasClass("custom-width-mega")) {
				var customMegaMenuWidth =
					window
						.getComputedStyle(
							$this.find(".astra-mega-menu-width-custom")[0],
							"::before"
						)
						.getPropertyValue("content") || 1200;

				customMegaMenuWidth = customMegaMenuWidth.replace(/[^0-9]/g, "");
				customMegaMenuWidth = parseInt(customMegaMenuWidth);

				if (customMegaMenuWidth <= $menuWidth) {
					var extra_width = parseInt($menuWidth - customMegaMenuWidth),
						customWithPositionLeft = parseInt(positionLeft - extra_width),
						customWithPositionRight =
							$menuPosition.left - customWithPositionLeft;
				} else {
					var extra_width = parseInt(customMegaMenuWidth - $menuWidth),
						customWithPositionLeft = parseInt(positionLeft + extra_width),
						customWithPositionRight =
							$menuPosition.left + customWithPositionLeft;
				}
			}

			if ($this.hasClass("menu-container-width-mega")) {
				var menu_width_container =
					jQuery(container).parents(".main-navigation");

				if ($full_width_main_container.hasClass("ast-above-header")) {
					menu_width_container = jQuery(".ast-above-header-navigation");
				} else if ($full_width_main_container.hasClass("ast-below-header")) {
					menu_width_container = jQuery(".ast-below-header-actual-nav");
				}

				if (menu_width_container.length) {
					$target_container = menu_width_container;
				} else {
					$target_container = $this.parent("ul");
				}

				$menuWidth = $target_container.width() + "px";
				var $offset_right =
					jQuery(window).width() -
					($target_container.offset().left + $target_container.outerWidth());
				var $current_offset = $this.offset();
				var $width =
						jQuery(window).width() - $offset_right - $current_offset.left,
					positionLeft = parseInt($target_container.width() - $width),
					positionRight =
						parseInt($menuWidth) -
						$this.outerWidth() -
						parseInt($target_container.width() - $width);
			}
			if ($this.hasClass("full-width-mega")) {
				$this
					.find(".astra-full-megamenu-wrapper")
					.css({ left: "-" + fullPositionLeft + "px", width: $fullMenuWidth });
				$this.find(".astra-megamenu").css({ width: $menuWidth });
			} else if ($this.hasClass("full-stretched-width-mega")) {
				$this
					.find(".astra-full-megamenu-wrapper")
					.css({ left: "-" + fullPositionLeft + "px", width: $fullMenuWidth });
                        } else if ($this.hasClass("custom-width-mega")) {
                                if (astra.isRtl) {
                                        $this
                                                .find(".astra-mega-menu-width-custom")
                                                .css({
                                                        right: "-" + customWithPositionRight + "px",
                                                        width: customMegaMenuWidth + "px",
                                                });
                                } else {
                                        $this
                                                .find(".astra-mega-menu-width-custom")
                                                .css({
                                                        left: "-" + customWithPositionLeft + "px",
                                                        width: customMegaMenuWidth + "px",
                                                });
                                }
                        } else if ($this.hasClass("content-width-mega")) {
                                if (astra.isRtl){
                                        var menuItemRight = $menuPosition.left + $menuWidth - ($menuItemPosition.left + $this.outerWidth());
                                        $this
                                                .find(".astra-megamenu")
                                                .css({ right: "-" + menuItemRight + "px", width: $menuWidth })
                                                .data("astra-hover-right", menuItemRight);
                                } else {
                                        $this
                                                .find(".astra-megamenu")
                                                .css({ left: "-" + positionLeft + "px", width: $menuWidth });
                                }
                        } else {
                                    var hoverRight = $this.data("astra-hover-right");
                                    var finalRight = typeof hoverRight !== "undefined" ? hoverRight : positionRight;
                                if (astra.isRtl) {
                                          $this
                                                  .find(".astra-megamenu")
                                                  .css({ right: "-" + finalRight + "px", width: $menuWidth })
                                                  .data("astra-hover-right", finalRight);
				} else {
					$this
						.find(".astra-megamenu")
						.css({ left: "-" + positionLeft + "px", width: $menuWidth });
				}
			}
		} else {
			if (astra.isRtl) {
				$this
					.find(".astra-megamenu")
					.css({ right: "", width: "", "background-image": "" });
				$this
					.find(".astra-full-megamenu-wrapper")
					.css({ right: "", width: "", "background-image": "" });
			} else {
				$this
					.find(".astra-megamenu")
					.css({ left: "", width: "", "background-image": "" });
				$this
					.find(".astra-full-megamenu-wrapper")
					.css({ left: "", width: "", "background-image": "" });
			}
		}
	});

	if (!astra.is_header_footer_builder_active) {
		$this.find(".menu-link").keydown(function (e) {
			if (e.which == 9 && e.shiftKey) {
				$this.find(".sub-menu").removeClass("astra-megamenu-focus");
				$this
					.find(".astra-full-megamenu-wrapper")
					.removeClass("astra-megamenu-wrapper-focus");
			}
		});

		jQuery(container)
			.find(".sub-menu .menu-item")
			.last()
			.focusout(function () {
				$this.find(".sub-menu").removeClass("astra-megamenu-focus");
				$this
					.find(".astra-full-megamenu-wrapper")
					.removeClass("astra-megamenu-wrapper-focus");
			});

		jQuery(window).click(function () {
			$this.find(".sub-menu").removeClass("astra-megamenu-focus");
			$this
				.find(".astra-full-megamenu-wrapper")
				.removeClass("astra-megamenu-wrapper-focus");
		});
	}

	$this.click(function (event) {
		if (!jQuery(event.target).hasClass("menu-item")) {
			return;
		}
		// event.stopPropagation();
		event.stopImmediatePropagation();
	});
});
