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/ppob',
      returnDateDisabled:true,
    };
    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: 'Phone Bill', value: 1},
      {nominal: 'Prepaid Electricity', value: 2},
      {nominal: 'Postpaid Electricity', value: 3},
      {nominal: 'Telephone Bill', value: 4},
      {nominal: 'Internet Bill', value: 5},
      {nominal: 'Cable TV Bill', value: 6},
      {nominal: 'Water Bill', value: 7},
      {nominal: 'Multifinance', value: 8},
      {nominal: 'BPJS', value: 9},
    ];

    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">Product</p>
              <AutoComplete
                hintText="Choose the product"
                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">Transaction Period</p>
              <div className="row">
                <div className="col m5">
                  <DatePicker fullWidth={true} hintText="2017-09-07"/>
                </div>
                <div className="col m2">
                  <span style={{textAlign: 'center'}}><p className="label-form" style={{paddingTop: '7px'}} >To</p></span>
                </div>
                <div className="col m5">
                  <DatePicker fullWidth={true} hintText="2017-09-07"/>
                </div>
              </div>
            </div>
          </div>
          <div className="row">
            <div className="col m10"></div>
            <div className="col m2">
              <RaisedButton label="Proceed" primary={true}/>
            </div>
          </div>                  
        </div>
      </Card>
    )
  }
}
