import { createContext, useContext, type ReactNode } from 'react';
import { createPortal } from 'react-dom';

/**
 * Shell paints the bottom bar strip; workspaces portal their contextual controls
 * into it via {@link WorkspaceBarSlot}. Provider value is the DOM node owned by
 * the shell `AppBottomBar`.
 */
const BarTargetContext = createContext<HTMLElement | null>(null);

export const WorkspaceBarTargetProvider = BarTargetContext.Provider;

/**
 * Whether the surrounding workspace is the active one. Inactive workspaces stay
 * mounted (to preserve their layout/tabs) but must not paint the shared bottom
 * bar, so their {@link WorkspaceBarSlot} renders nothing.
 */
const BarActiveContext = createContext<boolean>(true);

export const WorkspaceActiveProvider = BarActiveContext.Provider;

export function WorkspaceBarSlot({ children }: { children: ReactNode }) {
  const target = useContext(BarTargetContext);
  const active = useContext(BarActiveContext);
  if (!target || !active) return null;
  return createPortal(children, target);
}