import { Component } from 'react';
import PropTypes from 'prop-types';
import { Observable } from 'rxjs/Observable';
import RxViz from './RxViz';

export default class extends Component {
  static propTypes = {
    timeWindow: PropTypes.number.isRequired,
    observable$: PropTypes.instanceOf(Observable),
    error: PropTypes.string,
    onSvgStable: PropTypes.func.isRequired
  };

  renderError() {
    const { error } = this.props;

    return (
      <div className="error">
        {error}
        <style jsx>{`
          .error {
            font-family: 'Roboto Mono', monospace;
            color: #eb121f;
            padding: 9px 30px;
          }
        `}</style>
      </div>
    );
  }

  renderVisualization() {
    const { timeWindow, observable$, onSvgStable } = this.props;

    return (
      <div className="visualization">
        <RxViz
          timeWindow={timeWindow}
          observable$={observable$}
          onSvgStable={onSvgStable}
        />
        <style jsx>{`
          .visualization {
            padding: 30px 25px 30px 15px;
          }
        `}</style>
      </div>
    );
  }

  render() {
    const { error, observable$ } = this.props;

    return (
      <div className="output">
        {error
          ? this.renderError()
          : observable$ ? this.renderVisualization() : null}
        <style jsx>{`
          .output {
            flex: 1 0 50%;
            overflow-y: auto;
            background-color: #fff;
          }
        `}</style>
      </div>
    );
  }
}

@@ -1224,16 +1224,52 @@
 utput%22%3E%0A
+        %3Cdiv className=%22content%22%3E%0A  
         
@@ -1275,16 +1275,18 @@
  %7Berror%0A
+  
         
@@ -1308,16 +1308,18 @@
 Error()%0A
+  
         
@@ -1371,16 +1371,31 @@
 : null%7D%0A
+        %3C/div%3E%0A
         
@@ -1444,87 +1444,207 @@
     
-flex: 1 0 50%25;%0A            overflow-y: auto;%0A            background-color: #fff
+display: flex;%0A            flex: 1 0 50%25;%0A            background-color: #fff;%0A          %7D%0A%0A          .content %7B%0A            flex-grow: 1;%0A            margin-bottom: 37px;%0A            overflow-y: auto
 ;%0A  

Add padding bottom to Output