import ReactDOM from 'react-dom'
import {Icon} from '@rmwc/icon'
import FocusTrap from 'focus-trap-react'

import styles from './modal.module.css'

export default function Modal({visible, title, children, onDeactivate}){
  if(typeof window === 'undefined')
    return null

  return ReactDOM.createPortal((
    <div className={styles.modalContainer + (visible?' ' + styles.modalShown:'')}>
      <div className={styles.modalBackground}/>
      {visible && (
        <FocusTrap active={visible} focusTrapOptions={{onDeactivate}}>
          <div className={styles.modalScroll} onClick={onDeactivate}>
            <dialog open className={styles.modal}>
              <div className={styles.titleContainer}>
                <h2>{title}</h2>
                <button className="buttonLink" onClick={onDeactivate}>
                  <Icon icon="close"/>
                </button>

              </div>
              {children}
            </dialog>
          </div>
        </FocusTrap>
      )}
    </div>
  ), window.document.body)
}