'use babel';
/**
  Delve Output View
  @description Text based view that reads from an output stream and displays
    it inside a terminal-esque window
**/

/* eslint no-unused-vars:0 */
import { createClass as createJSX, jsx } from 'vanilla-jsx';

/** @jsx jsx */
const DelveOutputElement = createJSX({
  createMsgItem(msg) {
    var classModifier;
    switch (msg.type) {
    case 'info':
      classModifier = 'delve-info-message'; break;
    case 'error':
      classModifier = 'delve-error-message'; break;
    default:
      classModifier = 'delve-info-message'; break;
    }

    const classes = `delve-output-message ${classModifier}`;
    return <pre className={classes}>{msg.content}</pre>;
  },

  renderView(outputMessages) {
    let messageElements = outputMessages.map(this.createMsgItem);

    return (
      <div class="delve-terminal-panel delve-output-panel" ref="panelContainer">
        {messageElements}
      </div>
    );
  },

  addMessage(msg) {
    // TODO: this.refs isn't being set - why?
    let $message = this.createMsgItem(msg);
    this.refs.panelContainer.appendChild($message);
  }
});

export default class DelveOutputPanel {
  constructor(messageOutputStream, messages) {
    this.messages = messages || [];
    this.messageStream = messageOutputStream;

    this.outputElement = new DelveOutputElement();
    this.delveOutputPanel = this.outputElement.render(this.messages);

    this.msgConsumer = msg => this.outputElement.addMessage(msg);
    this.messageStream.on('messageOutput', this.msgConsumer.bind(this));
  }

  getElement() {
    return this.delveOutputPanel;
  }

  destroy() {
    this.outputElement.dispose();
    this.messages = null;

    this.messageStream.removeListener('messageOutput', this.msgConsumer);
  }
}

@@ -275,23 +275,23 @@
 veOutput
-Element
+Message
  = creat
@@ -299,29 +299,26 @@
 JSX(%7B%0A  
-c
 re
-ateMsgItem
+nderView
 (msg) %7B%0A
@@ -682,16 +682,27 @@
 .content
+.toString()
 %7D%3C/pre%3E;
@@ -705,18 +705,76 @@
 re%3E;%0A  %7D
-,
 %0A
+%7D);%0A%0A/** @jsx jsx */%0Aconst DelveOutputElement = createJSX(%7B
 %0A  rende
@@ -805,26 +805,20 @@
     
-let 
+this.
 message
-Element
 s = 
@@ -836,34 +836,173 @@
 ges.map(
-this.createMsgItem
+msg =%3E %7B%0A      let msgComponent = new DelveOutputMessage();%0A      let $msg = msgComponent.render(msg);%0A%0A      return %7B component: msgComponent, $msg %7D;%0A    %7D
 );%0A%0A    
@@ -1104,23 +1104,42 @@
    %7B
+this.
 message
-Elements
+s.map(msg =%3E msg.$msg)
 %7D%0A  
@@ -1190,97 +1190,214 @@
     
-// TODO: this.refs isn't being set - why?%0A    let $message = this.createMsgItem(msg);
+let component = new DelveOutputMessage();%0A    let $msg = component.render(msg);%0A%0A    this.messages.push(%7B component, $msg %7D);%0A%0A    // TODO: this.refs isn't being set - why? Using this.element for now
 %0A   
+ //
  thi
@@ -1441,16 +1441,161 @@
 ssage);%0A
+    this.element.appendChild($msg);%0A  %7D,%0A%0A  clearMessages() %7B%0A    this.messages.forEach(msg =%3E msg.component.dispose());%0A    this.messages = %5B%5D;%0A
   %7D%0A%7D);%0A
@@ -2097,24 +2097,64 @@
 destroy() %7B%0A
+    this.outputElement.clearMessages();%0A
     this.out

Put messages in separate JSX component