"use client";

import { getDocsTocs } from "@/lib/markdown";
import clsx from "clsx";
import Link from "next/link";
import { useState, useRef, useEffect } from "react";
import { useTheme } from "@mui/material/styles";
type Props = { data: Awaited<ReturnType<typeof getDocsTocs>> };

export default function TocObserver({ data }: Props) {
  const [activeId, setActiveId] = useState<string | null>(null);
  const observer = useRef<IntersectionObserver | null>(null);
  const theme = useTheme();
  useEffect(() => {
    const handleIntersect = (entries: IntersectionObserverEntry[]) => {
      const visibleEntry = entries.find((entry) => entry.isIntersecting);
      if (visibleEntry) {
        setActiveId(visibleEntry.target.id);
      }
    };

    // Initialize IntersectionObserver
    observer.current = new IntersectionObserver(handleIntersect, {
      root: null,
      rootMargin: "-20px 0px 0px 0px",
      threshold: 0.1,
    });

    // Get the elements to observe
    const elements = data.map((item) =>
      document.getElementById(item.href.slice(1))
    );

    elements.forEach((el) => {
      if (el && observer.current) {
        observer.current.observe(el);
      }
    });

    return () => {
      if (observer.current) {
        elements.forEach((el) => {
          if (el) {
            observer.current!.unobserve(el);
          }
        });
      }
    };
  }, [data]);

  return (
    <div
      className={clsx(
        "flex flex-col gap-2.5 text-sm ml-0.5",
        theme.palette.mode === "dark"
          ? "dark:text-stone-300/85"
          : "text-stone-800"
      )}
    >
      {data.map(({ href, level, text }) => (
        <Link
          key={href}
          href={href}
          className={clsx(
            `pl-${(level - 2) * 4}`, // คำนวณ padding ตามระดับของ level
            theme.palette.mode === "dark" ? "text-white" : "text-black", // เงื่อนไขเช็คโหมดธีมเพื่อปรับสี
            {
              "font-bold": activeId === href.slice(1), // ใช้ font-medium เมื่อ activeId ตรงกับ href
            }
          )}
        >
          {text}
        </Link>
      ))}
    </div>
  );
}