import { useComputed, useSignal } from "@preact/signals";
import { useEffect } from "preact/hooks";
import {
  LuCodeXml,
  LuHouse,
  LuMessageCircle,
  LuNotebookPen,
  LuFileText,
} from "@preact-icons/lu";

interface NavigationBarProps {
  currentPath: string;
}

export default function NavigationBar({ currentPath }: NavigationBarProps) {
  const isScrolling = useSignal(false);
  const prevScrollPos = useSignal(0);
  const isVisible = useComputed(() => {
    if (prevScrollPos.value < 50) return true;

    const currentPos = typeof window !== "undefined" ? globalThis.scrollY : 0;
    return prevScrollPos.value > currentPos;
  });

  const isPostsPath = (path: string) => {
    return path.startsWith("/posts") || path.startsWith("/post/");
  };

  useEffect(() => {
    let scrollTimer: number | undefined;

    const handleScroll = () => {
      isScrolling.value = true;
      prevScrollPos.value = globalThis.scrollY;

      if (scrollTimer) clearTimeout(scrollTimer);

      scrollTimer = setTimeout(() => {
        isScrolling.value = false;
      }, 200);
    };

    globalThis.addEventListener("scroll", handleScroll);

    return () => {
      globalThis.removeEventListener("scroll", handleScroll);
      if (scrollTimer) clearTimeout(scrollTimer);
    };
  }, []);

  return (
    <div
      class={`fixed bottom-4 left-1/2 transform -translate-x-1/2 z-20 transition-all duration-300 ${
        isScrolling.value ? "opacity-30" : "opacity-100"
      } ${isVisible.value ? "translate-y-0" : "translate-y-20"}`}
    >
      <div class="overflow-visible">
        <ul class="menu menu-horizontal bg-base-200 rounded-box p-2 shadow-lg flex flex-nowrap whitespace-nowrap">
          <li class="mx-1">
            <a href="/" class={currentPath === "/" ? "menu-active" : ""}>
              <div class="tooltip" data-tip="Home">
                <LuHouse class="text-xl" />
              </div>
            </a>
          </li>

          <li class="mx-1">
            <a
              href="/posts"
              class={isPostsPath(currentPath) ? "menu-active" : ""}
            >
              <div class="tooltip" data-tip="Posts">
                <LuNotebookPen class="text-xl" />
              </div>
            </a>
          </li>

          <li class="mx-1">
            <a
              href="/resume"
              class={currentPath === "/resume" ? "menu-active" : ""}
            >
              <div class="tooltip" data-tip="Resume">
                <LuFileText class="text-xl" />
              </div>
            </a>
          </li>

          <li class="mx-1">
            <a
              href="/projects"
              class={currentPath.startsWith("/projects") ? "menu-active" : ""}
            >
              <div class="tooltip" data-tip="Projects">
                <LuCodeXml class="text-xl" />
              </div>
            </a>
          </li>

          <li class="mx-1">
            <a
              href="/chat"
              class={currentPath.startsWith("/chat") ? "menu-active" : ""}
            >
              <div class="tooltip" data-tip="Chat">
                <LuMessageCircle class="text-xl" />
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
  );
}
