import React from 'react';
import {observer, inject} from 'mobx-react';
import {MenuItem, RaisedButton, SelectField, TextField} from "material-ui";

@inject('appstate')
@observer
export default class DepositFormComponent extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      form: {
        payment_proof: '',
        amount: 0,
        bank_account_number: '',
        bank_name: ''
      }
    };
    this.defaultState = Object.assign({}, this.state);
    this.http = props.appstate.http;
    this.bankStore = props.appstate.bank;
    this.withdrawStore = props.appstate.withdraw;
  }

  componentDidMount() {
    //console.log('DepositFormComponent loaded!')

  }

  handleBank = (event, index, value) => {
    this.withdrawStore.bank = value;
    this.withdrawStore.data.destination_user_bank_id = value.id;
    this.withdrawStore.data.bank_name = this.withdrawStore.bank.name;
    this.withdrawStore.data.bank_account_number = this.withdrawStore.bank.account_number;
  };

  handleAmount = (event) => {
    this.withdrawStore.data.amount = event.target.value;
  };

  render() {

    return (
      <div>
        <div className="row">
          <div className="col s12 m6 l6">
            <SelectField
              floatingLabelText={"Bank"}
              onChange={this.handleBank}
              value={this.withdrawStore.bank}
              fullWidth={true}
            >
              {this.bankStore.list.map(item => {
                return (<MenuItem key={item.id} value={item} primaryText={`Bank ${item.name}`}/>)
              })}
            </SelectField>
          </div>
          <div className="col s12 m6 l6">
            <TextField disabled={true} fullWidth={true} value={this.withdrawStore.data.bank_account_number}
                       underlineDisabledStyle={{borderBottom: '1px dotted rgba(0, 0, 0, 0.3)'}}
                       floatingLabelText={"Bank Account Number"}/>
          </div>
        </div>
        <div className="row">
          <div className="col s12">
            <TextField type={"number"} fullWidth={true} defaultValue={this.withdrawStore.data.amount} min="0"
                       onChange={this.handleAmount} floatingLabelText={"Amount (IDR)"}/>
          </div>
        </div>
      </div>
    )
  }
}
