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 {Nation} from './nation';
import '../style.scss';
import {appConfig} from "../../../config/app";

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

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

  lastName = (event, value)=>{
      this.setState({
          lastNameAdult : value
      })
  };

  phoneNumber = (event,value) =>{
    this.setState({
      phoneNumberAdult : value
    })
  };

  handleDOB = (event,date) =>{
    this.setState({
      dob : date 
    })
  };

  handleNationality = (nation)=>{
    this.setState({
      nationality : nation.code
    })
  };

  handleExpired = (event,date) =>{
    this.setState({
      passport_expired :date
    })
  };

  handlePassportNation = (nation) =>{
    this.setState({
      passport_from : nation.code
    })
  };

  handlePassportNumber = (event,value)=>{
    this.setState({
      passport_number : value
    })
  }

	render() {
		 const nationConfig = {
      text : 'name',
      value : 'code'
    }

    const nation = Nation;

    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={'Adult Passenger 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} onChange={this.firstName}/>
                      </div>
                  </div>
                  <div className="col s12 l5">
                    <div>
                      <p className="label-form">Last Name</p>
                        <TextField hintText="Your name here" fullWidth={true} onChange={this.lastName}/>
                      </div>
                  </div>
                </div>
                <div className="row">
                  <div className="col s12 l4">
                    <div>
                      <p className="label-form">Date Of Birth</p>
                      <DatePicker fullWidth={true} style={{width: '100%'}} hintText="2017-08-17" onChange={this.handleDOB}/>
                    </div>
                  </div>
                  <div className="col s12 l4">
                    <div>
                      <p className="label-form">Nationality</p>
                      <AutoComplete
                        hintText="Choose Airport"
                        dataSource={nation}
                        dataSourceConfig={nationConfig}
                        filter={AutoComplete.caseInsensitiveFilter}
                        onNewRequest={this.handleNationality}
                        openOnFocus={true}
                        maxSearchResults ={10}
                        menuStyle={{maxHeight: 300}}
                        fullWidth={true}
                      />
                    </div>
                  </div>
                  <div className="col s12 l4">
                    <div>
                      <p className="label-form">Phone Number</p>
                      <TextField hintText="E.g 081167930404" fullWidth={true} onChange={this.phoneNumber} type="number"/>
                    </div>
                  </div>
                </div>

                <div className="row">
                  <div className="col s12 l4">
                    <div>
                      <p className="label-form">Passport Number</p>
                      <TextField hintText="E.g 527655277" fullWidth={true} onChange={this.handlePassportNumber} type="number"/>
                    </div>
                  </div>
                  <div className="col s12 l4">
                    <div>
                      <p className="label-form">Passport From</p>
                      <AutoComplete
                        hintText="Choose Airport"
                        dataSource={nation}
                        dataSourceConfig={nationConfig}
                        filter={AutoComplete.caseInsensitiveFilter}
                        onNewRequest={this.handlePassportNation}
                        openOnFocus={true}
                        maxSearchResults ={10}
                        menuStyle={{maxHeight: 300}}
                        fullWidth={true}
                      />
                    </div>
                  
                  </div>
                  <div className="col s12 l4">
                    <div>
                      <p className="label-form">Passport Expired Date</p>
                      <DatePicker fullWidth={true} style={{width: '100%'}} hintText="2017-08-17" onChange={this.handleExpired}/>
                    </div>
                  </div>
                </div>

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