import React, { useMemo } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { ModuleProvider } from '../module-context.js';
import { createDevModuleContext } from './module-context.js';

export interface DevModuleProviderProps {
  children: React.ReactNode;
  /** Module name for dev storage namespace */
  moduleName?: string;
}

/**
 * Wrap local dev routes with ModuleProvider so pages can use useModule / useModuleRequest.
 * Place inside react-router's BrowserRouter.
 */
export function DevModuleProvider({ children, moduleName }: DevModuleProviderProps) {
  const location = useLocation();
  const navigate = useNavigate();

  const value = useMemo(
    () =>
      createDevModuleContext({
        moduleName,
        currentPath: location.pathname + location.search,
        navigate: path => navigate(path),
      }),
    [moduleName, location.pathname, location.search, navigate],
  );

  return <ModuleProvider value={value}>{children}</ModuleProvider>;
}