import documentReady from '@assets/js/documentReady';

documentReady(() => {
  const menu = document.querySelector('.js-menu');
  const menuMobile = document.querySelector('.js-header__main-menu');

  if (!menu) {
    menuMobile.classList.add('hidden');
    return;
  }

  const menuMask = menu.querySelector('.js-menu__mask');

  const nextControl = menu.querySelector('.js-menu__item--next');
  const prevControl = menu.querySelector('.js-menu__item--prev');
  const menuContainer = menu.querySelector('.js-menu__container');

  const menuItems = menuContainer.querySelectorAll('.js-menu__item');
  const firstMenuItem = menuItems[0];
  const firstMenuItemStyle = window.getComputedStyle(firstMenuItem);
  const lastMenuItem = menuItems[menuItems.length - 1];

  const allSubmenu = menu.querySelectorAll('.js-submenu, .js-submenu__content');
  const allBack = menu.querySelectorAll('.js-submenu__item--back');

  let heightSubmenuItem;
  if (allSubmenu.length) {
    const firstSubmenuItem = allSubmenu[0].querySelector('.js-submenu__item');

    if (firstSubmenuItem) {
      heightSubmenuItem = window.getComputedStyle(firstSubmenuItem).height.replace(/\D/g, '');
    }
  }

  allBack.forEach(back => {
    const submenu = back.parentNode.parentNode;
    const submenuContent = back.parentNode;

    back.addEventListener('click', function() {
      if (window.innerWidth >= 768) return;

      if (submenu && submenu.style.display === 'block') {
        submenu.removeAttribute('style');
      }
      if (submenuContent && submenuContent.style.display === 'block') {
        submenuContent.removeAttribute('style');
      }
    });
  });

  allSubmenu.forEach(submenu => {
    const menuContent = submenu.previousElementSibling;
    if (!menuContent) return;

    const submenuStyle = window.getComputedStyle(submenu);

    const isDepartmentsSubmenu = submenu.classList.contains('submenu__content--departments');
    if (isDepartmentsSubmenu) {
      const lengthSubmenuItems = submenu.querySelectorAll('.js-submenu__item').length;
      const heightSubmenu = heightSubmenuItem * lengthSubmenuItems + 16;
      const maxHeightSubmenu = submenuStyle.maxHeight.replace(/\D/g, '');
      const minHeightSubmenu = heightSubmenu > maxHeightSubmenu ? maxHeightSubmenu : heightSubmenu;
      submenu.style.minHeight = `${minHeightSubmenu}px`;
    }

    menuContent.addEventListener('click', function(event) {
      if (window.innerWidth >= 768) return;

      event.preventDefault();
      submenu.style.display = submenuStyle.display === 'none' ? 'block' : 'none';
    });
  });

  menuMobile.addEventListener('click', function() {
    menu.classList.toggle('menu--open');
  });
  menuMask.addEventListener('click', function() {
    menu.classList.remove('menu--open');
  });

  nextControl.addEventListener('click', nextMenu);
  prevControl.addEventListener('click', prevMenu);

  resetMenu();
  window.addEventListener('resize', function() {
    resetMenu();
  });

  function getBoundingClientRect() {
    return {
      menuContainerRect: menuContainer.getBoundingClientRect(),
      firstMenuItemRect: firstMenuItem.getBoundingClientRect(),
      lastMenuItemRect: lastMenuItem.getBoundingClientRect(),
    };
  }

  function resetMenu() {
    const { menuContainerRect, firstMenuItemRect, lastMenuItemRect } = getBoundingClientRect();
    const menuItemsWidth = lastMenuItemRect.right - firstMenuItemRect.left;

    firstMenuItem.removeAttribute('style');

    if (menuContainerRect.width >= menuItemsWidth) {
      nextControl.hidden = true;
      prevControl.hidden = true;
      menuContainer.classList.remove('menu__container--discount-nav-control');
    } else {
      nextControl.hidden = false;
      prevControl.hidden = false;
      menuContainer.classList.add('menu__container--discount-nav-control');
      menu.classList.remove('menu--open');
      allSubmenu.forEach(submenu => {
        submenu.removeAttribute('style');
      });
    }
  }

  function nextMenu(event) {
    event.preventDefault();
    const { menuContainerRect, lastMenuItemRect } = getBoundingClientRect();

    if (lastMenuItemRect.right === menuContainerRect.right) {
      return;
    }

    let marginLeft = 0;

    for (let menuItemIndex = 0; menuItemIndex < menuItems.length; menuItemIndex++) {
      const menuItemRect = menuItems[menuItemIndex].getBoundingClientRect();

      if (menuItemRect.right - 5 > menuContainerRect.right) {
        marginLeft = menuItemRect.right - menuContainerRect.right;
        break;
      }
    }

    const oldMarginLeft = parseFloat(firstMenuItemStyle.marginLeft);
    const newMarginLeft = oldMarginLeft - marginLeft;
    firstMenuItem.style.marginLeft = `${newMarginLeft}px`;
  }

  function prevMenu(event) {
    event.preventDefault();
    const { menuContainerRect, firstMenuItemRect } = getBoundingClientRect();

    if (firstMenuItemRect.left === menuContainerRect.left) {
      return;
    }

    let marginLeft = 0;

    for (let menuItemIndex = 0; menuItemIndex < menuItems.length; menuItemIndex++) {
      const menuItemRect = menuItems[menuItemIndex].getBoundingClientRect();

      if (menuContainerRect.left <= menuItemRect.right + 5) {
        marginLeft = menuContainerRect.left - menuItemRect.left;
        break;
      }
    }

    const oldMarginLeft = parseFloat(firstMenuItemStyle.marginLeft);
    const newMarginLeft = oldMarginLeft + marginLeft;
    firstMenuItem.style.marginLeft = `${newMarginLeft}px`;
  }
});
