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">
            {/* 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>
  );
}