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

// import '../../Service/style.scss';

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

  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
    	gender : 1,
      name: '',
      email: '',
      date_of_birth: '',
      address: '',
      occupation: '',
      passport_number: '',
      ...props.defaultValue
    };
    this.http = props.appstate.http;
    this.authStore = props.appstate.auth;
  }

  handleAgents = (station) =>{
    this.setState({
    	agent : station.value
    });
  };

  handleGender = (station) =>{
    this.setState({
    	gender : station.value
    });
  };

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

  render() {

  	const gender = [
  	  <MenuItem key={0} value={0} primaryText="Choose Gender"/>,
  	  <MenuItem key={1} value={"M"} primaryText="Men"/>,
  	  <MenuItem key={2} value={"W"} primaryText="Women"/>,
  	];

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

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

    return(
      <div style={{
        paddingTop: 10
      }}>
        <div className="row">

          <div className="col s12 m6 l6">
            <div>
              <p className="label-form">Your Name</p>
              {wrapperText("name")(
                <TextField
                  fullWidth={true}
                  hintText="E.g. Michael Jordan"
                />
              )}
            </div>
          </div>

          <div className="col s12 m6 l6">
            <div>
              <p className="label-form">Your Email</p>
              {wrapperText("email")(
                <TextField
                  fullWidth={true}
                  hintText="E.g. Michael.Jordan@domain.com"
                />
              )}
            </div>
          </div>

        </div>
        <div className="row">

          <div className="col s12 m6 l6">
            <div>
              <p className="label-form">Date of Birth</p>
              <DatePicker
                fullWidth={true}
                mode="landscape"
                hintText="2017-08-17"
                openToYearSelection={true}
                onChange={(e, v) => {
                  this.setState({
                    date_of_birth: v
                  }, () => this.triggerOnChange());
                }}
              />
            </div>
          </div>
          <div className="col s12 m6 l6">
            <div>
              <p className="label-form">Gender</p>
              {wrapperSelect("gender")(
                <SelectField
                  value={this.state.gender}
                  onChange={this.handleGender}
                  fullWidth={true}
                >
                  {gender}
                </SelectField>
              )}
            </div>
          </div>

        </div>
        <div className="row">

          <div className="col s12 m6 l6">
            <div>
              <p className="label-form">Passport Number</p>
              {wrapperText("passport_number")(
                <TextField
                  hintText="E.g. X000000"
                />
              )}
            </div>
          </div>

          <div className="col s12 m6 l6">
            <div>
              <p className="label-form">Occupation</p>
              {wrapperText("occupation")(
                <TextField
                  hintText="E.g. "
                />
              )}
            </div>
          </div>

        </div>
        <div className="row">
          <div className="col s12 m12 l12">
            <div>
              <p className="label-form">Address</p>
              {wrapperText("address")(
                <TextField
                  hintText="E.g. Jl. Kemanggisan No.25 Jakarta Barat"
                  multiLine={true}
                  fullWidth={true}
                  rows={1}
                  rowsMax={4}
                />
              )}
            </div>
          </div>

        </div>

      </div>
    );

  }

}
