import './menu.local-tasks.scss';

document.addEventListener('DOMContentLoaded', () => {
  const HTML = document.documentElement;
  const MENU_LOCAL_TASKS = document.querySelector('[data-js="menu-local-tasks"]');

  let resizeTimeout;
  let lastMenuLocalTasksHeight = null;

  const updateMenuLocalTasksHeight = () => {
    let menuLocalTasksHeight = MENU_LOCAL_TASKS.clientHeight;

    // Only update if the value has changed to avoid unnecessary DOM updates.
    if (lastMenuLocalTasksHeight !== menuLocalTasksHeight) {
      HTML.style.setProperty('--menu-local-tasks-height', `${menuLocalTasksHeight}px`);

      lastMenuLocalTasksHeight = menuLocalTasksHeight;
    }
  };

  /**
   * **************************************************
   * Handlers
   */

  const handleResize = () => {
    clearTimeout(resizeTimeout);
    resizeTimeout = setTimeout(updateMenuLocalTasksHeight, 16);
  };

  /**
   * **************************************************
   * Listeners
   */

  window.addEventListener('resize', handleResize, { passive: true });

  updateMenuLocalTasksHeight();
})
