import { $, $$, isMobile } from '@utils';
import { disableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock';

export default () => {
  const catalogDropdown = $('.catalog-popup');
  const menuLinks = [...$$('.main-header__dropdown-wrp a')];
  const mobileCatalog = $('.main-header__dropdown-wrp');
  const toggleMobileCatalog = $('.main-header__dropdown-menu-close');

  const onCurrentClick = (e) => {
    e.preventDefault();

    if (isMobile()) {
      mobileCatalog.classList.toggle('js-opened');
      disableBodyScroll(catalogDropdown);
    } else {
      window.location = e.currentTarget.href;
    }
  };

  if (toggleMobileCatalog) {
    toggleMobileCatalog.addEventListener('click', function () {
      mobileCatalog.classList.toggle('js-opened');
      clearAllBodyScrollLocks();
    });
  }

  menuLinks.forEach((link) => {
    link.addEventListener('click', onCurrentClick);
  });

  [...$$('.menu__item')].forEach((item) => {
    item.addEventListener('mouseover', (ev) => {
      if (item.dataset.value) {
        ev.preventDefault();
        ev.stopPropagation();

        const dropDownList = item.closest('.menu__dropdown-lists');
        const menuList = item.closest('.menu__list');
        const active = menuList.querySelector('.menu__item-active');

        if (active) {
          active.classList.remove('menu__item-active');
        }
        item.classList.add('menu__item-active');
        const haveChild = dropDownList.nextSibling;
        if (haveChild) {
          const activeItems = haveChild.querySelectorAll('.menu__item-active');
          [...activeItems].forEach((item) => {
            item.classList.remove('menu__item-active');
          });

          const isFirst = haveChild.nextSibling;
          if (isFirst) {
            const lastVisible = isFirst.querySelectorAll('.menu__list.visible');
            [...lastVisible].forEach((item) => {
              item.classList.remove('visible');
            });

            const activeItems2 = isFirst.querySelectorAll('.menu__item-active');
            [...activeItems2].forEach((item) => {
              item.classList.remove('menu__item-active');
            });

            const isSecond = isFirst.nextSibling;
            if (isSecond) {
              const lastlastVisible = isSecond.querySelectorAll('.menu__list.visible');
              [...lastlastVisible].forEach((item) => {
                item.classList.remove('visible');
              });

              const activeItems3 = isSecond.querySelectorAll('.menu__item-active');
              [...activeItems3].forEach((item) => {
                item.classList.remove('menu__item-active');
              });
            }
          }

          const nextVisible = haveChild.querySelectorAll('.menu__list.visible');
          [...nextVisible].forEach((item) => {
            item.classList.remove('visible');
          });

          const toShow = haveChild.querySelector(`.menu__list[data-value="${item.dataset.value}"]`);
          if (toShow) {
            toShow.classList.add('visible');
          }
        }
      }
    });
  });
};