import ready from 'Utils/documentReady.js';
import getScrollSize from 'Utils/getScrollSize.js';

ready(function() {
  const body = document.querySelector('body');

  console.log('DOM героически построен!');
  // Добавление кастомного свойства с системной шириной скролла
  document.documentElement.style.setProperty('--css-scroll-size', `${getScrollSize()}px`);

  body.addEventListener('click', (e) => {
    if (e.target.matches('.close-hidden-menu')) {
      document.getElementById('hiddenMenu').classList.remove('active');
      body.classList.remove('of-h');
    }
  });

  const vMenuItems = document.querySelectorAll('.v-menu');

  if (vMenuItems.length > 0) {
      vMenuItems.forEach(menu => {
        const alreadyActive = menu.querySelectorAll('.v-menu__l-item.active');

        if (alreadyActive.length > 0) {
          alreadyActive.forEach(item => {
            const menuWrapper = item.querySelector('.v-menu__l-item-menu-wrapper');
            
            if (menuWrapper) {
              menuWrapper.style.height = 'auto';
            }
          });
        }

        menu.addEventListener('click', (e) => {
            if (!menu.classList.contains('inaction')) {
                if (e.target.classList.contains('v-menu__l-item-toggle')) {
                    const parenTarget = e.target.closest('.v-menu__l-item');
                    const menuWrapper = parenTarget.querySelector('.v-menu__l-item-menu-wrapper');
                    const menuHeight = menuWrapper.firstElementChild.clientHeight;

                    if (parenTarget.classList.contains('active')) {
                        menuWrapper.style.height = `${menuHeight}px`;
                        setTimeout(() => {
                            parenTarget.classList.remove('active');
                            menuWrapper.style.height = 0;
                        }, 1);
                    } else {
                        menu.classList.add('inaction');
                        parenTarget.classList.add('active');
                        menuWrapper.style.height = `${menuHeight}px`;
                        setTimeout(() => {
                            menuWrapper.style.height = 'auto';
                            menu.classList.remove('inaction');
                        }, 350);
                    }
                }                    
            }
        });
    });
  }

});

// import $ from 'jquery'; // Перед использованием установить как зависимость
// $(function() {
//   console.log('jQuery героически сработал!');
// });
