import * as React from 'react';
import * as ReactDOM from 'react-dom';
import styles from './Modal.module.scss';

export interface IModalOverlayProps {
  /** Клик по подложке (не по содержимому окна). */
  onBackdropClick: () => void;
  children: React.ReactNode;
}

/**
 * Затемнение под модалкой — порталом в document.body, а не внутри веб-части.
 * На живой странице SharePoint канва веб-части лежит в своём контексте наложения
 * ниже шапки (suite bar), и position: fixed-оверлей изнутри неё оказывался ПОД
 * шапкой: верх окна, центрированного по высоте экрана, уезжал за неё. В workbench
 * шапки нет — там было незаметно.
 */
export const ModalOverlay: React.FC<IModalOverlayProps> = ({ onBackdropClick, children }) =>
  ReactDOM.createPortal(
    // Клик по подложке закрывает окно, клик внутри — нет (проверяем сам currentTarget).
    <div className={styles.overlay} onClick={e => { if (e.target === e.currentTarget) onBackdropClick(); }}>
      {children}
    </div>,
    document.body
  );