import React from 'react';
import {inject, observer} from 'mobx-react';
import {DatePicker, MenuItem, SelectField, TextField, Checkbox,} from 'material-ui';
// import '../../Service/style.scss';

@inject('appstate')
@observer
export default class BankInformation extends React.Component {

  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      formData: Object.assign({}, props.defaultValue, {}) || {},
      checked: true
    };
    this.http = props.appstate.http;
    this.text = new RegExp(/^[a-zA-Z\s]*$/);
    this.phone = new RegExp(/^(\([0-9]{4}\)\s*|[0-9]{4}\-|\([0-9]{3}\)\s*|[0-9]{3}\-|[0-9]{12})([0-9]{8}|\s*)$/);
    this.re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  }

  componentDidMount() {
    this.setState({
      formData: Object.assign({}, this.props.defaultValue, {}) || {}
    })
  }


  triggerOnChange() {
    if (this.props.onChangeData && typeof this.props.onChangeData === 'function') {
      this.props.onChangeData(this.state.formData);
    }
  }

  render() {

    const wrapperText = key => ele => React.cloneElement(ele, {
      value: this.state.formData[key],
      onChange: (e, v) => {
        this.setState({
          formData: {
            ...this.state.formData,
            [key]: v,
          }
        }, () => this.triggerOnChange());
      }
    });

    const wrapperSelect = key => ele => React.cloneElement(ele, {
      value: this.state.formData[key],
      onChange: (e, k, v) => {
        this.setState({
          formData: {
            ...this.state.formData,
            [key]: v,
          }
        }, () => this.triggerOnChange());
      }
    });

    const {mode = "create"} = this.props;

    return (
      <div style={{
        paddingTop: 10
      }}>
        <div className="row">
          <div className="col s5 m5 l6">
            <div>
              <p className="label-form font-14 no-margin">On Behalf</p>
              {wrapperText("on_behalf")(
                <TextField
                  fullWidth={true}
                  className={'font-14'}
                  hintText="E.g. Michael"/>
              )}
            </div>
          </div>

          <div className="col s5 m5 l6">
            <div>
              <p className="label-form font-14 no-margin">Bank Name</p>
              {wrapperText("name")(
                <TextField
                  fullWidth={true}
                  className={'font-14'}
                  hintText="E.g. BCA"/>
              )}
            </div>
          </div>
        </div>

        <div className="row">
          <div className="col s12 m12 l12">
            <div>
              <p className="label-form font-14 no-margin">Account Number</p>
              {wrapperText("account_number")(
                <TextField
                  fullWidth={true}
                  className={'font-14'}
                  type="number"
                  hintText="E.g. 123456789"
                />
              )}
            </div>
          </div>
        </div>


      </div>
    );

  }

}
