import React, { Component } from 'react';
import Inspector from 'react-inspector';
import { baseFonts } from '../theme';

const preStyle = {
  color: '#666',
  overflowY: 'auto',
  padding: '8px 2px',
  boxSizing: 'border-box',
  border: '1px solid #ECECEC',
  borderRadius: 4,
  backgroundColor: '#FFF',
  margin: 0,
  position: 'absolute',
  top: '30px',
  right: 0,
  bottom: 0,
  left: 0,
};

const wrapStyle = {
  position: 'relative',
  height: '100%',
};

const headStyle = {
  ...baseFonts,
  letterSpacing: '2px',
  fontSize: 12,
  margin: '0 0 0 5px',
};

const btnStyle = {
  marginLeft: 5,
};

const countStyle = {
  display: 'inline-block',
  backgroundColor: '#777777',
  color: '#ffffff',
  padding: '1px 5px',
  borderRadius: '8px',
};

const logDivStyle = {
  margin: 5,
  paddingBottom: 3,
  marginBottom: 4,
  overflow: 'auto',
  borderBottom: '1px solid #fafafa',
};

const inspectorStyle = {
  marginLeft: 5,
  float: 'none',
  display: 'inline-block',
};

const countWrapper = {
  minWidth: 20,
  display: 'inline-block',
  float: 'left',
  height: 19,
  marginRight: 5,
};

const actionNameStyle = {
  float: 'right',
  padding: '0 5px',
  fontWeight: 'bold',
};

class ActionLogger extends Component {

  getActionData() {
    return this.props.actions
      .map((action) => (
      <div style={logDivStyle} key={action.id}>
        <div style={countWrapper}>
          { action.count > 1 && <span style={ countStyle }>{ action.count }</span> }
        </div>
        <div style={inspectorStyle}>
          <Inspector
            showNonenumerable
            name={action.data.name}
            data={action.data.args || action.data}
          />
        </div>
        <span style={actionNameStyle}>{action.data.name}</span>
      </div>
      ));
  }

  render() {
    const { onClear } = this.props;
    return (
      <div style={wrapStyle}>
        <h3 style={headStyle}>
          ACTION LOGGER
          <button style={btnStyle} onClick={onClear}>CLEAR</button>
        </h3>
        <pre style={preStyle}>{this.getActionData()}</pre>
      </div>
      );
  }
}

ActionLogger.propTypes = {
  onClear: React.PropTypes.func,
  actions: React.PropTypes.array,
};

export default ActionLogger;

@@ -776,16 +776,20 @@
   margin
+Left
 : 5,%0A  p
@@ -798,36 +798,29 @@
 ding
-Bottom
 : 3,%0A  
-marginBottom: 4
+paddingLeft: 0
 ,%0A  
@@ -874,16 +874,44 @@
 afafa',%0A
+  backgroundColor: 'white',%0A
 %7D;%0A%0Acons
@@ -1243,16 +1243,255 @@
 ponent %7B
+%0A  componentDidUpdate() %7B%0A    if (this.refs.latest) %7B%0A      this.refs.latest.style.backgroundColor = '#FFFCE0';%0A      setTimeout(() =%3E %7B%0A        this.refs.latest.style.backgroundColor = logDivStyle.backgroundColor;%0A      %7D, 500);%0A    %7D%0A  %7D
 %0A%0A  getA
@@ -1556,15 +1556,78 @@
 tion
+, i
 ) =%3E 
-(%0A
+%7B%0A        const ref = i ? '' : 'latest';%0A        return (%0A    
     
@@ -1668,18 +1668,32 @@
 tion.id%7D
-%3E%0A
+ ref=%7Bref%7D%3E%0A    
         
@@ -1729,16 +1729,20 @@
         
+    
 %7B action
@@ -1808,39 +1808,47 @@
 span%3E %7D%0A        
+    
 %3C/div%3E%0A
+    
         %3Cdiv sty
@@ -1878,16 +1878,20 @@
         
+    
 %3CInspect
@@ -1893,16 +1893,20 @@
 spector%0A
+    
         
@@ -1927,16 +1927,20 @@
 merable%0A
+    
         
@@ -1979,16 +1979,20 @@
         
+    
 data=%7Bac
@@ -2036,19 +2036,26 @@
     
-/%3E%0A
+    /%3E%0A   
         
 %3C/di
@@ -2042,39 +2042,44 @@
   /%3E%0A           
+ 
 %3C/div%3E%0A
+    
         %3Cspan st
@@ -2124,32 +2124,36 @@
 e%7D%3C/span%3E%0A      
+    
 %3C/div%3E%0A      ));
@@ -2150,16 +2150,18 @@
 %0A      )
+;%7D
 );%0A  %7D%0A%0A

add transition to latest added log