import React, { Component } from 'react';
import TextField from 'material-ui/TextField';
import RaisedButton from 'material-ui/RaisedButton';
import QueueAnim from 'rc-queue-anim';
import FloatingActionButton from 'material-ui/FloatingActionButton';
import ContentAdd from 'material-ui/svg-icons/content/add';
// import MobileTearSheet from '../../../../MobileTearSheet';
import { List, ListItem } from 'material-ui/List';
import ContentInbox from 'material-ui/svg-icons/content/inbox';
import ContentSend from 'material-ui/svg-icons/content/send';
import ContentDrafts from 'material-ui/svg-icons/content/drafts';
import Divider from 'material-ui/Divider';
import IconMenu from 'material-ui/IconMenu';
import MenuItem from 'material-ui/MenuItem';
import IconButton from 'material-ui/IconButton';
import Download from 'material-ui/svg-icons/file/file-download';
import ArrowDropRight from 'material-ui/svg-icons/navigation-arrow-drop-right';
import MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert';
import ActionHome from 'material-ui/svg-icons/action/home';
import ActionWork from 'material-ui/svg-icons/action/work';
import MapsMyLocation from 'material-ui/svg-icons/maps/my-location';
import MapsAddLocation from 'material-ui/svg-icons/maps/add-location';
import MapsNearMe from 'material-ui/svg-icons/maps/near-me';
import MapsLocalHospital from 'material-ui/svg-icons/maps/local-hospital';
import MapsLocalPharmacy from 'material-ui/svg-icons/maps/local-pharmacy';
import AutoComplete from 'material-ui/AutoComplete';

const locations = [
 '1800 Highland Ave',
  'My Work',
];

export default class AutoCompleteExampleControlled extends Component {
  state = {
    searchText: '',
  };

  handleUpdateInput = (searchText) => {
    this.setState({
      searchText: searchText,
    });
  };

  handleNewRequest = () => {
    this.setState({
      searchText: '',
    });
  };

  render() {
    return (
      <div>
        <AutoComplete
          hintText="Address or place name"
          searchText={this.state.searchText}
          onUpdateInput={this.handleUpdateInput}
          onNewRequest={this.handleNewRequest}
          dataSource={locations}
          filter={(searchText, key) => (key.indexOf(searchText) !== -1)}
          openOnFocus={true}
        />
      </div>
    );
  }
}

const style = {
  marginRight: 20,
};

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

const IconMenuExampleNested = () => (
  <IconMenu
    iconButtonElement={<IconButton><MoreVertIcon /></IconButton>}
    anchorOrigin={{ horizontal: 'left', vertical: 'top' }}
    targetOrigin={{ horizontal: 'left', vertical: 'top' }}
  >
    <MenuItem
      primaryText="Copy & Paste"
      rightIcon={<ArrowDropRight />}
      menuItems={[
        <MenuItem primaryText="Cut" />,
        <MenuItem primaryText="Copy" />,
        <Divider />,
        <MenuItem primaryText="Paste" />,
      ]}
    />

    <MenuItem
      primaryText="Case Tools"
      rightIcon={<ArrowDropRight />}
      menuItems={[
        <MenuItem primaryText="UPPERCASE" />,
        <MenuItem primaryText="lowercase" />,
        <MenuItem primaryText="CamelCase" />,
        <MenuItem primaryText="Propercase" />,
      ]}
    />
    <Divider />
    <MenuItem primaryText="Download" leftIcon={<Download />} />
    <Divider />
    <MenuItem value="Del" primaryText="Delete" />

  </IconMenu>
);


const Hero = () => (
  <article className="article">
    <section className="hero">
      <div className="hero-content">
        <h1 className="hero-title">How can we help you?</h1>
      </div>
      <p className="hero-tagline">Feel free to contact us if you have any questions</p>
    </section>
  </article>
);


const Contact = () => (
  <article className="article article-dark">
    <h2 className="article-title text-center no-margin-top">Pickup Location</h2>
    <div className="container-fluid with-maxwidth">
      <div className="row">
        <div className="col-xl-6">
          <div className="card-content">
            <span className="card-title" />

          </div>


          <div className="">
            <AutoCompleteExampleControlled />
            <List>
              <ListItem primaryText="Current Location" leftIcon={<MapsNearMe />} />

            </List>

            <Divider />

            <List>
              <ListItem primaryText="Add Home" rightIcon={<ArrowDropRight />} leftIcon={<ActionHome />} />
              <ListItem primaryText="Add Work"  rightIcon={<ArrowDropRight />} leftIcon={<ActionWork />} />
              <ListItem primaryText="Add Custom Shortcut" rightIcon={<ArrowDropRight />} leftIcon={<MapsLocalHospital />} />
            </List>
            <Divider />
            <List>
              <ListItem primaryText="1800 Highland Ave" rightIcon={<MapsMyLocation />} />
              <ListItem primaryText="Berwyn Senior Center" rightIcon={<MapsLocalPharmacy />} />
            </List>
          </div>
          <div className="box box-transparent">
            <div className="box-body padding-lg-h">
              <h4>Get In Touch</h4>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A consectetur necessitatibus ea possimus est quis cumque vel saepe. Eum, quas, ducimus.</p>
              <div className="divider divider-solid" />
              <p>123 Mountain View <br /> Santa Clara, C.A. <br /> USA</p>
              <div className="divider divider-solid" />
              <p>
                <strong>E:</strong> mail@site.com
                <br />
                <strong>P:</strong> +1 234 56789
                <br />
                <strong>S:</strong> www.site.com
              </p>
            </div>
          </div>
        </div>
        <div className="col-xl-6">
          <div className="box box-transparent">
            <div className="box-body padding-lg-h">
              <h4>Contact</h4>
              <form name="contactForm">
                <div className="form-group">
                  <TextField
                    hintText="Name"
                    fullWidth
                    value="Michael Weinberg"
                  />
                </div>
                <div className="form-group">
                  <TextField
                    hintText="Work Email"
                    fullWidth
                    type="email"
                    value="michael@brighterdevelopment.com"
                  />
                </div>
                <div className="form-group">
                  <TextField
                    hintText="Message"
                    fullWidth
                    multiLine
                    rows={3}
                  />
                </div>
                <div className="divider" />
                <RaisedButton primary label="Submit" />
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </article>
);




const Page = () => (
  <section className="chapter">
    <QueueAnim type="bottom" className="ui-animate">
      <div key="1"><IconMenuExampleNested /></div>
      <div key="2"><Contact /></div>
      <div key="3"><FloatingActionButtonExampleSimple /></div>
    </QueueAnim>
  </section>
);

module.exports = Page;
