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';

class ToolbarExamplesSimple2 extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      value: 2,
    };
  }

  handleChange = (event, index, value) => this.setState({value});

  render() {
    return (
      <Toolbar>
        <ToolbarGroup firstChild>
          <DropDownMenu value={this.state.value} openImmediately={false} onChange={this.handleChange}>
            <MenuItem value={1} primaryText="All Members" />
            <MenuItem value={2} primaryText="Verified Members"/>
            <MenuItem value={3} primaryText="Unverified Members" />
            <MenuItem value={4} primaryText="Members Under Audit" />  
            <MenuItem value={5} primaryText="Inactive Members" /> 
            <MenuItem value={5} primaryText="Ineligible Members" />         
          </DropDownMenu>

        </ToolbarGroup >
        <ToolbarGroup>
          <FontIcon className="muidocs-icon-custom-sort" />
            <ToolbarSeparator />
            <RaisedButton href="#/app/page/eligibility" label="Member" labelPosition="after" secondary icon={<ContentAdd />} /><div className="divider" />

      <ToolbarSeparator />

          <IconMenu
            iconButtonElement={
              <IconButton touch>
                <NavigationExpandMoreIcon />
              </IconButton>
                        }
                    >
            <MenuItem primaryText="Download" />
            <MenuItem primaryText="Print" />
          </IconMenu>
        </ToolbarGroup>
      </Toolbar>
    );
  }
}

const ToolbarSection2 = () => (
  <ToolbarExamplesSimple2 />
);


module.exports = ToolbarSection2;
