import { useEffect } from 'react';

/**
 * This progressive enhancement uses an experimental API, it might change,
 * and at the time of authoring is not supported on iOS or mobile Firefox.
 * @see https://developer.mozilla.org/en-US/docs/Web/API/VirtualKeyboard
 * @param open - Controls whether the virtual keyboard should overlay content
 */
export function useVirtualKeyboard(open: boolean) {
  useEffect(() => {
    /* eslint-disable @typescript-eslint/no-unsafe-member-access, functional/immutable-data */
    if ('virtualKeyboard' in navigator) {
      const virtualKeyboard: any = navigator.virtualKeyboard;
      const initialOverlaysContent: unknown = virtualKeyboard.overlaysContent;
      virtualKeyboard.overlaysContent = open;
      return () => {
        virtualKeyboard.overlaysContent = initialOverlaysContent;
      };
    }
    /* eslint-enable @typescript-eslint/no-unsafe-member-access, functional/immutable-data */
  }, [open]);
}