"use client";

import { useEffect, useRef, useState } from "react";
import { ChevronLeft, ChevronRight, ListFilter } from "lucide-react";

export function MenuCategoryNav({
  categories,
}: {
  categories: Array<{ name: string; slug: string }>;
}) {
  const [activeSlug, setActiveSlug] = useState(categories[0]?.slug ?? "");
  const scrollerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const sections = categories
      .map((category) => document.getElementById(`menu-${category.slug}`))
      .filter((section): section is HTMLElement => Boolean(section));

    const observer = new IntersectionObserver(
      (entries) => {
        const visible = entries
          .filter((entry) => entry.isIntersecting)
          .sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top)[0];
        if (visible) setActiveSlug(visible.target.id.replace("menu-", ""));
      },
      { rootMargin: "-175px 0px -68% 0px", threshold: 0 }
    );

    sections.forEach((section) => observer.observe(section));
    return () => observer.disconnect();
  }, [categories]);

  useEffect(() => {
    scrollerRef.current
      ?.querySelector<HTMLButtonElement>(`[data-slug="${activeSlug}"]`)
      ?.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" });
  }, [activeSlug]);

  function goToCategory(slug: string) {
    setActiveSlug(slug);
    document.getElementById(`menu-${slug}`)?.scrollIntoView({ behavior: "smooth", block: "start" });
    window.history.replaceState(null, "", `#menu-${slug}`);
  }

  function move(direction: number) {
    scrollerRef.current?.scrollBy({
      left: direction * Math.min(scrollerRef.current.clientWidth * 0.72, 680),
      behavior: "smooth",
    });
  }

  return (
    <nav className="menu-category-nav" aria-label="Menu categories">
      <div className="menu-category-mobile">
        <ListFilter size={17} />
        <select value={activeSlug} onChange={(event) => goToCategory(event.target.value)}>
          {categories.map((category) => (
            <option value={category.slug} key={category.slug}>
              {category.name}
            </option>
          ))}
        </select>
      </div>
      <button className="menu-category-arrow previous" type="button" onClick={() => move(-1)} aria-label="Previous categories">
        <ChevronLeft />
      </button>
      <div className="menu-category-scroller" ref={scrollerRef}>
        {categories.map((category) => (
          <button
            className={activeSlug === category.slug ? "active" : ""}
            type="button"
            data-slug={category.slug}
            onClick={() => goToCategory(category.slug)}
            key={category.slug}
          >
            {category.name}
          </button>
        ))}
      </div>
      <button className="menu-category-arrow next" type="button" onClick={() => move(1)} aria-label="Next categories">
        <ChevronRight />
      </button>
    </nav>
  );
}