import React, { ReactNode } from 'react';
import FocusTrap from 'focus-trap-react';
import { Modal, Overlay, OverlayBackdrop, OverlayCenter } from 'folds';
import { stopPropagation } from '../utils/keyboard';
import { HorseshoeEnabledContext } from './page';

type Modal500Props = {
  requestClose: () => void;
  children: ReactNode;
};
export function Modal500({ requestClose, children }: Modal500Props) {
  return (
    <Overlay open backdrop={<OverlayBackdrop />}>
      <OverlayCenter>
        <FocusTrap
          focusTrapOptions={{
            initialFocus: false,
            clickOutsideDeactivates: true,
            onDeactivate: requestClose,
            escapeDeactivates: stopPropagation,
          }}
        >
          <Modal
            size="500"
            variant="Background"
            // Reset `--vojo-safe-top` for everything mounted inside the
            // dialog. The Android status-bar inset is reserved by each
            // page header's `padding-top: var(--vojo-safe-top)` for
            // top-of-screen surfaces — but a centred 500px modal sits
            // away from the screen edge, and the same padding inside it
            // just adds dead space above its header.
            style={{ ['--vojo-safe-top' as string]: '0px' }}
          >
            {/* PageRoot rendered inside the dialog (Settings,
                SpaceSettings, RoomSettings) would otherwise pick up
                the web horseshoe layout — void column + rounded
                corners inside a fixed 500px shell. Disable horseshoe
                for everything inside the modal. */}
            <HorseshoeEnabledContext.Provider value={false}>
              {children}
            </HorseshoeEnabledContext.Provider>
          </Modal>
        </FocusTrap>
      </OverlayCenter>
    </Overlay>
  );
}
