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 PhoneBill extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      value: 1,
      searchText: '',
      tabSelected: '/app/service/ppob',
      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!');

  }

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

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


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

  render() {

    const styles = {

      radioButton: {
        marginBottom: 16,
      },
    };

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

    const axisNominal = [
      {nominal: 'Axis 5000 IDR', value: 1},
      {nominal: 'Axis 10000 IDR', value:2},
      {nominal: 'Axis 25000 IDR', value:3},
      {nominal: 'Axis 50000 IDR', value:4},
      {nominal: 'Axis 100000 IDR', value:5},
      {nominal: 'Axis Bronet 1 Month 1GB', value:6},
      {nominal: 'Axis Bronet 2 Month 2GB', value:7},
      {nominal: 'Axis Bronet 2 Month 3GB', value:8},
      {nominal: 'Axis Bronet 2 Month 5GB', value:9},
      {nominal: 'Axis Unlimited Gaul Internet', value:10},
    ];

    const boltNominal = [
      {nominal: 'Bolt 4G 25000 IDR', value: 1},
      {nominal: 'Bolt 4G 50000 IDR', value:2},
      {nominal: 'Bolt 4G 25000 IDR', value:3},
      {nominal: 'Bolt 4G 100000 IDR', value:4},
      {nominal: 'Bolt 4G 150000 IDR', value:5},
      {nominal: 'Bolt 4G 200000 IDR', value:6},
    ];

    const esiaNominal = [
      {nominal: 'Esia 1000 IDR', value: 1},
      {nominal: 'Esia 5000 IDR', value:2},
      {nominal: 'Esia 10000 IDR', value:3},
      {nominal: 'Esia 15000 IDR', value:4},
      {nominal: 'Esia 20000 IDR', value:5},
      {nominal: 'Esia 25000 IDR', value:6},
      {nominal: 'Esia 50000 IDR', value:7},
      {nominal: 'Esia 100000 IDR', value:8},
    ];

    const xlNominal = [
      {nominal: 'XL Voucher 5000 IDR', value:1},
      {nominal: 'XL Voucher 10000 IDR', value:2},
      {nominal: 'XL Voucher 25000 IDR', value:3},
      {nominal: 'XL Voucher 100000 IDR', value:4},
      {nominal: 'XL Voucher 200000 IDR', value:5},
    ];

    const indosatNominal = [
      {nominal: 'IM3 Reguler 5000 IDR', value: 1},
      {nominal: 'IM3 Reguler 10000 IDR', value:2},
      {nominal: 'IM3 Reguler 25000 IDR', value:3},
      {nominal: 'IM3 Reguler 50000 IDR', value:4},
      {nominal: 'IM3 Reguler 100000 IDR', value:5},
      {nominal: 'IM3 SMS 5000 IDR', value:6},
      {nominal: 'IM3 SMS 10000 IDR', value:7},
      {nominal: 'IM3 SMS 25000 IDR', value:8},
      {nominal: 'Mentari Reguler 5000 IDR', value: 9},
      {nominal: 'Mentari Reguler 10000 IDR', value:10},
      {nominal: 'Mentari Reguler 25000 IDR', value:11},
      {nominal: 'Mentari Reguler 50000 IDR', value:12},
      {nominal: 'Mentari Reguler 100000 IDR', value:13},
      {nominal: 'Mentari SMS 5000 IDR', value:14},
      {nominal: 'Mentari SMS 10000 IDR', value:15},
      {nominal: 'Mentari SMS 25000 IDR', value:16},
      {nominal: 'Indosat Data 1GB', value:17},
      {nominal: 'Indosat Data 2GB', value:18},
      {nominal: 'Indosat Data 5GB', value:19},
    ];

    const smartfrenNominal = [
      {nominal: 'Smartfren 5000 IDR', value: 1},
      {nominal: 'Smartfren 10000 IDR', value:2},
      {nominal: 'Smartfren 20000 IDR', value:3},
      {nominal: 'Smartfren 25000 IDR', value:4},
      {nominal: 'Smartfren 50000 IDR', value:5},
      {nominal: 'Smartfren 100000 IDR', value:6},
    ];

    const telkomselNominal = [
      {nominal: 'Simpati Voucher 5000 IDR', value: 1},
      {nominal: 'Simpati Voucher 10000 IDR', value:2},
      {nominal: 'Simpati Voucher 20000 IDR', value:3},
      {nominal: 'Simpati Voucher 25000 IDR', value:4},
      {nominal: 'Simpati Voucher 50000 IDR', value:5},
      {nominal: 'Simpati Voucher 100000 IDR', value:6},
      {nominal: 'Simpati Voucher 150000 IDR', value:7},
      {nominal: 'Simpati Voucher 200000 IDR', value:8},
      {nominal: 'Telkomsel Data 10MB', value:9},
      {nominal: 'Telkomsel Data 30MB', value:10},
      {nominal: 'Telkomsel Data 80MB', value:11},
      {nominal: 'Telkomsel Data 150MB', value:12},
      {nominal: 'Telkomsel Data 450MB', value:13},
      {nominal: 'Telkomsel Data 1.4GB', value:14},
    ];

    const threeNominal = [
      {nominal: 'Three 1000 IDR', value: 1},
      {nominal: 'Three 5000 IDR', value: 2},
      {nominal: 'Three 10000 IDR', value:3},
      {nominal: 'Three 20000 IDR', value:4},
      {nominal: 'Three 30000 IDR', value:5},
      {nominal: 'Three 50000 IDR', value:6},
      {nominal: 'Three 100000 IDR', value:7},
      {nominal: 'Three Reguler Quota 1GB', value:8},
      {nominal: 'Three Reguler Quota 2GB', value:9},
      {nominal: 'Three Reguler Quota 3GB', value:10},
      {nominal: 'Three Reguler Quota 4GB', value:11},
      {nominal: 'Three Reguler Quota 5GB', value:12},
      {nominal: 'Three Reguler Quota 6GB', value:13},
      {nominal: 'Three Reguler Quota 8GB', value:14},
      {nominal: 'Three Reguler Quota 10GB', value:15},
    ];

    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 (XL)"/>,
      <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"/>,
    ];

    return (
        <div>
          <div style={{padding: '14px'}}>
            <div className="row">
              <div className="col s12 l4">
                  <p className="label-form">Operator</p>
                  <SelectField
                    value={this.state.value}
                    onChange={this.handleChange}
                    fullWidth={true}
                  >
                    {items}
                  </SelectField>
              </div>
              <div className="col s12 l4">
                <p className="label-form">Nominal</p>
                {(this.state.value == 1) ? <AutoComplete
                                              hintText="Input the Nominal"
                                              dataSource={axisNominal}
                                              dataSourceConfig={airportConfig}
                                              filter={AutoComplete.caseInsensitiveFilter}
                                              onNewRequest={this.handleNominal}
                                              openOnFocus={true}
                                              menuStyle={{maxHeight: 300}}
                                              fullWidth={true}
                                            /> : ""}
                {(this.state.value == 2) ? <AutoComplete
                                              hintText="Input the Nominal"
                                              dataSource={boltNominal}
                                              dataSourceConfig={airportConfig}
                                              filter={AutoComplete.caseInsensitiveFilter}
                                              onNewRequest={this.handleNominal}
                                              openOnFocus={true}
                                              menuStyle={{maxHeight: 300}}
                                              fullWidth={true}
                                            /> : ""}
                {(this.state.value == 3) ? <AutoComplete
                                              hintText="Input the Nominal"
                                              dataSource={esiaNominal}
                                              dataSourceConfig={airportConfig}
                                              filter={AutoComplete.caseInsensitiveFilter}
                                              onNewRequest={this.handleNominal}
                                              openOnFocus={true}
                                              menuStyle={{maxHeight: 300}}
                                              fullWidth={true}
                                            /> : ""}
                {(this.state.value == 4) ? <AutoComplete
                                              hintText="Input the Nominal"
                                              dataSource={xlNominal}
                                              dataSourceConfig={airportConfig}
                                              filter={AutoComplete.caseInsensitiveFilter}
                                              onNewRequest={this.handleNominal}
                                              openOnFocus={true}
                                              menuStyle={{maxHeight: 300}}
                                              fullWidth={true}
                                            /> : ""}
                {(this.state.value == 5) ? <AutoComplete
                                              hintText="Input the Nominal"
                                              dataSource={indosatNominal}
                                              dataSourceConfig={airportConfig}
                                              filter={AutoComplete.caseInsensitiveFilter}
                                              onNewRequest={this.handleNominal}
                                              openOnFocus={true}
                                              menuStyle={{maxHeight: 300}}
                                              fullWidth={true}
                                            /> : ""}
                {(this.state.value == 6) ? <AutoComplete
                                              hintText="Input the Nominal"
                                              dataSource={smartfrenNominal}
                                              dataSourceConfig={airportConfig}
                                              filter={AutoComplete.caseInsensitiveFilter}
                                              onNewRequest={this.handleNominal}
                                              openOnFocus={true}
                                              menuStyle={{maxHeight: 300}}
                                              fullWidth={true}
                                            /> : ""}
                {(this.state.value == 7) ? <AutoComplete
                                              hintText="Input the Nominal"
                                              dataSource={telkomselNominal}
                                              dataSourceConfig={airportConfig}
                                              filter={AutoComplete.caseInsensitiveFilter}
                                              onNewRequest={this.handleNominal}
                                              openOnFocus={true}
                                              menuStyle={{maxHeight: 300}}
                                              fullWidth={true}
                                            /> : ""}
                {(this.state.value == 8) ? <AutoComplete
                                              hintText="Input the Nominal"
                                              dataSource={threeNominal}
                                              dataSourceConfig={airportConfig}
                                              filter={AutoComplete.caseInsensitiveFilter}
                                              onNewRequest={this.handleNominal}
                                              openOnFocus={true}
                                              menuStyle={{maxHeight: 300}}
                                              fullWidth={true}
                                            /> : ""}
              </div>
              <div className="col s12 l4">
                <p className="label-form">Destination Number</p>
                <TextField
                  required="required"
                  onChange={this.handleDestinationNumber}
                  hintText="E.g 08176930797"
                  type="number"
                />
              </div>
            </div>
            <div className="row">
              <div className="col m10"></div>
              <div className="col m2">
                <RaisedButton label="Proceed" primary={true} onClick={this.props.onClickFind} icon={ <FontIcon className="material-icons">forward</FontIcon>}/>
              </div>
            </div>

          </div>
        </div>
    )
  }
}
