/*
 *   This content is licensed according to the W3C Software License at
 *   https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
 *
 *   Supplemental JS for the disclosure menu keyboard behavior
 */

'use strict';

// Helper function to find the closest ancestor with a specific tag name
function findAncestor(element, tagName) {
  while (element) {
    if (element.tagName.toLowerCase() === tagName) {
      return element;
    }
    element = element.parentElement;
  }
  return null;
}

class DisclosureNav {
  constructor(domNode) {
    this.rootNode = domNode;
    this.controlledNodes = [];
    this.openIndex = null;
    this.useArrowKeys = true;
    this.topLevelNodes = [
      ...this.rootNode.querySelectorAll(
        '.main-link, .rtds-dropdown-trigger'
      ),
    ];

    this.topLevelNodes.forEach((node) => {
      if (
        node.tagName.toLowerCase() === 'button' &&
        node.hasAttribute('aria-controls')
      ) {
        // Supporta sia <ul> che <div>
        const menu = node.parentNode.querySelector('ul, div');

        if (menu) {
          this.controlledNodes.push(menu);

          node.setAttribute('aria-expanded', 'false');
          this.toggleMenu(menu, false);

          menu.addEventListener('keydown', this.onMenuKeyDown.bind(this));
          node.addEventListener('click', this.onButtonClick.bind(this));
          node.addEventListener('keydown', this.onButtonKeyDown.bind(this));
        }
      } else {
        this.controlledNodes.push(null);
        node.addEventListener('keydown', this.onLinkKeyDown.bind(this));
      }
    });

    // Aggiungiamo un event listener per il click globale
    document.addEventListener('click', this.onDocumentClick.bind(this));
    // Manteniamo anche l'evento focusout per la navigazione da tastiera
    this.rootNode.addEventListener('focusout', this.onBlur.bind(this));
  }

  controlFocusByKey(keyboardEvent, nodeList, currentIndex) {
    switch (keyboardEvent.key) {
      case 'ArrowUp':
      case 'ArrowLeft':
        keyboardEvent.preventDefault();
        if (currentIndex > -1) {
          var prevIndex = Math.max(0, currentIndex - 1);
          nodeList[prevIndex].focus();
        }
        break;
      case 'ArrowDown':
      case 'ArrowRight':
        keyboardEvent.preventDefault();
        if (currentIndex > -1) {
          var nextIndex = Math.min(nodeList.length - 1, currentIndex + 1);
          nodeList[nextIndex].focus();
        }
        break;
      case 'Home':
        keyboardEvent.preventDefault();
        nodeList[0].focus();
        break;
      case 'End':
        keyboardEvent.preventDefault();
        nodeList[nodeList.length - 1].focus();
        break;
    }
  }

  close() {
    this.toggleExpand(this.openIndex, false);
  }

  onBlur(event) {
    // Verifichiamo se il nuovo elemento focusato è all'interno del menu
    const menuContainsFocus = this.rootNode.contains(event.relatedTarget);
    
    // Se il focus è uscito dal menu e non è stato spostato su un altro elemento del menu
    if (!menuContainsFocus && this.openIndex !== null) {
      // Aggiungiamo un piccolo delay per permettere al focus di stabilizzarsi
      setTimeout(() => {
        if (!this.rootNode.contains(document.activeElement)) {
          this.toggleExpand(this.openIndex, false);
        }
      }, 0);
    }
  }

  onButtonClick(event) {
    var target = event.target;

    if (target.tagName.toLowerCase() !== 'button') {
      var buttonAncestor = findAncestor(target, 'button');

      if (buttonAncestor) {
        buttonAncestor.click();
        return;
      }
    }

    var button = event.target;
    var buttonIndex = this.topLevelNodes.indexOf(button);
    var buttonExpanded = button.getAttribute('aria-expanded') === 'true';
    this.toggleExpand(buttonIndex, !buttonExpanded);
  }

