// ----------------------
// index.js
// ----------------------
import React from 'react';
import SplitPane from 'react-split-pane';
import classNames from 'classnames';

class ExampleComponent extends React.Component {
  constructor(props) {
    super(props);

    // This state is tracking whether or not the user is dragging the SplitPane borders to change
    // its sizing.  If so, then we have to set the child elements to "pointer-events: none" so
    // the child events don't prevent smooth dragging
    this.state = {
      isDragging: false,
    }
  }

  render() {
    const toggleInteractive = classNames([
      { [styles.notInteractive]: this.state.isDragging === true },
      { [styles.isInteractive]: this.state.isDragging === false },
    ]);

    return (
      {/* Due to the iFrames interaction with SplitPane we have to set the children
          of SplitPane to "pointer-events: none" in the styling so that the dragging
          of panels works correctly. */}
      <SplitPane onDragStarted={() => {
                    this.setState({
                      isDragging: true,
                    });
                 }}
                 onDragFinished={() => {
                    this.setState({
                      isDragging: false,
                    });
                 }}
                 split="horizontal"
                 defaultSize="70%"
      >
        <div className={toggleInteractive}>
          <TopComponentExample />
        </div>
        <div className={toggleInteractive}>
          <BottomComponentExample />
        </div>
      </SplitPane>
    );
  }
}

// ----------------------
// styles.css
// ----------------------
.notInteractive {
  pointer-events: none;
}

.isInteractive {
  pointer-events: auto;
}