import React from 'react';
// import MobileTearSheet from '../../../MobileTearSheet';
import {List, ListItem} from 'material-ui/List';
import Divider from 'material-ui/Divider';
import Subheader from 'material-ui/Subheader';
import Avatar from 'material-ui/Avatar';
import {grey400, darkBlack, lightBlack} from 'material-ui/styles/colors';
import IconButton from 'material-ui/IconButton';
import MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert';
import IconMenu from 'material-ui/IconMenu';
import MenuItem from 'material-ui/MenuItem';
import DropDownMenu from 'material-ui/DropDownMenu';


const iconButtonElement = (
  <IconButton
    touch
    tooltip="more"
    tooltipPosition="bottom-left"
    >
    <MoreVertIcon color={grey400} />
  </IconButton>
);

const rightIconMenu = (
  <IconMenu iconButtonElement={iconButtonElement}>
    <MenuItem>Reply</MenuItem>
    <MenuItem>Forward</MenuItem>
    <MenuItem>Archive</MenuItem>
  </IconMenu>
);

const ListExampleSimple = () => (
  <section className="box box-default">
    {/* <div className="box-header">Support Requests</div> */}
    <div className="box-body">
      <List>
        <Subheader>
        <DropDownMenu value={3} >
          <MenuItem value={1} primaryText="Starred" />
          <MenuItem value={2} primaryText="All" />
          <MenuItem value={3} primaryText="Recent" />
          <MenuItem value={4} primaryText="Urgent" />
          <MenuItem value={5} primaryText="Archived" />
        </DropDownMenu>
        <DropDownMenu value={1} >
          <MenuItem value={1} primaryText="SMS" />
          <MenuItem value={2} primaryText="App" />
          <MenuItem value={3} primaryText="All" />
        </DropDownMenu>
        </Subheader>



        <ListItem
          leftAvatar={<Avatar src="assets/images-demo/avatars/ok-128.jpg" />}
          rightIconButton={rightIconMenu}
          primaryText=""
          secondaryText={
            <p>
              <span style={{color: darkBlack}}>ride #f43564</span><br />
               Can't use app.  </p>
          }
          secondaryTextLines={2}
        />
        <Divider inset />
        <ListItem
          leftAvatar={<Avatar src="assets/images-demo/avatars/kolage-128.jpg" />}
          rightIconButton={rightIconMenu}
          primaryText=""
          secondaryText={
            <p>
              <span style={{color: darkBlack}}>ride #ww3564</span><br />
              Driver never showed up.
            </p>
          }
          secondaryTextLines={2}
        />
        <Divider inset />
        <ListItem
          leftAvatar={<Avatar src="assets/images-demo/avatars/uxceo-128.jpg" />}
          rightIconButton={rightIconMenu}
          primaryText=""
          secondaryText={
            <p>
              <span style={{color: darkBlack}}>Ride #WQ564</span><br />
              I need a wheelchair.
            </p>
          }
          secondaryTextLines={2}
        />

      </List>
    </div>
  </section>
);

export default ListExampleSimple;
