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 ToolbarExamplesSimple extends React.Component {

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

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

  render() {
    return (
      <Toolbar>
        <ToolbarGroup firstChild>
          <DropDownMenu value={this.state.value} onChange={this.handleChange}>
            <MenuItem value={1} primaryText="Scheduled" />
            <MenuItem value={2} primaryText="Completed"/>
            <MenuItem value={3} primaryText="All Rides" />
            <MenuItem value={4} primaryText="Cancelled" />
            <MenuItem value={5} primaryText="In-Progress" />
          </DropDownMenu>
        </ToolbarGroup>
        <ToolbarGroup>
          <ToolbarTitle text="MANAGE RIDES" />
          <FontIcon className="muidocs-icon-custom-sort" />
            <ToolbarSeparator />
            <RaisedButton href="#/app/form/steppers" label="Book" labelPosition="after" primary icon={<ContentAdd />} /><div className="divider" />


      <ToolbarSeparator />

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

const ToolbarSection = () => (
  <ToolbarExamplesSimple />
);


module.exports = ToolbarSection;
