import React from 'react';
import QueueAnim from 'rc-queue-anim';
import AutoComplete from 'material-ui/AutoComplete';
import { Tabs, Tab } from 'material-ui/Tabs';
import Slider from 'material-ui/Slider';
import TimePicker from 'material-ui/TimePicker';
import DatePicker from 'material-ui/DatePicker';
import TextField from 'material-ui/TextField';
import Toggle from 'material-ui/Toggle';
import Snackbar from 'material-ui/Snackbar';
import { RadioButton, RadioButtonGroup } from 'material-ui/RadioButton';
import MenuItem from 'material-ui/MenuItem';
import DropDownMenu from 'material-ui/DropDownMenu';
import ListExampleSimple from '../../../../ui/routes/lists/components/Simple';
import ListExampleMessages from '../../../../ui/routes/lists/components/Messages';
import Datatable from '../../../../tables/routes/members/components/Datatable';
import FlatButton from 'material-ui/FlatButton';
import RaisedButton from 'material-ui/RaisedButton';
import BottomNavigationExampleSimple from '../../../../ui/routes/components/components/BottomNavigation';
import IconButton from 'material-ui/IconButton';
import Dialog from 'material-ui/Dialog';
import FloatingActionButton from 'material-ui/FloatingActionButton';
import ContentAdd from 'material-ui/svg-icons/content/add';

const style = {
  marginRight: 20,
};

/**
 * Default size and `mini` FABs, in primary (default), `secondary` and `disabled` colors.
 */
const FloatingActionButtonExampleSimple = () => (
  <div>
    <FloatingActionButton secondary={true} style={style} >
      <ContentAdd />
    </FloatingActionButton>
  </div>
);
export default FloatingActionButtonExampleSimple;


/**
 * A modal dialog can only be closed by selecting one of the actions.
 */
export  class DialogExampleModal extends React.Component {
  state = {
    open: false,
  };

  handleOpen = () => {
    this.setState({ open: true });
  };

  handleClose = () => {
    this.setState({ open: false });
  };

  render() {
    const actions = [
      <FlatButton
        label="Cancel"
        primary={true}
        onTouchTap={this.handleClose}
      />,
      <FlatButton
        label="Submit"
        primary={true}
        disabled={true}
        onTouchTap={this.handleClose}
      />,
    ];

    return (
      <div>
        
      <FloatingActionButton onTouchTap={this.handleOpen} style={style}>
        <ContentAdd />
      </FloatingActionButton>        
        
        <Dialog
          title="Dialog With Actions"
          actions={actions}
          modal={true}
          open={this.state.open}
        >
          <div className="icon-box ibox-plain ibox-center">
            <div> Pickup </div>
            <i className="primary nav-icon material-icons">edit_location</i>
            <AutoComplete
              hintText="Pickup Location"
              filter={AutoComplete.noFilter}
              dataSource={dataSource2}
            />
            {/* <i className="primary nav-icon material-icons">schedule</i>                     */}
            <TimePicker
              format="ampm"
              hintText="Pickup Time"
            />
          </div>
        </Dialog>
      </div>
    );
  }
}

const dataSource1 = [
  {
    text: 'Mercy Hospital',
    value: (
      <MenuItem
        primaryText="Mercy Hospital"
        secondaryText="&#9786;"
      />
    ),
  },
  {
    text: 'Qwest Diagnostics',
    value: (
      <MenuItem
        primaryText="Qwest Diagnostics"
        secondaryText="&#9786;"
      />
    ),
  },
];

const dataSource2 = [
  {
    text: 'Home',
    value: (
      <MenuItem
        primaryText="Home"
        secondaryText="&#9786;"
      />
    ),
  },
  {
    text: 'Work',
    value: (
      <MenuItem
        primaryText="Work"
        secondaryText="&#9786;"
      />
    ),
  },
  {
    text: '1800 Highland..',
    value: (
      <MenuItem
        primaryText="1800 Highland Ave.."
        secondaryText="&#9786;"
      />
    ),
  },
];


const Services = () => (
  <article className="article padding-sm-v">
    <h2>Messages</h2>
      <div className="col-md-4">
      <div className="box box-default">
            <div className="box-body">
              <div className="icon-box ibox-plain ibox-center">
                <div> Upcoming Rides <a href=""><i className="nav-icon material-icons">directions_car</i></a></div>
                  <Datatable />
              </div>
            </div>

          </div>
          <div className="col-md-2">
            <div className="box box-default">
              <div className="box-body">
                <div className="icon-box ibox-plain ibox-center">
                  <div> Notifications <a href=""><i className="nav-icon material-icons">phone_iphone</i></a></div>
                   <ListExampleMessages />  
                </div>
              </div>
            </div>
          </div>
        </div>
     
   
  </article>
);

const Page = () => (
  <section className="chapter">
    <QueueAnim type="bottom" className="ui-animate">
      <div key="1"><DialogExampleModal /></div>
      <div key="2"><Services /></div>
    </QueueAnim>
  </section>
);

module.exports = Page;

