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 FormTrain extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      depatureStation:1,
      destinationStation:1,
      adult:1,
      baby:0
    };
    this.defaultState = Object.assign({}, this.state);
    this.http = props.appstate.http;
    this.authStore = props.appstate.auth;
  }

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

  }

  handleDepatureStation = (station) =>{
      this.setState({
        depatureStation : station.value
      })
  };

  handleDestinationStation = (station) =>{
      this.setState({
        destinationStation : station.value
      })
  };

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

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

  render() {

    const styles = {

      radioButton: {
        marginBottom: 16,
      },
    };

    const station = [
      <MenuItem key={1} value={1} primaryText="Bandung"/>,
      <MenuItem key={2} value={2} primaryText="Solo"/>,
      <MenuItem key={3} value={3} primaryText="Bekasi"/>,
      <MenuItem key={4} value={4} primaryText="Yogyakarta"/>,
      <MenuItem key={5} value={5} primaryText="Bandar"/>,
      <MenuItem key={6} value={6} primaryText="Bogor"/>,
      <MenuItem key={7} value={7} primaryText="Batu Tulis"/>,
      <MenuItem key={8} value={8} primaryText="Karanganyar"/>,
      <MenuItem key={9} value={9} primaryText="Kebumen"/>,
    ];

    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 l4">
                <div>
                  <p className="label-form">Depature Station</p>
                  <SelectField
                    value={this.state.depatureStation}
                    onChange={this.handleDepatureStation}
                    fullWidth={true}
                  >
                    {station}
                  </SelectField>
                </div>
            </div>
            <div className="col s12 l4">
                <div>
                  <p className="label-form">Destination Station</p>
                  <SelectField
                    value={this.state.destinationStation}
                    onChange={this.handleDestinationStation}
                    fullWidth={true}
                  >
                    {station}
                  </SelectField>
                </div>
            </div>
            <div className="col s12 l4">
              <div>
                <p className="label-form">Departure Date</p>
                <DatePicker fullWidth={true} style={{width: '100%'}} hintText="2017-08-17"/>
              </div>                
            </div>
          </div>

          <div className="row" style={{marginTop: '-8px'}}>
            <div className="col s12 l6">
              <p className="label-form">Adult / Children</p>
              <SelectField
                value={this.state.adult}
                onChange={this.handleAdult}
                fullWidth={true}
              >
                {count}
              </SelectField>
            </div>

            <div className="col s12 l6">
              <p className="label-form">Baby</p>
              <SelectField
                value={this.state.baby}
                onChange={this.handleBaby}
                fullWidth={true}
              >
                {count}
              </SelectField>
            </div>
          </div>

          <div className="row">
          <blockquote>
            <p>NOTES : </p>
            <ul style={{listStyleType: "disc"}}>
              <li>Maximum ticket purchase for 3 months from now</li>
              <li>Baby category is person under 3 years old. the rest is included in adult category</li>
            </ul>
          </blockquote>
          </div>

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

          

        </div>
      </Card>   
    )
  }
}
