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 ChildForm extends Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      title: 1,
      firstName: '',
      lastName: '',
      phoneNumber: '',
      searchText: ''
    };
    this.defaultState = Object.assign({}, this.state);
    this.http = props.appstate.http;
    this.authStore = props.appstate.auth;
    this.airports = props.appstate.airports;
    this.customerStore = props.appstate.customer;
    this.airlinesDomesticStore = props.appstate.airlinesDomestic;
  }

  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
    })
  }

  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={'Child Passenger Data ' + ((+this.props.passengerData.index) + 1)}/>
            </ToolbarGroup>
          </Toolbar>
          <Divider/>
          <div style={{padding: '14px', backgroundColor: "#eeeeee"}}>
            <div className="row" style={{marginBottom: 0}}>
              <div className="col s12 l12">
                <p className="label-form">Autocomplete Form</p>
                <AutoComplete
                  hintText="Search Customer, Input Name/ID Number"
                  maxSearchResults={20}
                  dataSource={this.customerStore.searchResults}
                  dataSourceConfig={{
                    text: 'search_text',
                    value: 'id'
                  }}
                  filter={AutoComplete.noFilter}
                  searchText={this.state.searchText}
                  onUpdateInput={(searchText) => {
                    this.setState({
                      searchText: searchText
                    });
                    this.customerStore.search(searchText);
                  }}
                  onNewRequest={(choosenRequest, index) => {
                    if (index === -1) {
                      return;
                    }
                    this.airlinesDomesticStore.setPassengerData('child', this.props.passengerData.index, choosenRequest);
                  }}
                  openOnFocus={true}
                  menuStyle={{maxHeight: 300}}
                  fullWidth={true}
                />
              </div>
            </div>
          </div>
          <Divider/>

          <div style={{padding: '14px'}}>
            <div className="row">
              <div className="col s12 l2">
                <p className="label-form">Title</p>
                <TextField hintText="Your name here" fullWidth={true} value={"MR."} disabled={true}
                           underlineDisabledStyle={{borderBottom: "1px dotted #ddd"}}/>
              </div>
              <div className="col s12 l5">
                <div>
                  <p className="label-form">First Name</p>
                  <TextField hintText="Your name here" fullWidth={true} value={this.props.passengerData.data.name}
                             disabled={true} underlineDisabledStyle={{borderBottom: "1px dotted #ddd"}}/>
                </div>
              </div>
              <div className="col s12 l5">
                <div>
                  <p className="label-form">Last Name</p>
                  <TextField hintText="Your name here" fullWidth={true} value={this.props.passengerData.data.name}
                             disabled={true} underlineDisabledStyle={{borderBottom: "1px dotted #ddd"}}/>
                </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} value={this.props.passengerData.data.phone}
                             disabled={true} underlineDisabledStyle={{borderBottom: "1px dotted #ddd"}}/>
                </div>
              </div>
            </div>
            <div className="row">
              <div className="col s12 l12">
                <div>
                  <p className="label-form">ID Number</p>
                  <TextField hintText="E.g 081167930404" fullWidth={true}
                             value={this.props.passengerData.data.id_number} disabled={true}
                             underlineDisabledStyle={{borderBottom: "1px dotted #ddd"}}/>
                </div>
              </div>
            </div>
          </div>
        </Card>
      </div>
    );
  }
}
