import React from 'react';
import {inject, observer} from 'mobx-react';
import {AutoComplete, 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: '',
    };
    this.http = props.appstate.http;
    this.authStore = props.appstate.auth;
    this.customer = props.appstate.customer;
    this.packageService = props.appstate.packageServiceStore;
    this.order = props.appstate.order;
  }

  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);
    }
  }

  componentDidMount() {
    this.customer.getAll();
  }

  handleChange = (event,taget,value)=>{
    console.log(value);
  }

  render() {

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

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

          <div className="col s12 m12 l12">
            <div>
              <p className="label-form">Customer</p>
              {wrapperSelect("customer_id")(
                <SelectField>
                  {this.customer.customers.map(c => {
                    return <MenuItem key={c.id} value={c.id} primaryText={c.name} />
                  })}
                </SelectField>
              )}
            </div>
          </div>

        </div>

      </div>
    );

  }

}
