import React from 'react';
import IconMenu from 'material-ui/IconMenu';
import MenuItem from 'material-ui/MenuItem';
import IconButton from 'material-ui/IconButton/IconButton';
import { hashHistory } from 'react-router';

import {
  loggedUser,
  visitReporter,
} from 'utils/authorization';


const ImgIconButtonStyle = {
  width: '60px',
  height: '60px'
};

const listItemStyle = {
  paddingLeft: '50px' // 36 + 16, algin with sub list
};

class NavRightList extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      name: '',
      useruuid: ''
    }

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange = (event, value) => {
    hashHistory.push(value);
  }
  componentDidMount() {
    const user = JSON.parse(localStorage.getItem('loggedUser'));
    if (user) {
      this.setState(Object.assign(this.state, user));
    }
  }

  render() {
    return (
      <ul className="list-unstyled float-right">
        <li>

          <IconMenu

            iconButtonElement={<IconButton style={ImgIconButtonStyle}><img src="assets/images/ic_account_circle_white_48dp_1x.png" alt="" className="rounded-circle img30_30" /></IconButton>}
            onChange={this.handleChange}
            anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
            targetOrigin={{ horizontal: 'right', vertical: 'top' }}
            menuStyle={{ minWidth: '150px' }}
          >
            {!loggedUser.anyOf(visitReporter) &&
              <MenuItem
                onTouchTap={(e) => this.handleChange(e, `/app/authorizedusers/${this.state.useruuid}`)}
                primaryText="Profile"
                style={{ fontSize: '14px', lineHeight: '48px' }}
                innerDivStyle={listItemStyle}
                leftIcon={<i className="material-icons">account_circle</i>}
              />
            }
            {!loggedUser.anyOf(visitReporter) &&
              <MenuItem
                onTouchTap={(e) => this.handleChange(e, `/app/form/steppers/${this.state.useruuid}`)}
                primaryText="Book Ride"
                innerDivStyle={listItemStyle}
                style={{ fontSize: '14px', lineHeight: '48px' }}
                leftIcon={<i className="material-icons">mode_edit</i>}
              />
            }
            {loggedUser.anyOf(visitReporter) &&
              <MenuItem
                onTouchTap={(e) => this.handleChange(e, `/app/form/visit/${this.state.useruuid}`)}
                primaryText="Create Visit"
                innerDivStyle={listItemStyle}
                style={{ fontSize: '14px', lineHeight: '48px' }}
                leftIcon={<i className="material-icons">mode_edit</i>}
              />
            }
            <MenuItem
              onTouchTap={(e) => this.handleChange(e, `/login`)}
              primaryText="Log Out"
              innerDivStyle={listItemStyle}
              style={{ fontSize: '14px', lineHeight: '48px' }}
              leftIcon={<i className="material-icons">forward</i>}
            />
          </IconMenu>
        </li>
        <li style={{ marginRight: '10px' }}><h6>{this.state.name}</h6></li>
      </ul>
    );
  }
}

module.exports = NavRightList;