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

import { SplitPaneContext } from './context';

import styles from "./splitScreen.scss";

const SplitPaneContext = React.createContext('default');

class SplitScreen extends Component {
  render() {
    const { topPane, bottomPane} = this.props;

    return (
      <div className={styles.splitScreen}>
        <div className={styles.topPane}>
          <SplitPaneContext.Provider value="top">
            {topPane}
          </SplitPaneContext.Provider>
          <div id="modal-root-top" />
        </div>
        <div className={styles.bottomPane}>
          <SplitPaneContext.Provider value="bottom">
            {bottomPane}
          </SplitPaneContext.Provider>
          <div id="modal-root-bottom" />
        </div>
      </div>
    );
  }
}

SplitScreen.propTypes = {
  topPane: PropTypes.node.isRequired,
  bottomPane: PropTypes.node.isRequired
};

export default SplitScreen;