import React 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,
  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 FormAirlinesINTL extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      cabin: 1,
      returnDateDisabled:true,
      depatureAirport:'',
      destinationAirport:'',
      adult:1,
      children:0,
      baby:0
    };
    this.defaultState = Object.assign({}, this.state);
    this.http = props.appstate.http;
    this.authStore = props.appstate.auth;
  }

  componentDidMount() {
    console.log('Profile loaded!');

  }

  handleRadioButton = (event,value) =>{
    let a;
    if(value == 'return'){
      a = false;
    }
    else{
      a = true;
    }
    this.setState({
      returnDateDisabled:a
    })
  };

  handleDepatureAirport = (airport) =>{
      this.setState({
        depatureAirport : airport.value
      })
  };

  handleDestinationAirport = (airport) =>{
      this.setState({
        destinationAirport : airport.value
      })
  };


  handleChange = (event, index, value) => {
    this.setState({
      cabin : value
    })
  };
  handleAdult = (event, index, value) => {
    this.setState({
      adult: value
    });
  };

  handleChild = (event, index, value) => {
    this.setState({
      children: value
    });
  };

  handleBaby = (event, index, value) => {
    this.setState({
      baby: value
    });
  };

  handleDepatureDate = (event,date)=>{
    this.setState({
      depatureDate : date
    })
  };

  handleDestinationDate = (event,date)=>{
    this.setState({
      destinationDate : date
    })
  };

  submit = ()=>{
    this.props.onClickFind();
    this.props.getData(this.state);
  }

  render() {

    const styles = {

      radioButton: {
        marginBottom: 16,
      },
    };

    const airportConfig = {
      text : 'airport',
      value : 'value'
    }

    const airport = [
      {airport: 'Jakarta - Soekarno - Hatta (CGK)', value: 1},
      {airport: 'Bali', value:2},
      {airport: 'Surabaya', value:3},
      {airport: 'Yogyakarta', value:4},
      {airport: 'Aceh', value:5},
      {airport: 'Kalimantan', value:6},
      {airport: 'Medan', value:7},
      {airport: 'Papua', value:8},
    ];

    const items = [
      <MenuItem key={1} value={1} primaryText="Economy"/>,
      <MenuItem key={2} value={2} primaryText="Bussiness"/>,
    ];

    const count = [
      <MenuItem key={0} value={0} primaryText="0"/>,
      <MenuItem key={1} value={1} primaryText="1"/>,
      <MenuItem key={2} value={2} primaryText="2"/>,
      <MenuItem key={3} value={3} primaryText="3"/>,
      <MenuItem key={4} value={4} primaryText="4"/>,
      <MenuItem key={5} value={5} primaryText="5"/>,
    ];


    return (

      <Card className="animated fadeIn cardLite">
      <Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
        <ToolbarGroup>

          <ToolbarTitle style={{fontSize: 14, fontWeight: 500, color: '#32325d'}} text={'Find Schedule'}/>
        </ToolbarGroup>
        <ToolbarGroup>
          <FontIcon className="muidocs-icon-custom-sort"/>
          <ToolbarSeparator/>
          <DropDownMenu value={1}>
            <MenuItem value={1} primaryText="Schedule" />
          </DropDownMenu>
        </ToolbarGroup>
      </Toolbar>
      <Divider/>

        <div style={{padding: '14px'}}>
          <div className="row">
            <div className="col s12 l6">
              <div>
                <p className="label-form">Cabin</p>
                <SelectField
                  value={this.state.cabin}
                  onChange={this.handleChange}
                  fullWidth={true}
                >
                  {items}
                </SelectField>
              </div>
              <div>
                <p className="label-form">Departure Date</p>
                <DatePicker fullWidth={true} style={{width: '100%'}} hintText="2017-08-17" onChange={this.handleDepatureDate}/>
              </div>
              <div style={{marginTop: '12px'}}>
                <p className="label-form">Airports</p>
                <AutoComplete
                  hintText="Choose Airport"
                  dataSource={airport}
                  dataSourceConfig={airportConfig}
                  filter={AutoComplete.caseInsensitiveFilter}
                  onNewRequest={this.handleDepatureAirport}
                  openOnFocus={true}
                  menuStyle={{maxHeight: 300}}
                  fullWidth={true}
                />
              </div>
            </div>

            <div className="col s12 l6">
              <div>
                <p className="label-form">Type journey</p>
                <RadioButtonGroup name="shipSpeed" defaultSelected="not_light"
                                  style={{marginTop: 20, display: 'flex'}}
                                  defaultSelected='oneway'
                                  onChange={this.handleRadioButton}
                                  >
                  <RadioButton
                    value="oneway"
                    label="Oneway"
                    style={{width: 'auto', marginRight: 10}}
                  />
                  <RadioButton
                    value="return"
                    label="Return"
                    style={{width: 'auto'}}
                  />
                </RadioButtonGroup>

              </div>
              <div style={{marginTop: 15}}>
                <p className="label-form">Return Date</p>
                <DatePicker fullWidth={true} disabled={this.state.returnDateDisabled} style={{width: '100%'}} hintText="2017-08-17" onChange={this.handleDestinationDate}/>
              </div>
              <div style={{marginTop: '12px'}}>
                <p className="label-form">Destination</p>
                  <AutoComplete
                   hintText="Choose Airport"
                   dataSource={airport}
                   dataSourceConfig={airportConfig}
                   filter={AutoComplete.caseInsensitiveFilter}
                   onNewRequest={this.handleDestinationAirport}
                   openOnFocus={true}
                   menuStyle={{maxHeight: 300}}
                   fullWidth={true}
                 />
              </div>
            </div>
          </div>

          <div className="row" style={{marginTop: '-8px'}}>
            <div className="col s12 l4">
              <p className="label-form">Adult</p>
              <SelectField
                value={this.state.adult}
                onChange={this.handleAdult}
                fullWidth={true}
              >
                {count}
              </SelectField>
              <p className="label-form">Age above 12 years</p>
            </div>
            <div className="col s12 l4">
              <p className="label-form">Child</p>
              <SelectField
                value={this.state.children}
                onChange={this.handleChild}
                fullWidth={true}
              >
                {count}
              </SelectField>
              <p className="label-form">2 to 12 years</p>
            </div>
            <div className="col s12 l4">
              <p className="label-form">Baby</p>
              <SelectField
                value={this.state.baby}
                onChange={this.handleBaby}
                fullWidth={true}
              >
                {count}
              </SelectField>
              <p className="label-form">Age below 2 years</p>
            </div>
          </div>

          <div className="row">
          <div className="col s0 l10"></div>
          <div className="col s0 l2">
            <RaisedButton onClick={this.submit} label="Find Schedule" primary={true} icon={ <FontIcon className="material-icons">search</FontIcon>}/>
          </div>
          </div>

        </div>
        </Card> 
    )
  }
}
