import { ref, onMounted, onUnmounted } from 'vue';

const menuEvent = 'wewrimo:header-menu-open';

export function dismissHeaderMenus(except?: HTMLElement | null) {
  document.dispatchEvent(new CustomEvent(menuEvent, { detail: except }));
}

export function useHeaderMenu() {
  const menu = ref<HTMLDivElement | null>(null);
  const trigger = ref<HTMLButtonElement | null>(null);
  const open = ref(false);
  function toggle() {
    if (!open.value) dismissHeaderMenus(menu.value);
    open.value = !open.value;
  }
  function close() {
    open.value = false;
    trigger.value?.focus({ preventScroll: true });
  }
  function outside(event: Event) {
    if (event.target instanceof Node && !menu.value?.contains(event.target)) open.value = false;
  }
  function anotherMenu(event: Event) {
    if ((event as CustomEvent<HTMLElement | null>).detail !== menu.value) open.value = false;
  }
  function escape(event: KeyboardEvent) {
    if (open.value && event.key === 'Escape') {
      event.preventDefault();
      close();
    }
  }
  function suspend() { open.value = false; }
  onMounted(() => {
    document.addEventListener('pointerdown', outside);
    document.addEventListener('focusin', outside);
    document.addEventListener(menuEvent, anotherMenu);
    document.addEventListener('keydown', escape);
    window.addEventListener('pagehide', suspend);
  });
  onUnmounted(() => {
    document.removeEventListener('pointerdown', outside);
    document.removeEventListener('focusin', outside);
    document.removeEventListener(menuEvent, anotherMenu);
    document.removeEventListener('keydown', escape);
    window.removeEventListener('pagehide', suspend);
  });
  return { menu, trigger, open, toggle, close };
}
