export const menuList = () => {
  const list = document.getElementById('menu-list');
  const listItem = list.querySelectorAll('.main-nav__item');
  const listItemA = list.querySelectorAll('.main-nav__item > a');
  const listItemB = list.querySelectorAll('.main-nav__item > ul > li');
  const listItemC = list.querySelectorAll('.main-nav__item > ul > li > a');

  listItemA.forEach(item => {
    item.addEventListener('click', (e) => {
      if (item.classList.contains('hide')) {
        item.classList.toggle('show');
        item.classList.toggle('hide');
        item.parentNode.querySelector('ul').hidden = false;

        e.stopPropagation();
        e.preventDefault();
        return false;
      }
    });
  });

  listItemC.forEach(item => {
    item.addEventListener('click', (e) => {
      if (item.classList.contains('hide')) {
        item.classList.toggle('show');
        item.classList.toggle('hide');
        item.parentNode.querySelector('ul').hidden = false;

        e.stopPropagation();
        e.preventDefault();
        return false;
      }
    });
  });

  let click = false;

  listItemB.forEach(item => {
    item.addEventListener('click', (e) => {
      click = true;

      const ul = item.querySelector('ul');
      const a = item.querySelector('a');

      if (item.classList.contains('show')) {
        item.classList.remove('show');
        a.classList.remove('show');
        ul.hidden = true;
      } else {
        item.classList.add('show');
        a.classList.add('show');
        ul.hidden = false;
      }

      setTimeout(() => {
        click = false;
      }, 100);
    });
  });

  listItem.forEach((item) => {
    item.addEventListener('click', (e) => {
      const currentTarget = e.currentTarget;

      const elUl = currentTarget.querySelector('ul');
      const elA = currentTarget.querySelector('a');

      if (currentTarget.classList.contains('show') && !click) {
        currentTarget.classList.remove('show');
        elA.classList.remove('show');
        elUl.hidden = true;
      } else {
        currentTarget.classList.add('show');
        elA.classList.add('show');
        elUl.hidden = false;
      }
    });
  });
};