import { useLayoutStore } from '../stores/layout';

export function handleReactiveness() {
  const layoutStore = useLayoutStore();
  layoutStore.setupResizeListenner();

  (function setupEtapeListeCollapse() {
    const listeToggleButton = document.querySelector('#retractable-message');

    const listeEtape = document.querySelector('#etapes-liste');

    const animationToggle = document.querySelector('#animation-toggle');

    if (!layoutStore.isDesktop) layoutStore.collapseEtapeListe(listeEtape, animationToggle);

    window.addEventListener('resize', () => {
      if (layoutStore.isDesktop && layoutStore.isEtapeListRetracted) {
        layoutStore.expandEtapeListe(listeEtape, animationToggle);
      } else if (!layoutStore.isDesktop && !layoutStore.isEtapeListRetracted) {
        layoutStore.collapseEtapeListe(listeEtape, animationToggle);
      }
    });

    listeToggleButton.addEventListener('click', () => {
      if (!layoutStore.isDesktop) {
        if (!layoutStore.isEtapeListRetracted) {
          layoutStore.collapseEtapeListe(listeEtape, animationToggle);
        } else {
          layoutStore.expandEtapeListe(listeEtape, animationToggle);
        }
      }
    });
  })();

}

export function setMenuToggle() {
    const layoutStore = useLayoutStore();
    const menuBurger = document.querySelector('#hamburger');
    const menuContainer = document.querySelector('#block-caravane-mainnavigation > #menu > ul');

    layoutStore.setUpHamburgerToggle(menuBurger, menuContainer);
}

export function setHamburgerWhenLogged(drupalSettings) {
    if (drupalSettings.user.uid != 0) {
      const menuBurger = document.querySelector('#hamburger');
      const menuTitle = document.querySelector('#menu-title');
      const menuContainer = document.querySelector('#block-caravane-mainnavigation > #menu > ul');
      const header = document.querySelector('.dialog-off-canvas-main-canvas');
      const headerTop = header.getBoundingClientRect().top;

      menuTitle.style.top = `${headerTop}px`;
      menuBurger.style.top = `${headerTop}px`;
      menuContainer.style.paddingTop = `${headerTop}px`;
    }
}