openchamber/packages/ui/src/lib/mobileKeyboardMode.ts

export type MobileKeyboardMode = 'native' | 'resize-content';

export const MOBILE_KEYBOARD_MODE_STORAGE_KEY = 'openchamber.mobileKeyboardMode';
export const VIEWPORT_META_SELECTOR = 'meta[name="viewport"]';
export const VIEWPORT_CONTENT_BASE = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover';

export const supportsMobileKeyboardResizeContent = (): boolean => {
  if (typeof navigator === 'undefined') {
    return true;
  }

  const userAgent = navigator.userAgent || '';
  const platform = navigator.platform || '';
  const maxTouchPoints = navigator.maxTouchPoints ?? 0;
  const isIOS = /iPhone|iPad|iPod/i.test(userAgent)
    || ((/Macintosh|MacIntel/i.test(userAgent) || /MacIntel/i.test(platform)) && maxTouchPoints > 1);

  return !isIOS;
};

const getSupportedMobileKeyboardMode = (mode: MobileKeyboardMode): MobileKeyboardMode => {
  if (mode === 'resize-content' && !supportsMobileKeyboardResizeContent()) {
    return 'native';
  }
  return mode;
};

export function normalizeMobileKeyboardMode(value: unknown): MobileKeyboardMode;
export function normalizeMobileKeyboardMode(value: unknown, fallback: MobileKeyboardMode): MobileKeyboardMode;
export function normalizeMobileKeyboardMode(value: unknown, fallback: undefined): MobileKeyboardMode | undefined;
export function normalizeMobileKeyboardMode(
  value: unknown,
  fallback: MobileKeyboardMode | undefined = 'native',
): MobileKeyboardMode | undefined {
  if (value === 'native' || value === 'resize-content') {
    return value;
  }
  return fallback;
}

export const getViewportContentForMobileKeyboardMode = (value: unknown): string => {
  const mode = getSupportedMobileKeyboardMode(normalizeMobileKeyboardMode(value));
  return mode === 'resize-content'
    ? `${VIEWPORT_CONTENT_BASE}, interactive-widget=resizes-content`
    : VIEWPORT_CONTENT_BASE;
};

export const getStoredMobileKeyboardMode = (): MobileKeyboardMode => {
  if (typeof window === 'undefined') {
    return 'native';
  }

  try {
    return getSupportedMobileKeyboardMode(normalizeMobileKeyboardMode(localStorage.getItem(MOBILE_KEYBOARD_MODE_STORAGE_KEY)));
  } catch {
    return 'native';
  }
};

export const setStoredMobileKeyboardMode = (value: unknown): MobileKeyboardMode => {
  const mode = getSupportedMobileKeyboardMode(normalizeMobileKeyboardMode(value));

  if (typeof window !== 'undefined') {
    try {
      if (mode === 'native') {
        localStorage.removeItem(MOBILE_KEYBOARD_MODE_STORAGE_KEY);
      } else {
        localStorage.setItem(MOBILE_KEYBOARD_MODE_STORAGE_KEY, mode);
      }
    } catch {
      // Ignore storage failures in restricted browsing contexts.
    }
  }

  return mode;
};

export const applyMobileKeyboardMode = (value: unknown): MobileKeyboardMode => {
  const mode = setStoredMobileKeyboardMode(value);

  if (typeof document === 'undefined') {
    return mode;
  }

  document.documentElement.setAttribute('data-oc-mobile-keyboard-mode', mode);

  const viewportMeta = document.querySelector(VIEWPORT_META_SELECTOR);
  if (viewportMeta instanceof HTMLMetaElement) {
    const nextContent = getViewportContentForMobileKeyboardMode(mode);
    if (viewportMeta.getAttribute('content') !== nextContent) {
      viewportMeta.setAttribute('content', nextContent);
    }
  }

  return mode;
};