stack/docs/src/hooks/use-code-overlay.tsx

'use client';

import { usePathname } from 'next/navigation';
import { createContext, useCallback, useContext, useEffect, useMemo, useState, type ReactNode } from 'react';

type CodeOverlayContextType = {
  isOpen: boolean,
  code: string,
  language: string,
  title: string,
  openOverlay: (code: string, language?: string, title?: string) => void,
  closeOverlay: () => void,
  toggleOverlay: () => void,
};

const CodeOverlayContext = createContext<CodeOverlayContextType | null>(null);

export function CodeOverlayProvider({ children }: { children: ReactNode }) {
  const [isOpen, setIsOpen] = useState(false);
  const [code, setCode] = useState('');
  const [language, setLanguage] = useState('tsx');
  const [title, setTitle] = useState('Code Example');
  const [, setCurrentPage] = useState('');
  const pathname = usePathname();

  // Close overlay when navigating to a different page
  useEffect(() => {
      setIsOpen(false);
    setCurrentPage(pathname);
  }, [pathname]);

  const openOverlay = useCallback((newCode: string, newLanguage = 'tsx', newTitle = 'Code Example') => {
    setCode(newCode);
    setLanguage(newLanguage);
    setTitle(newTitle);
    setIsOpen(true);
  }, []);

  const closeOverlay = useCallback(() => {
    setIsOpen(false);
  }, []);

  const toggleOverlay = useCallback(() => {
    setIsOpen(prev => !prev);
  }, []);

  const contextValue = useMemo(() => ({
    isOpen,
    code,
    language,
    title,
    openOverlay,
    closeOverlay,
    toggleOverlay,
  }), [isOpen, code, language, title, openOverlay, closeOverlay, toggleOverlay]);

  return (
    <CodeOverlayContext.Provider value={contextValue}>
      {children}
    </CodeOverlayContext.Provider>
  );
}

export function useCodeOverlay() {
  const context = useContext(CodeOverlayContext);
  if (!context) {
    throw new Error('useCodeOverlay must be used within a CodeOverlayProvider');
  }
  return context;
}