  onButtonKeyDown(event) {
    var targetButtonIndex = this.topLevelNodes.indexOf(document.activeElement);

    if (event.key === 'Escape') {
      this.toggleExpand(this.openIndex, false);
    } else if (
      this.useArrowKeys &&
      this.openIndex === targetButtonIndex &&
      event.key === 'ArrowDown'
    ) {
      event.preventDefault();
      this.controlledNodes[this.openIndex].querySelector('a').focus();
    } else if (this.useArrowKeys) {
      this.controlFocusByKey(event, this.topLevelNodes, targetButtonIndex);
    }
  }

  onLinkKeyDown(event) {
    var targetLinkIndex = this.topLevelNodes.indexOf(document.activeElement);

    if (this.useArrowKeys) {
      this.controlFocusByKey(event, this.topLevelNodes, targetLinkIndex);
    }
  }

  onMenuKeyDown(event) {
    if (this.openIndex === null) {
      return;
    }

    var menuLinks = Array.prototype.slice.call(
      this.controlledNodes[this.openIndex].querySelectorAll('a')
    );
    var currentIndex = menuLinks.indexOf(document.activeElement);

    if (event.key === 'Escape') {
      this.topLevelNodes[this.openIndex].focus();
      this.toggleExpand(this.openIndex, false);
    } else if (this.useArrowKeys) {
      this.controlFocusByKey(event, menuLinks, currentIndex);
    }
  }

  toggleExpand(index, expanded) {
    if (this.openIndex !== index) {
      this.toggleExpand(this.openIndex, false);
    }

    if (this.topLevelNodes[index]) {
      this.openIndex = expanded ? index : null;
      this.topLevelNodes[index].setAttribute('aria-expanded', expanded);
      this.toggleMenu(this.controlledNodes[index], expanded);
    }
  }

  toggleMenu(domNode, show) {
    if (domNode) {
      // Trova l'elemento padre con la classe has-dropdown-menu
      const parentMenu = domNode.closest('.has-dropdown-menu');
      // Trova il modulo di navigazione principale
      const navModule = domNode.closest('.rtds-primary-navigation__module');
      
      // Verifica se è un mega menu
      const isMegaMenu = parentMenu && parentMenu.classList.contains('has-megamenu');

      // Gestione delle classi per mostrare/nascondere il menu
      if (show) {
        // Rimuove la classe appropriata in base al tipo di menu
        domNode.classList.remove(isMegaMenu ? 'is-hidden' : 'rtds-hidden');
        domNode.classList.add('is-open');
        if (parentMenu) {
          parentMenu.classList.add('has-dropdown-open');
        }
        if (navModule) {
          navModule.classList.add('has-inner-dropdown-open');
        }
      } else {
        domNode.classList.remove('is-open');
        // Aggiunge la classe appropriata in base al tipo di menu
        domNode.classList.add(isMegaMenu ? 'is-hidden' : 'rtds-hidden');
        if (parentMenu) {
          parentMenu.classList.remove('has-dropdown-open');
        }
        if (navModule) {
          navModule.classList.remove('has-inner-dropdown-open');
        }
      }

      const rect = domNode.getBoundingClientRect();

      const isOverflowingRight = rect.right > window.innerWidth;
      const isOverflowingLeft = rect.left < 0;

      domNode.classList.toggle('rtds-right-0', isOverflowingRight);
      domNode.classList.toggle('rtds-left-0', isOverflowingLeft);
    }
  }

  updateKeyControls(useArrowKeys) {
    this.useArrowKeys = useArrowKeys;
  }

  // Aggiungiamo un nuovo metodo per gestire i click globali
  onDocumentClick(event) {
    // Se il click è all'interno del menu, non facciamo nulla
    if (this.rootNode.contains(event.target)) {
      return;
    }
    
    // Se c'è un menu aperto, lo chiudiamo
    if (this.openIndex !== null) {
      this.toggleExpand(this.openIndex, false);
    }
  }
}

/* Inizializza i Disclosure Menus */

window.addEventListener(
  'load',
  function () {
    // Seleziona sia gli elementi con la classe .has-dropdown-menu che i div con la classe .dropdown
    var menus = document.querySelectorAll('.has-dropdown-menu, div.rtds-dropdown-menu');
    var disclosureMenus = [];

    for (var i = 0; i < menus.length; i++) {
      disclosureMenus[i] = new DisclosureNav(menus[i]);
    }
  },
  false
);