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 CheckSchedule extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      value: 1,
      searchText: '',
      returnDateDisabled:true,
      bus:'',
      passanger:1,
      depatureBus: '',
      destinationBus:'',
    };
    this.defaultState = Object.assign({}, this.state);
    this.http = props.appstate.http;
    this.authStore = props.appstate.auth;
  }

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

  }

  handleDepatureBus = (bus) =>{
      this.setState({
        depatureBus : bus.value
      })
  };

  handleDestinationBus = (bus) =>{
      this.setState({
        destinationBus : bus.value
      })
  };

  handleChangeTab = (tabSelected) => {
     this.setState({
       tabSelected: tabSelected,
     });
    this.props.history.push(tabSelected);
   };


  handleUpdateInput = (searchText) => {
    this.setState({
      searchText: searchText,
    });
  };

  handleNewRequest = () => {
    this.setState({
      searchText: '',
    });
  };

  handleChange = (event, index, value) => this.setState({value});

  handleBus = (event, index, value) => {
    this.setState({
      bus: value
    });
  };

  handlePassanger = (event, index, value) => {
    this.setState({
      passanger: value
    });
  };

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

  render() {

    const styles = {

    };

    const busConfig = {
      text : 'bus',
      value : 'value'
    }

    const city = [
      {bus: 'Bandung - Buah Batu', value:1},
      {bus: 'Bandung - Buah Batu',  value:2},
      {bus: 'Bandung - Cimareme',  value:3},
      {bus: 'Bandung - M.toha', value:4},
      {bus: 'Bandung - Pasteur1', value:5},
      {bus: 'Bandung - Pasteur2', value:6},
      {bus: 'Bandung - Surapati1', value:7},
      {bus: 'Bandung - Surapati2', value:8},
      {bus: 'Jakarta - Arthaloka', value:9},
      {bus: 'Jakarta - Bekasi', value:10},
      {bus: 'Jakarta - Bintaro', value:11},
      {bus: 'Jakarta - Cibubur', value:12},
      {bus: 'Jakarta - Cikini', value:13},
      {bus: 'Jakarta - Ciledug1', value:14},
      {bus: 'Jakarta - Ciledug2', value:15}
    ];

    const cityDestination= [
      {bus: 'Jakarta - Blora', value:1},
      {bus: 'Jakarta - Bsd', value:2},
      {bus: 'Jakarta - Karawaci', value:3},
      {bus: 'Jakarta - Kelapa Gading', value:4},
      {bus: 'Jakarta - Tomang', value:5},
    ];

    const count = [
      <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"/>,
    ];

    const bus= [
      <MenuItem key={0} value={''} primaryText="Choose Bus / Shuttle"/>,
      <MenuItem key={1} value={'BRT'} primaryText="Baraya Travel"/>,
      <MenuItem key={2} value={'BMT'} primaryText="Bimo Trans"/>,
      <MenuItem key={3} value={'CPG'} primaryText="Cipaganti"/>,
      <MenuItem key={4} value={'DTR'} primaryText="Day Trans"/>,
      <MenuItem key={5} value={'XTR'} primaryText="XTrans"/>,
    ];

    return (
          <Card>
              <Toolbar className="toolbarCard" style={{backgroundColor: '#fff'}}>
              <ToolbarGroup>
                <ToolbarTitle style={{fontSize: 14, fontWeight: 500, color: '#32325d'}} text={(this.state.value == 1)? 'Find Schedule' : 'Find Transaction Data'}/>
              </ToolbarGroup>
              <ToolbarGroup>
                <FontIcon className="muidocs-icon-custom-sort"/>
                <ToolbarSeparator/>
                <DropDownMenu value={this.state.value} onChange={this.handleChange}>
                  <MenuItem value={1} primaryText="Schedule" />
                </DropDownMenu>
              </ToolbarGroup>
            </Toolbar>
              <Divider/>
              <div style={{padding: '14px'}}>
                <div className="row">
                  <div className="col s12 l4">
                    <p className="label-form">Shuttle/Bus</p>
                    <SelectField
                      value={this.state.bus}
                      onChange={this.handleBus}
                      fullWidth={true}
                    >
                      {bus}
                    </SelectField>
                  </div>
                  <div className="col s12 l4">
                    <div>
                      <p className="label-form">Depature City</p>
                        <AutoComplete
                          hintText="Choose Bus Station"
                          dataSource={city}
                          dataSourceConfig={busConfig}
                          filter={AutoComplete.caseInsensitiveFilter}
                          onNewRequest={this.handleDepatureBus}
                          openOnFocus={true}
                          menuStyle={{maxHeight: 300}}
                          fullWidth={true}
                        />
                    </div>
                  </div>
                  <div className="col s12 l4">
                    <div>
                      <p className="label-form">Destination City</p>
                      <AutoComplete
                        hintText="Choose Bus Station"
                        dataSource={cityDestination}
                        dataSourceConfig={busConfig}
                        filter={AutoComplete.caseInsensitiveFilter}
                        onNewRequest={this.handleDestinationBus}
                        openOnFocus={true}
                        menuStyle={{maxHeight: 300}}
                        fullWidth={true}
                      />
                    </div>
                  </div>
                </div>

                <div className="row">
                  <div className="col s12 l6">
                  <div>
                      <p className="label-form">Departure Date</p>
                      <DatePicker fullWidth={true} style={{width: '100%'}} hintText="2017-08-17"/>
                    </div>
                  </div>
                  <div className="col s12 l6">
                    <div>
                      <p className="label-form" >Passanger</p>
                      <SelectField
                        value={this.state.passanger}
                        onChange={this.handlePassanger}
                        fullWidth={true}
                      >
                        {count}
                      </SelectField>  
                    </div>
                  </div>
                </div>

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

              </div>
          </Card>
        
    )
  }
}