import React from 'react';
import IconMenu from 'material-ui/IconMenu';
import IconButton from 'material-ui/IconButton';
import FontIcon from 'material-ui/FontIcon';
import NavigationExpandMoreIcon from 'material-ui/svg-icons/navigation/expand-more';
import MenuItem from 'material-ui/MenuItem';
import DropDownMenu from 'material-ui/DropDownMenu';
import RaisedButton from 'material-ui/RaisedButton';
import FlatButton from 'material-ui/FlatButton';
import ContentAdd from 'material-ui/svg-icons/content/add';
import { Toolbar, ToolbarGroup, ToolbarSeparator, ToolbarTitle } from 'material-ui/Toolbar';
import MessageSelection from './MessageSelection.js';

class ToolbarMessages extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 1,
    };
  }

  handleChange = (event, index, value) => this.setState({ value });
  handleMessagesAdded = (MessageList) => {
    if (this.props.onMessagesReceived) {
      this.props.onMessagesReceived(MessageList);
    }
  }

  render() {
    return (
      <Toolbar>
        <ToolbarGroup firstChild>
          <DropDownMenu value={this.state.value} openImmediately={false} onChange={this.handleChange}>
            <MenuItem value={1} primaryText="All Messages" />
            <MenuItem value={2} primaryText="SMS" />
            <MenuItem value={3} primaryText="APP" />
            <MenuItem value={4} primaryText="Lyft" />           
            
          </DropDownMenu>
        </ToolbarGroup >
        <ToolbarGroup>
          <FontIcon className="muidocs-icon-custom-sort" />
          <ToolbarSeparator />
          <MessageSelection title={"Message"} buttonValue={"Message"} icon={<ContentAdd />} onMessagesAdded={this.handleMessagesAdded} />
          <div className="divider" />
          <ToolbarSeparator />
          <IconMenu
            iconButtonElement={
              <IconButton touch>
                <NavigationExpandMoreIcon />
              </IconButton>
            }
          >
            <MenuItem primaryText="Download" />
            <MenuItem primaryText="Print" />
          </IconMenu>
        </ToolbarGroup>
      </Toolbar>
    );
  }
}

const ToolbarMessageComponent = (props) => (
  <ToolbarMessages onMessagesReceived={props.onMessagesReceived} />
);


module.exports = ToolbarMessageComponent;
