import $ from "jquery";

$(function () {
  var $menu_item_children = $(".top-menu ul.menu li.menu-item-has-children");
  var dropdownsign =
    "<i><svg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><title>Chevron Down</title><path fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M112 184l144 144 144-144'/></svg></i>";

  $menu_item_children.hover(
    function () {
      $(this).find(".sub-menu").stop(true, true).delay(0).fadeIn();
      $(this).addClass("active");
    },
    function () {
      $(this).find(".sub-menu").stop(true, true).delay(0).fadeOut();
      $(this).removeClass("active");
    }
  );
  $menu_item_children.append(dropdownsign);

  var $mobile_trigger = $(".trigger-mobile-menu");
  var $mobile_menu = $(".mobile-menu");
  var $body = $("body");
  var $mobile_menu_item_children = $(".mobile-menu .menu-item-has-children");

  function toggle_mobile_menu() {
    $mobile_trigger.toggleClass("active");
    $mobile_menu.toggleClass("active");
    $body.toggleClass("mobile-menu-active");
  }

  $mobile_trigger.on("click", toggle_mobile_menu);
  $mobile_menu.on(
    "click",
    '.menu-item:not(.menu-item-has-children) [href^="#"]',
    toggle_mobile_menu
  );
  $mobile_menu.on(
    "click",
    '.menu-item:not(.menu-item-has-children) [href^="/#"]',
    toggle_mobile_menu
  );

  $mobile_menu_item_children.append(dropdownsign);
  var $mobile_menu_item_children_trigger = $(
    ".mobile-menu .menu-item-has-children i, .mobile-menu .menu-item-has-children [href^='#']"
  );
  $mobile_menu_item_children_trigger.click(function (e) {
    $(this).parent().children(".sub-menu").toggle();
    $(this).parent().children("i").toggleClass("hide");
    $(this).parent().toggleClass("anchor");
    return false;
  });

  // sticky header
  $(window).scroll(function () {
    const scrollHeight = window.scrollHeight ? window.scrollHeight : 55;
    const scroll = $(this).scrollTop();
    if (scroll >= scrollHeight) {
      $("#header .header").addClass("sticky-header");
      $("#topbar").addClass("sticky-topbar");
      $(".promo-banner").addClass("sticky-promo-banner");
    } else if (scroll == 0) {
      $("#header .header").removeClass("sticky-header");
      $("#topbar").removeClass("sticky-topbar");
      $(".promo-banner").removeClass("sticky-promo-banner");
    }
  });

  $(document).mouseup(function (e) {
    var $container = $("div#cart-wrapper .wrp");

    // if the target of the click isn't the container nor a descendant of the container
    if (!$container.is(e.target) && $container.has(e.target).length === 0) {
      $("div#cart-wrapper").removeClass("active");
      $("body").removeClass("popup-opened");
    }
  });

  const headerResizeObserver = new ResizeObserver((h) => {
    h.forEach((newSize) => {
      let pageOffset = newSize.borderBoxSize[0].blockSize;
      window.rcScrollOffset = pageOffset;
      window.pageScrollOffset = pageOffset;
      document.documentElement.style.setProperty(
        "--header-height",
        pageOffset + "px"
      );
    });
  });

  headerResizeObserver.observe(document.getElementById("header"));

  $(document).mouseup(function (e) {
    var search = $("#search");
    // if the target of the click isn't the search nor a descendant of the search
    if (search.hasClass("active")) {
      if (!search.is(e.target) && search.has(e.target).length === 0) {
        search.removeClass("active");
      }
    }
  });
  $(document.body).on("click", "#search-trigger", function () {
    $("#search").toggleClass("active");
    $(".product-search-field").focus();
  });
  $(document.body).on("click", "#search-close", function () {
    $("#search").removeClass("active");
  });
});
