/**
 * @file JS functions for the election menu block.
 */
(function lgdElectionMenuScript(Drupal) {
  Drupal.behaviors.lgdElectionMenu = {
    attach(context) {
      const electionMenuBlocks = once(
        'allElectionMenuBlocks',
        '.election-menu-block',
        context,
      );

      // This reset function is used to reset the block to its default state.
      function handleResetMenu(menu, block) {
        menu.removeAttribute('aria-hidden');
        const menuButtonContainer = block.querySelector(
          '.election-menu-block__button-container',
        );
        if (menuButtonContainer) {
          menuButtonContainer.remove();
        }
      }

      // This function is used to set up the menu toggle for mobile.
      function handleSetUpMenu() {
        if (electionMenuBlocks) {
          electionMenuBlocks.forEach((block) => {
            const menu = block.querySelector('#election-menu');

            const menuButtonContainer = document.createElement('div');
            menuButtonContainer.classList.add(
              'election-menu-block__button-container',
            );

            const menuButtonContainerRendered = block.querySelector(
              '.election-menu-block__button-container',
            );

            if (!menuButtonContainerRendered) {
              const button = document.createElement('button');
              button.setAttribute('type', 'button');
              button.setAttribute('aria-expanded', 'false');
              button.setAttribute('aria-controls', menu.id);
              const chevron =
                '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" aria-hidden="true" focusable="false"><path d="M297.4 470.6C309.9 483.1 330.2 483.1 342.7 470.6L534.7 278.6C547.2 266.1 547.2 245.8 534.7 233.3C522.2 220.8 501.9 220.8 489.4 233.3L320 402.7L150.6 233.4C138.1 220.9 117.8 220.9 105.3 233.4C92.8 245.9 92.8 266.2 105.3 278.7L297.3 470.7z"/></svg>';
              button.innerHTML = chevron + Drupal.t('Election Menu');
              menuButtonContainer.append(button);
              block.prepend(menuButtonContainer);
              menu.setAttribute('aria-hidden', 'true');

              button.addEventListener('click', () => {
                const expanded =
                  button.getAttribute('aria-expanded') === 'true';
                button.setAttribute('aria-expanded', !expanded);
                menu.setAttribute('aria-hidden', expanded);
              });
            }
          });
        }
      }

      // This function is used to handle the menu on resize.
      // We check the window width and if it is less than 768px we set up the
      // menu. If not, we reset the menu.
      function handleElectionMenus() {
        const windowWidth = window.innerWidth;
        if (windowWidth < 768) {
          handleSetUpMenu();
        } else if (electionMenuBlocks) {
          electionMenuBlocks.forEach((block) => {
            const menu = block.querySelector('#election-menu');
            handleResetMenu(menu, block);
          });
        }
      }

      handleElectionMenus();
      window.addEventListener(
        'resize',
        Drupal.debounce(handleElectionMenus, 50, true),
      );
    },
  };
})(Drupal);
