"use client";

import { useEffect } from "react";

/**
 * Replaces template main.js menu/search toggles: .mobile-menu / .menu-overlay / .search-popup.
 */
export default function MobileMenuToggle() {
  useEffect(() => {
    const mobileMenu = document.querySelector(".mobile-menu");
    const menuOverlay = document.querySelector(".menu-overlay");
    const searchPopup = document.querySelector(".search-popup");
    const searchOverlay = document.querySelector(".search-overlay");
    const hamburger = document.querySelector(".hamburger-btn");
    const closeBtn = document.querySelector(".mobile-menu .close-btn");
    const searchBtn = document.querySelector(".header-btn .search-btn");

    const openMenu = () => {
      mobileMenu?.classList.add("active");
      menuOverlay?.classList.add("active");
    };
    const closeMenu = () => {
      mobileMenu?.classList.remove("active");
      menuOverlay?.classList.remove("active");
    };
    const openSearch = () => {
      searchPopup?.classList.add("active");
      searchOverlay?.classList.add("active");
    };
    const closeSearch = () => {
      searchPopup?.classList.remove("active");
      searchOverlay?.classList.remove("active");
    };
    const onSearchClick = (e: Event) => {
      e.preventDefault();
      openSearch();
    };

    hamburger?.addEventListener("click", openMenu);
    closeBtn?.addEventListener("click", closeMenu);
    menuOverlay?.addEventListener("click", closeMenu);
    searchBtn?.addEventListener("click", onSearchClick);
    searchOverlay?.addEventListener("click", closeSearch);

    return () => {
      hamburger?.removeEventListener("click", openMenu);
      closeBtn?.removeEventListener("click", closeMenu);
      menuOverlay?.removeEventListener("click", closeMenu);
      searchBtn?.removeEventListener("click", onSearchClick);
      searchOverlay?.removeEventListener("click", closeSearch);
    };
  }, []);

  return null;
}