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,
  Tabs, Tab, TextField
} 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: '',
      tabSelected: '/app/service/airlines',
      returnDateDisabled:true,
      nominal: '',
      destinationNumber: ''
    };
    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
    })
  };

  handleNominal = (airport) =>{
      this.setState({
        nominal : airport.value
      })
  };

  handleDestinationNumber = (airport) =>{
      this.setState({
        destinationNumber : airport.value
      })
  };


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

  render() {

    const styles = {

      radioButton: {
        marginBottom: 16,
      },
    };

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

    const nominal = [
      {nominal: 'PDAM Aetra Jakarta', value: 1},
      {nominal: 'PDAM Palyja Jakarta', value: 2},
      {nominal: 'PDAM Bandung City', value: 3},
      {nominal: 'PDAM Jambi City', value: 4},
      {nominal: 'PDAM Malang City', value: 5},
      {nominal: 'PDAM Malang District', value: 6},
      {nominal: 'PDAM Sidoarjo District', value: 7},
      {nominal: 'PDAM Bandar Lampung City', value: 8},
      {nominal: 'PDAM Palembang City', value: 9},
      {nominal: 'PDAM Surabaya City', value: 10},
      {nominal: 'PDAM Bangkalan District', value: 11},
      {nominal: 'PDAM Bondowoso District', value: 12},
      {nominal: 'PDAM Bojonegoro District', value: 13},
      {nominal: 'PDAM Bogor City', value: 14},
      {nominal: 'PDAM Bogor District', value: 15},
      {nominal: 'PDAM Cilacap District', value: 16},
      {nominal: 'PDAM Sleman District', value: 17},
      {nominal: 'PDAM Mojokerto District', value: 18},
      {nominal: 'PDAM Tapin District', value: 19},
      {nominal: 'PDAM Balikpapan City', value: 20},
      {nominal: 'PDAM Grobogan District', value: 21},
      {nominal: 'PDAM Kubu Raya (Pontianak City)', value: 22},
      {nominal: 'PDAM Makasar City', value: 23},
      {nominal: 'PDAM Manado City', value: 24},
      {nominal: 'PDAM Pontianak City', value: 25},
      {nominal: 'PDAM Semarang City', value: 26},
    ];

    const items = [
      <MenuItem key={1} value={1} primaryText="Axis"/>,
      <MenuItem key={2} value={2} primaryText="Bolt"/>,
      <MenuItem key={3} value={3} primaryText="Esia"/>,
      <MenuItem key={4} value={4} primaryText="Excelcomindo"/>,
      <MenuItem key={5} value={5} primaryText="Indosat"/>,
      <MenuItem key={6} value={6} primaryText="Smartfren"/>,
      <MenuItem key={7} value={7} primaryText="Telkomsel"/>,
      <MenuItem key={8} value={8} primaryText="Three"/>,
    ];

    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>
        <div style={{padding: '14px'}}>
          <div className="row">
            <div className="col s12 l6">
              <p className="label-form">Service</p>
              <AutoComplete
                hintText="Choose the Service"
                dataSource={nominal}
                dataSourceConfig={airportConfig}
                filter={AutoComplete.caseInsensitiveFilter}
                onNewRequest={this.handleDepatureAirport}
                openOnFocus={true}
                menuStyle={{maxHeight: 300}}
                fullWidth={true}
              />
            </div>
            <div className="col s12 l6">
              <p className="label-form">Customer Number</p>
              <TextField
                hintText="E.g 002930294499"
                fullWidth={true}
                type="number"
              />
            </div>
          </div>
          <div className="row">
            <div className="col m10"></div>
            <div className="col m2">
              <RaisedButton label="Proceed" onClick={this.props.onClickFind} primary={true} icon={<FontIcon className="material-icons">forward</FontIcon>}/>
            </div>
          </div>
        </div>
      </Card>
    )
  }
}
