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 FormRailink extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      value: 1,
      searchText: '',
      tabSelected: '/app/service/railink',
      returnDateDisabled:true,
      adult:1,
      children: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
    })
  };

  handleDepatureRailink = (railink) =>{
      this.setState({
        depatureRailink : railink.value
      })
  };

  handleDestinationRailink = (railink) =>{
      this.setState({
        destinationRailink : railink.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});

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

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

    const styles = {

      radioButton: {
        marginBottom: 16,
      },
    };

    const raillinkConfig = {
      text : 'railink',
      value : 'value'
    }
    const railink = [,
      {railink: 'Kuala Namu', value: 1},
      {railink: 'Medan', value:2}
    ];


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

    return (

          <Card className="animated fadeIn cardLite">
            <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 l6">
                  <div>
                    <p className="label-form">Depature Station</p>
                      <AutoComplete
                        hintText="Choose Station"
                        dataSource={railink}
                        dataSourceConfig={raillinkConfig}
                        filter={AutoComplete.caseInsensitiveFilter}
                        onNewRequest={this.handleDepatureRailink}
                        openOnFocus={true}
                        menuStyle={{maxHeight: 300}}
                        fullWidth={true}
                      />
                  </div>
                </div>
                <div className="col s12 l6">
                  <div>
                    <p className="label-form">Destination Station</p>
                    <AutoComplete
                      hintText="Choose Station"
                      dataSource={railink}
                      dataSourceConfig={raillinkConfig}
                      filter={AutoComplete.caseInsensitiveFilter}
                      onNewRequest={this.handleDestinationRailink}
                      openOnFocus={true}
                      menuStyle={{maxHeight: 300}}
                      fullWidth={true}
                    />
                  </div>
                </div>
              </div>

              <div className="row">
                <div className="col s12 l4">
                  <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>
                <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 className="col s12 l4">
                  <div>
                    <p className="label-form">Return Date</p>
                    <DatePicker fullWidth={true} disabled={this.state.returnDateDisabled} style={{width: '100%'}} hintText="2017-08-17"/>
                  </div>
                </div>
              </div>


              <div className="row">
                <div className="col s12 l6">
                  <p className="label-form" >Adult</p>
                  <SelectField
                    value={this.state.adult}
                    onChange={this.handleAdult}
                    fullWidth={true}
                  >
                    {adult}
                  </SelectField>
                </div>
                <div className="col s12 l6">
                  <p className="label-form">Child</p>
                  <SelectField
                    value={this.state.children}
                    onChange={this.handleChild}
                    fullWidth={true}
                  >
                    {child}
                  </SelectField>
                </div>
              </div>

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

              <div className="row">
                <blockquote>
                  <p>NOTES : </p>
                  <ul style={{listStyleType: "disc"}}>
                    <li>Railink Passengers are required to depart from Medan Railink Station to Railway Station at Kuala Namu Airport minimum <b>two hours</b> before the scheduled departure of domestic aircraft and <b>three hours</b> for international departure</li>
                    <li>If the purchase of an Railink ticket is less than 2 hours before the scheduled departure time of the plane, the risk of delay in aircraft departure shall be borne by the Passenger</li>
                  </ul>
                  
                </blockquote>
              </div>
            </div>
          </Card>

    )
  }
}
