import { globalState } from '../app/global-state';
import { PortalUtils } from './utils/utils';

/**
 * Central switchboard for "how should touch-first components present right
 * now". Two independent decisions live here:
 *
 * - `shouldDisplayInModal()` — whether a touch component (date picker,
 *   dropdown, …) opens its panel in a separate modal instead of an inline
 *   popup anchored to the input.
 * - `sheetModalMaxWidth` — whether a modal that *is* shown may dock to the
 *   bottom as a sheet (consumed by `ModalConfig.useBottomSheet()`).
 *
 * Kept in `common/` so both component code and non-component utilities can
 * read it without pulling in any component graph.
 */
export class MobileModeConfig {
	/**
	 * Viewport width (px) above which the bottom-sheet modal presentation is
	 * never used, even on a mobile device — a sheet docked to the bottom of a
	 * tablet looks stranded. Configurable per app.
	 */
	static sheetModalMaxWidth = 768;

	/**
	 * Viewport width (px) up to which touch components open their panel in a
	 * separate modal. Above it (e.g. tablets in landscape, touch laptops) the
	 * inline desktop presentation fits comfortably and is less disruptive.
	 * Configurable per app.
	 */
	static touchComponentsInSeparateModalsMaxWidth = 991;

	/**
	 * Whether a touch component should open its panel in a separate modal
	 * right now: an actual mobile device whose viewport is no wider than
	 * `touchComponentsInSeparateModalsMaxWidth`.
	 */
	static shouldDisplayInModal(): boolean {
		if (!PortalUtils.treatAsMobileDevice()) {
			return false;
		}

		return globalState.innerWidth <= MobileModeConfig.touchComponentsInSeparateModalsMaxWidth;
	}
}