import React, { Component, PropTypes } from 'react';
import styles from '../Chat.css';
import ToggleDisplay from '../utils/ToggleDisplay';
import convertMedia from '../utils/convertMedia';

export default class UserMenu extends Component {
  static propTypes = {
    menuShow: PropTypes.bool,
    onMessage: PropTypes.func
  };
  changeVideoInp = (e) => {
    let media = convertMedia(e.target.value, 150, true);
    let videoContainer = this.videoInpContainer;
    let mediaContainer = document.createElement('span');

    mediaContainer.innerHTML = media;
    if (videoContainer.children.length === 2) videoContainer.appendChild(mediaContainer);
    else videoContainer.replaceChild(mediaContainer, videoContainer.children[2]);


    if (e.nativeEvent.keyCode === 13) {
      const input = e.target;
      const txt = e.target.value;
      if (txt === '') return;
      const that = this;
      this.props.onMessage({ txt: txt }, function success() {
        input.value = '';
        that.submenuShow = false;
        mediaContainer.innerHTML = '';
      });
    }
  };
  handleClick = (opt, e) => {
    switch (opt) {
      case 0: {
        break;
      }
      case 1: {
        break;
      }
      case 2: {
        this.submenuShow = true;
        const that = this;
        setTimeout(function() {
          that.videoInp.focus();
        }, 0);
        break;
      }
      default:
    }
  };
  handleClose = (e) => {
    this.submenuShow = false;
  };

  render() {
    return (<div className={styles.userContainer}>
      <ToggleDisplay show={this.props.menuShow}>
        <ul className={styles.usermenu}>
          <li onClick={this.handleClick.bind(this, 0)}>
            <span className="icon-mic"></span><a href="#">Dictate text</a>
          </li>
          <li onClick={this.handleClick.bind(this, 1)}>
            <span className="icon-insert-comment"></span><a href="#">Translate a phrase</a>
          </li>
          <li onClick={this.handleClick.bind(this, 2)}>
            <span className="icon-ondemand-video"></span><a href="#">Insert video</a>
          </li>
        </ul>
      </ToggleDisplay>
        <ToggleDisplay show={this.submenuShow}>
          <div ref={(ref) => this.videoInpContainer = ref} className={styles.videoInpContainer}>
            <input ref={(ref) => this.videoInp = ref} placeholder="Video url (youtube, vimeo)" onKeyUp={this.changeVideoInp}/>
            <div style={{position: 'fixed', left: 0, bottom: '23px', height: '30px' }} onClick={this.handleClose}>
              <p className="icon-clear" ref={(ref) => this.usermsg = ref}></p>
            </div>
          </div>
        </ToggleDisplay>
      </div>
    );
  }
}

@@ -594,17 +594,17 @@
 gth === 
-2
+3
 ) videoC
@@ -718,17 +718,17 @@
 hildren%5B
-2
+3
 %5D);%0A%0A%0A  
@@ -1018,54 +1018,112 @@
     
-mediaContainer.innerHTML = ''
+that.videoInpContainer.removeChild(mediaContainer);%0A      %7D)
 ;%0A    
+%7D%0A
   %7D
-)
 ;%0A  
-  %7D
+insertTranslation = (e) =%3E %7B%0A
 %0A  %7D
@@ -1224,24 +1224,265 @@
   case 1: %7B%0A
+        this.submenuShow = true;%0A        const that = this;%0A        setTimeout(function() %7B%0A          that.translateInp.focus();%0A        %7D, 0);%0A        this.videoInp.style.display = 'none';%0A        this.translateInp.style.display = 'block';%0A
         brea
@@ -1640,32 +1640,129 @@
 %0A        %7D, 0);%0A
+        this.translateInp.style.display = 'none';%0A        this.videoInp.style.display = 'block';%0A
         break;%0A 
@@ -1849,16 +1849,208 @@
  false;%0A
+    this.videoInp.value = '';%0A    this.translateInp.value = '';%0A    if (this.videoInpContainer.childNodes.length %3E 3) this.videoInpContainer.removeChild(this.videoInpContainer.childNodes%5B3%5D);%0A
   %7D;%0A%0A  
@@ -2113,24 +2113,26 @@
 ner%7D%3E%0A      
+  
 %3CToggleDispl
@@ -2154,32 +2154,34 @@
 rops.menuShow%7D%3E%0A
+  
         %3Cul clas
@@ -2207,32 +2207,34 @@
 enu%7D%3E%0A          
+  
 %3Cli onClick=%7Bthi
@@ -2259,24 +2259,26 @@
 (this, 0)%7D%3E%0A
+  
             
@@ -2342,38 +2342,42 @@
 t%3C/a%3E%0A          
+ 
+ 
 %3C/li%3E%0A
+  
           %3Cli on
@@ -2412,24 +2412,26 @@
 (this, 1)%7D%3E%0A
+  
             
@@ -2512,38 +2512,42 @@
 e%3C/a%3E%0A          
+ 
+ 
 %3C/li%3E%0A
+  
           %3Cli on
@@ -2582,24 +2582,26 @@
 (this, 2)%7D%3E%0A
+  
             
@@ -2676,38 +2676,42 @@
 o%3C/a%3E%0A          
+  
 %3C/li%3E%0A
+  
         %3C/ul%3E%0A  
@@ -2708,16 +2708,18 @@
   %3C/ul%3E%0A
+  
       %3C/
@@ -3005,16 +3005,154 @@
 oInp%7D/%3E%0A
+            %3Cinput ref=%7B(ref) =%3E this.translateInp = ref%7D placeholder=%22Tape a phrase to be translated%22 onKeyUp=%7Bthis.insertTranslation%7D/%3E%0A
         

Add box for translate