import React, { Component } from 'react';
import {observer, inject} from 'mobx-react';
import bind from 'bind-decorator';
import {
  Card,
  CardActions,
  CardHeader,
  CardMedia,
  CardTitle,
  AutoComplete,
  CardText,
  FlatButton,
  Divider,
  RaisedButton,
  Toolbar,
  DatePicker,
  FontIcon,
  SelectField,
  MenuItem,
  ToolbarGroup,
  FloatingActionButton,
  ToolbarSeparator,
  IconButton,
  ToolbarTitle,
  TextField,
  RadioButton, RadioButtonGroup,DropDownMenu,
  Tabs, Tab,
} from 'material-ui';
import {withRouter} from 'react-router';
import {BrowserRouter as Router, Route} from 'react-router-dom';
import StarBorder from 'material-ui/svg-icons/toggle/star-border';
import ContentAdd from 'material-ui/svg-icons/content/add';

import '../style.scss';
import {appConfig} from "../../../config/app";

@inject('appstate')
@observer
export default class PassangerForm extends Component {
	constructor(props) {
	  super(props);
	  this.props = props;
	  this.state = {
	    title:1,
	  };
	  this.defaultState = Object.assign({}, this.state);
	  this.http = props.appstate.http;
	  this.authStore = props.appstate.auth;
	}

	handleChangeTitle = (event, index, value) => {
	  this.setState({
	    title : value
	  })
	};

	render() {
		const items = [
		  <MenuItem key={1} value={1} primaryText="MR"/>,
		  <MenuItem key={2} value={2} primaryText="MS"/>,
		  <MenuItem key={3} value={3} primaryText="MRS"/>,
		];

		return (
			<div className="row">
                <Card>
                <Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
                <ToolbarGroup>
                  <ToolbarTitle style={{fontSize: 14, fontWeight: 500, color: '#32325d'}} text={'Passanger Data '+this.props.no}/>
                </ToolbarGroup>
                </Toolbar>
                
                <Divider/>
                
                <div style={{padding: '14px'}}>
                <div className="row">
                  <div className="col s12 l2">
                    <p className="label-form">Title</p>
                    <SelectField
                      value={this.state.title}
                      onChange={this.handleChangeTitle}
                      fullWidth={true}
                    >
                      {items}
                    </SelectField>
                  </div>
                  <div className="col s12 l5">
                    <div>
                      <p className="label-form">First Name</p>
                        <TextField hintText="Your name here" fullWidth={true}/>
                      </div>
                  </div>
                  <div className="col s12 l5">
                    <div>
                      <p className="label-form">Last Name</p>
                        <TextField hintText="Your name here" fullWidth={true}/>
                      </div>
                  </div>
                </div>
                <div className="row">
                  <div className="col s12 l12">
                    <div>
                      <p className="label-form">Phone Number</p>
                      <TextField hintText="E.g 081167930404" fullWidth={true}/>
                    </div>
                  </div>
                </div>

                </div>
              </Card>
              </div>
		);
	}
}
