import React ,{PropTypes, Component} from 'react';
export const CONSOLE_EVENT = '@@CONSOLE_EVENT';
console.log(CONSOLE_EVENT);

export default class Output extends Component{

  static contextTypes = {
    output : PropTypes.string.isRequired,
    html : PropTypes.string.isRequired
  }

  componentDidMount(){
    this.set();
  }

  run(){
    this.update();
  }

  set = () => {
    const frameDoc = this.iframe.contentWindow.document;
    frameDoc.write(`
      <!DOCTYPE html>
      <html>
        <head>
          <meta charset="utf-8">
          <title>Rxjs Playground</title>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.3.0/Rx.min.js" charset="utf-8"></script>

        </head>
        <body>

        </body>
      </html>
    `);
  }

  update = () => {
    const frameWindow =  this.iframe.contentWindow,
          frameDoc = frameWindow.document;
    frameDoc.body.innerHTML = (`
          <div id="core">
            ${this.context.html}
          </div>
    `);
    const exp = (
      `
      var console = {
          log: function(message){
              var event = new CustomEvent("${CONSOLE_EVENT}", { detail : {
                message : message
              }});
              parent.window.document.dispatchEvent(event)
          }
      };
      ${this.context.output}
      `);
    frameWindow.eval(exp)
  }
  render(){
    return <div id="output">
      <iframe ref={n => this.iframe = n}>

      </iframe>
    </div>
  }
}

@@ -1317,24 +1317,37 @@
 %7D%0A      %60);%0A
+     try%7B%0A   
     frameWin
@@ -1360,16 +1360,181 @@
 al(exp)%0A
+     %7Dcatch(err)%7B%0A       document.dispatchEvent(new CustomEvent(CONSOLE_EVENT,%7B%0A         detail : %7B%0A           message : err.toString()%0A         %7D%0A       %7D))%0A     %7D%0A
   %7D%0A  re

Handle eval errors