import React from 'react';
import Popover from 'material-ui/Popover';
import Menu from 'material-ui/Menu';
import MenuItem from 'material-ui/MenuItem';
import Divider from 'material-ui/Divider';

import ExperimentIcon from 'material-ui/svg-icons/action/book';
import SignOut from 'material-ui/svg-icons/action/exit-to-app';
import {
  indigo500 as hoverColor,
  cyan500 as iconColor,
} from 'material-ui/styles/colors';

import Login from '../../../containers/Login';
import ExperimentList from '../../../containers/Appbar/ExperimentList';

export default class UserMenu extends React.Component {
  state = {
      open: false,
      experimentListOpen: false,
  }


  handleTouchTap = (event) => {
    this.setState({
      open: true,
      anchorEl: event.currentTarget
    });
  }

  handleRequestClose = () => {
    this.setState({
      open: false
    })
  }

  openExperimentList = () => {
    this.setState({
      experimentListOpen: true
    })
  }

  closeExperimentList = () => {
    this.setState({
      experimentListOpen: false
    })
  }

  renderMenu = (login) => {
    if (!login) {
      return (
        <Menu>
            <MenuItem
              primaryText={"Sign In"}
              onTouchTap={() => { this.props.handleSignIn(); this.handleRequestClose(); }} />
            <Divider />
            <MenuItem
              primaryText={"Create Account"}
              onTouchTap={() => { this.props.handleCreateAccount(); this.handleRequestClose(); }} />
        </Menu>
      )
    } else {
      return (
        <Menu>
            <MenuItem
              primaryText={"Profile"}
              onTouchTap={() => { this.props.handleCreateAccount(); this.handleRequestClose(); }} />
            <Divider />
            <MenuItem
              primaryText={"Experiments"}
              leftIcon={<ExperimentIcon hoverColor={hoverColor} color={iconColor} />}
              onTouchTap={() => { this.openExperimentList(); this.handleRequestClose(); }} />
            <Divider />
            <MenuItem
              primaryText={"Sign Out"}
              leftIcon={<SignOut hoverColor={hoverColor} color={iconColor} />}
              onTouchTap={() => { this.props.handleSignOut(); this.handleRequestClose(); }} />
        </Menu>
      )
    }
  }

  render() {
    let login = this.props.username !== null;
    let buttonLabel = (!login) ? 'Your Account' : this.props.username;

    return (
      <div>
      <div style={{float: 'right', paddingRight: 1}}>
        <MenuItem 
          primaryText={buttonLabel} 
          onTouchTap={this.handleTouchTap} 
          style={{textDecoration: (login) ? 'underline' : 'none'}}
        />
      </div>
       <Login />
       <ExperimentList 
        open={this.state.experimentListOpen} 
        handleOpen={this.openExperimentList}
        handleClose={this.closeExperimentList}
       />
        <Popover
          open={this.state.open}
          anchorEl={this.state.anchorEl}
          onRequestClose={this.handleRequestClose}
          anchorOrigin={{horizontal:"right",vertical:"bottom"}}
          targetOrigin={{horizontal:"right",vertical:"top"}}
          >
          {this.renderMenu(login)}
        </Popover>
    </div>
    )
  }
}

@@ -156,44 +156,189 @@
 ort 
-Divider from 'material-ui/Divider';%0A
+%7B ListItem %7D from 'material-ui/List';%0Aimport Avatar from 'material-ui/Avatar';%0Aimport Divider from 'material-ui/Divider';%0A%0Aimport Profile from 'material-ui/svg-icons/social/person';
 %0Aimp
@@ -522,16 +522,51 @@
 nColor,%0A
+  blue400 as avatarBackgroundColor%0A
 %7D from '
@@ -1733,32 +1733,110 @@
       %3CMenuItem%0A
+              leftIcon=%7B%3CProfile hoverColor=%7BhoverColor%7D color=%7BiconColor%7D/%3E%7D%0A
               pr
@@ -2516,24 +2516,296 @@
 %0A    %7D%0A  %7D%0A%0A
+  renderUserPic = (login, size=36) =%3E %7B%0A    return ((!login) ? %0A            null:%0A            %3CAvatar %0A              size=%7Bsize%7D %0A              backgroundColor=%7BavatarBackgroundColor%7D%0A            %3E%0A              %7Bthis.props.username.charAt(0)%7D%0A            %3C/Avatar%3E)%0A  %7D%0A%0A
   render() %7B
@@ -3007,28 +3007,28 @@
 %7D%3E%0A        %3C
-Menu
+List
 Item %0A      
@@ -3169,16 +3169,65 @@
 none'%7D%7D%0A
+          leftAvatar=%7Bthis.renderUserPic(login)%7D%0A
         

Add account pic