import { Controller } from "@hotwired/stimulus"

function delayAfterAnimate(fn) {
  setTimeout(() => { fn(); },
  window.matchMedia("(prefers-reduced-motion: reduce)").matches ?
    0 : 300); // Should match the duration in tailwind.config.js
}

export default class extends Controller {
  static targets = [ "mobileMenu" ];

  toggleMenu() {
    const menu = this.mobileMenuTarget;
    if (menu.classList.contains('hidden')) {
      menu.classList.remove('hidden');
      menu.classList.remove('motion-safe:animate-slideOut');
      menu.classList.add('motion-safe:animate-slideIn');
      delayAfterAnimate(() => {menu.classList.remove('motion-safe:animate-slideIn');}); // helps with some jank on page reload on mobile FF
    } else {
      menu.classList.remove('motion-safe:animate-slideIn');
      menu.classList.add('motion-safe:animate-slideOut');
      delayAfterAnimate(() => {menu.classList.add('hidden');})
    }
  }
}