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

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

  // toggle collapse and scroll for etape liste
  (function setEtapeListe() {
    const listeEtape = document.querySelector('#etapes-liste');
    const listeToggleButton = document.querySelector('#retractable-message');
    const column = document.querySelector('.layout__region--third');
    const header = document.querySelector('.layout-container > header');

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

    const EtapeListeScrollElements = {
      listeEtape,
      column,
      listeEtapeContent: listeEtape.querySelector('.item-list'),
      header,
      animationToggle: animationToggle.querySelector('.animation-toggle-container')
    }

    layoutStore.shouldEtapeListeScroll(EtapeListeScrollElements);

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

    window.addEventListener('resize', () => {
      layoutStore.shouldEtapeListeScroll(EtapeListeScrollElements);
  
      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);
          layoutStore.shouldEtapeListeScroll(EtapeListeScrollElements);
        }
      }
    });
  })();
}

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`;
    }
}