/**
 * Gather the file info using ffmpeg.
 * @module webm/info
 */

import React from "react";
import {Paper, IconButton} from "material-ui";
import {Wait, secondaryColor} from "./theme";

const styles = {
  root: {
    position: "relative",
  },
  preload: {
    padding: 8,
    textAlign: "center",
  },
  header: {
    padding: 8,
    color: "#e0e0e0",
    fontWeight: 500,
    fontSize: "18px",
  },
  info: {
    padding: 16,
    lineHeight: "36px",
  },
  // TODO(Kagami): Use material UI icons?
  more: {
    position: "absolute",
    bottom: 0,
    right: 0,
    color: secondaryColor,
    fontSize: "24px",
  },
  log: {
    margin: 0,
    padding: 16,
    backgroundColor: "#f8f8f8",
  },
};

export default React.createClass({
  getInitialState: function() {
    return {};
  },
  componentDidMount: function() {
    setTimeout(() => {
      this.setState({info: {log: "10000000000000\n234234234234\n2342423"}});
    }, 1000);
  },
  handleMoreClick: function() {
    this.setState({logOpen: !this.state.logOpen});
  },
  render: function() {
    const preload = (
      <div style={styles.preload}><Wait>Gathering file info</Wait></div>
    );
    // TODO(Kagami): Display command as well?
    const logText = this.state.info && this.state.info.log;
    const log = <pre style={styles.log}>{logText}</pre>;
    const info = (
      <div>
        <div style={styles.header}>INFO</div>
        <div style={styles.info}>
          <div>VIDEO:</div>
          <div>AUDIO:</div>
          <div>SUBTITLES:</div>
        </div>
        {this.state.logOpen ? log : ""}
        <IconButton
          style={styles.more}
          tooltip="Show/hide full log"
          onClick={this.handleMoreClick}
        >
          {this.state.logOpen ? "⌃" : "⌄"}
        </IconButton>
      </div>
    );
    return (
      <Paper style={styles.root}>{this.state.info ? info : preload}</Paper>
    );
  },
});

@@ -103,20 +103,20 @@
 %7BPaper, 
-Icon
+Flat
 Button%7D 
@@ -151,24 +151,8 @@
 Wait
-, secondaryColor
 %7D fr
@@ -185,20 +185,20 @@
 s = %7B%0A  
-root
+info
 : %7B%0A    
@@ -383,24 +383,29 @@
 %0A  %7D,%0A  info
+Inner
 : %7B%0A    padd
@@ -557,50 +557,85 @@
     
-color: secondaryColor,%0A    fontSize: %2224px
+borderRadius: 0,%0A  %7D,%0A  log: %7B%0A    padding: 16,%0A    backgroundColor: %22#f8f8f8
 %22,%0A 
@@ -635,32 +635,37 @@
 8f8%22,%0A  %7D,%0A  log
+Inner
 : %7B%0A    margin: 
@@ -675,50 +675,44 @@
     
-padding: 16,%0A    backgroundColor: %22#f8f8f8
+maxHeight: 300,%0A    overflowY: %22auto
 %22,%0A 
@@ -905,20 +905,24 @@
 1000
+%5Cn
 0000
+%5Cn
 000000%5Cn
 2342
@@ -917,24 +917,22 @@
 000000%5Cn
-2
 3423
-423
+%5Cn
 4234%5Cn23
@@ -1237,15 +1237,93 @@
  log
-Text = 
+ = (%0A      %3Cdiv style=%7Bstyles.log%7D%3E%0A        %3Cpre style=%7Bstyles.logInner%7D%3E%0A          %7B
 this
@@ -1360,65 +1360,43 @@
 .log
-;
+%7D
 %0A    
-const log =
+   
  %3C
+/
 pre
- style=%7Bstyles.log%7D%3E%7BlogText%7D%3C/pre%3E
+%3E%0A      %3C/div%3E%0A    )
 ;%0A  
@@ -1420,24 +1420,60 @@
       %3Cdiv%3E%0A
+        %3Cdiv style=%7Bstyles.info%7D%3E%0A  
         %3Cdiv
@@ -1502,24 +1502,26 @@
 %3EINFO%3C/div%3E%0A
+  
         %3Cdiv
@@ -1531,35 +1531,42 @@
 yle=%7Bstyles.info
+Inner
 %7D%3E%0A
+  
           %3Cdiv%3EV
@@ -1569,32 +1569,34 @@
 iv%3EVIDEO:%3C/div%3E%0A
+  
           %3Cdiv%3EA
@@ -1613,24 +1613,26 @@
 %3E%0A          
+  
 %3Cdiv%3ESUBTITL
@@ -1645,24 +1645,26 @@
 iv%3E%0A        
+  
 %3C/div%3E%0A     
@@ -1670,60 +1670,44 @@
     
-%7Bthis.state.logOpen ? log : %22%22%7D%0A        %3CIconButton%0A
+  %3CFlatButton%0A            primary%0A  
     
@@ -1738,45 +1738,8 @@
 %7D%0A  
-        tooltip=%22Show/hide full log%22%0A
     
@@ -1783,28 +1783,26 @@
         
-%3E%0A
     
-      
+label=
 %7Bthis.st
@@ -1820,15 +1820,21 @@
  ? %22
-%E2%8C%83
+less
 %22 : %22
-%E2%8C%84
+more
 %22%7D%0A 
@@ -1844,21 +1844,67 @@
     
-%3C/IconButton%3E
+  /%3E%0A        %3C/div%3E%0A        %7Bthis.state.logOpen ? log : %22%22%7D
 %0A   

Fix <Info> styles