'use babel';

/** @jsx etch.dom */
/* @flow*/
import etch from 'etch';
import { Emitter, CompositeDisposable, Disposable } from 'atom';
// import MessageView from './MessageView';
import type { Message } from '../types';

export default class ResultView {
  properties: {
    messages: Array<Message>;
  }
  refs: any;
  element: any;
  panel: any;
  emitter: Emitter;
  disposables: CompositeDisposable;

  constructor(properties:Object) {
    this.properties = properties;
    this.emitter = new Emitter();
    this.disposables = new CompositeDisposable();
    etch.initialize(this);

    this.panel = atom.workspace.addBottomPanel({
      item: this.element,
      visible: true,
      priority: 500,
    });

    const clearHandler = async () => {
      await this.update({ messages: [] });
    };
    this.refs.clearButton.addEventListener('click', clearHandler);
    this.disposables.add(new Disposable(() => { this.refs.clearButton.removeEventListener('click', clearHandler); }));

    const closeHandler = () => {
      this.close();
    };
    this.refs.closeButton.addEventListener('click', closeHandler);
    this.disposables.add(new Disposable(() => { this.refs.closeButton.removeEventListener('click', closeHandler); }));
  }

  render() {
    return (
      <div class='tester-output-view'>
        <div class='tester-resize-handle' ref='resizer'/>
        <div class='tester-panel-head block highlight'>
          <div class='tester-panel-title inline-block icon icon-terminal' style='cursor: default;'>Tester Results</div>
          <div class='tester-panel-buttons btn-toolbar inline-block pull-right'>
            <div class='tester-panel-clear inline-block icon-circle-slash' ref='clearButton' title='Clear Output'/>
            <div class='tester-panel-close inline-block icon-x' ref='closeButton' title='Close'/>
          </div>
        </div>
        <div class='tester-messages' ref='messages' messages={this.properties.messages}>
          <div class='tester-messager-head tester-message-row inline-block'>
            title
          </div>
          {this.properties.messages.map((message) => {
            console.log('message', message);
            return <div class='tester-message-row inline-block'>
                    <div class='tester-message-state inline-block'><span class='highlight-info'>{message.state || 'unknown'}</span></div>
                    <div class='tester-message-title inline-block'>{message.title || ''}</div>
                    <div class='tester-message-duration inline-block pull-right'>{message.duration || 0}</div>
                    <div class='tester-message-filepath inline-block pull-right'>{message.filePath || ''}</div>
                    <div class='tester-message-linenumber inline-block pull-right'>:{message.lineNumber || 0}</div>
              </div>;
          })}
        </div>
      </div>
    );
  }

  update(newProperties:Object) {
    if (this.properties.messages !== newProperties.messages) {
      console.log('MESSAGES', newProperties.messages);
      this.properties.messages = newProperties.messages;
      return etch.update(this);
    }
    return Promise.resolve();
  }


  async destroy() {
    await etch.destroy(this);
  }

  close() {
    if (this.panel != null) {
      this.panel.destroy();
      this.panel = null;
    }
  }
}

@@ -2410,21 +2410,24 @@
 message-
-title
+duration
  inline-
@@ -2446,20 +2446,24 @@
 age.
-title %7C%7C ''%7D
+duration %7C%7C 0%7Dms
 %3C/di
@@ -2508,32 +2508,29 @@
 ter-message-
-duration
+title
  inline-bloc
@@ -2526,35 +2526,24 @@
 inline-block
- pull-right
 '%3E%7Bmessage.d
@@ -2541,29 +2541,27 @@
 message.
-duration
+title
  %7C%7C 
-0
+''
 %7D%3C/div%3E%0A
@@ -2611,16 +2611,18 @@
 age-
-filepath
+linenumber
  inl
@@ -2643,16 +2643,17 @@
 -right'%3E
+:
 %7Bmessage
@@ -2657,22 +2657,23 @@
 age.
-filePath
+lineNumber
  %7C%7C 
-''
+0
 %7D%3C/d
@@ -2719,34 +2719,32 @@
 ter-message-
-linenumber
+filepath
  inline-bloc
@@ -2749,33 +2749,32 @@
 ock pull-right'%3E
-:
 %7Bmessage.lineNum
@@ -2762,39 +2762,38 @@
 t'%3E%7Bmessage.
-lineNumber
+filePath
  %7C%7C 
-0
+''
 %7D%3C/div%3E%0A    

fix view