"use client";
import { createContext, useMemo, useState } from "react";
import Navbar from "./Navbar";
import Sidebar from "./Sidebar";
import CustomHeadroom from "@/components/CustomHeadroom";

interface NavigationContextValue {
  isSidebarVisible: boolean;
  openSidebar: () => void;
  closeSidebar: () => void;
}

export const NavigationContext = createContext<NavigationContextValue>({
  isSidebarVisible: false,
  openSidebar: () => undefined,
  closeSidebar: () => undefined,
});

const Navigation = () => {
  const [isSidebarVisible, setSidebarVisible] = useState(false);

  const contextValue = useMemo(
    () => ({
      isSidebarVisible,
      openSidebar: () => setSidebarVisible(true),
      closeSidebar: () => setSidebarVisible(false),
    }),
    [isSidebarVisible]
  );

  return (
    <NavigationContext.Provider value={contextValue}>
      <Sidebar />
      {/*
        CustomHeadroom with Lenis integration for React 19 compatibility.
        react-headroom has peer dependency conflicts with React 19, so we use
        a custom implementation that works with Lenis smooth scrolling.
        preserveSpace={false} makes the navbar overlay the hero so the hero
        starts at the very top of the page.
      */}
      <CustomHeadroom
        useLenis={true}
        // Keep navbar always visible for the first ~80px of scroll
        pinStart={50}
        // Require a larger downward scroll before hiding (less “twitchy”)
        downTolerance={30}
        // Small upward scroll quickly shows it again
        upTolerance={10}
        preserveSpace={false}
      >
        <Navbar />
      </CustomHeadroom>
    </NavigationContext.Provider>
  );
};

export default Navigation;