import React, { Component } from "react";
import PropTypes from "prop-types";
import ReactDOM from "react-dom";

import {SplitPaneContext} from "../../context";

class ModalPortal extends Component {
  static contextType = SplitPaneContext;

  constructor(props) {
    super(props);

    this.modalRoot = null;
    this.el = document.createElement('div');
  }

  componentDidMount() {
    this.modalRoot = document.getElementById(`modal-root-${this.context}`);

    if (!this.modalRoot) {
      throw `No root element for pane '${this.context}' in ModalPortal`;
    }
    this.modalRoot.appendChild(this.el);
  }

  componentWillUnmount() {
    this.modalRoot.removeChild(this.el);
  }

  render() {
    return ReactDOM.createPortal(
      this.props.children,
      this.el,
    );
  }
}

ModalPortal.propTypes = {
  children: PropTypes.node.isRequired
};


export default ModalPortal;