import { createContext, useContext } from 'react';
import { useIsPhoneWidth } from '../hooks/useIsPhoneWidth';

export type OverlayViewer = 'patient' | 'staff';
export type OverlayPresentation = 'sheet' | 'modal';

// Provided around the portal frame; a dialog portals outside the frame's DOM but keeps its React context.
export const OverlayViewerContext = createContext<OverlayViewer | undefined>(undefined);

/** A dialog inside the portal frame rises from the bottom on a phone and stays a centred modal on anything wider. */
export const useOverlayPresentation = (): OverlayPresentation => {
    const viewer = useContext(OverlayViewerContext);
    const phone = useIsPhoneWidth();
    return viewer && phone ? 'sheet' : 'modal';
};