import React, { Component } from 'react';
import MarkdownEditor from 'react-md-editor';
import MarkdownPreview from './MarkdownPreview';
import uniqueId from 'lodash.uniqueid';

export default class ScenarioEditor extends Component {

  constructor(props) {
    super(props);
    this.state = { markdown: '', showPreview: true };
    this.handleEditorChange = this.handleEditorChange.bind(this);
    this.handleShowPreviewChange = this.handleShowPreviewChange.bind(this);
  }

  handleEditorChange(newMarkdown) {
    this.setState({ markdown: newMarkdown });
  }

  handleShowPreviewChange(e) {
    this.setState({ showPreview: e.target.checked });
  }

  render() {
    const markdown = this.state.markdown;
    const showPreviewChkId = uniqueId();
    let preview;

    if (this.state.showPreview) {
      preview = (
        <MarkdownPreview markdown={markdown} />
      );
    }

    return (
      <div>
        <input type="text" placeholder="Title" />
        <input type="checkbox" id={showPreviewChkId}
          checked={this.state.showPreview}
          onChange={this.handleShowPreviewChange} />
        <label htmlFor={showPreviewChkId}>Show preview</label>
        <MarkdownEditor value={this.state.markdown} onChange={this.handleEditorChange} />
        {preview}
      </div>
    );
  }

}

@@ -18,16 +18,27 @@
 omponent
+, PropTypes
  %7D from 
@@ -313,10 +313,28 @@
 wn: 
-''
+props.initialContent
 , sh
@@ -698,16 +698,18 @@
    const
+ %7B
  markdow
@@ -709,16 +709,31 @@
 markdown
+, showPreview %7D
  = this.
@@ -737,25 +737,16 @@
 is.state
-.markdown
 ;%0A    co
@@ -780,16 +780,139 @@
 ueId();%0A
+    const handleEditorChange = this.handleEditorChange;%0A    const handleShowPreviewChange = this.handleShowPreviewChange;%0A%0A
     let 
@@ -1184,27 +1184,16 @@
 hecked=%7B
-this.state.
 showPrev
@@ -1213,29 +1213,24 @@
   onChange=%7B
-this.
 handleShowPr
@@ -1339,27 +1339,16 @@
  value=%7B
-this.state.
 markdown
@@ -1359,21 +1359,16 @@
 Change=%7B
-this.
 handleEd
@@ -1427,8 +1427,159 @@
 %0A  %7D%0A%0A%7D%0A
+%0AScenarioEditor.propTypes = %7B%0A  initialContent: PropTypes.string,%0A  onSave: PropTypes.func%0A%7D;%0A%0AScenarioEditor.defaultProps = %7B%0A  initialContent: ''%0A%7D;%0A

enable passing in initial content and onSave handler