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 CustomerDetailForm extends React.Component {

  constructor(props) {
    super(props);
    this.props = props;
    this.customer = props.appstate.customer;
    this.state = {
        gender : 0,
        name: '',
        email: '',
        date_of_birth: '',
        address: '',
        occupation: '',
        passport_number: '',
        marital:0,
        id_type : null,
        error_email : '',
        ...props.defaultValue
    };
    this.http = props.appstate.http;
    this.authStore = props.appstate.auth;
  }

  handleChangeName = (event) =>{
    this.customer.CustomerData.name = event.target.value;
  };

  handleChangeEmail = (event) =>{
    var 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,}))$/;
    if(!re.test(event.target.value)){      
      this.customer.CustomerData.error_email ='Email format not valid';
      this.setState({
        error_email :'Email format not valid' 
      })
    }
    else{
      this.customer.CustomerData.error_email ='';
      this.setState({
        error_email :'' 
      })
    }
    this.customer.CustomerData.email = event.target.value;
  };

  handleChangeDate = (event, value) =>{
    this.customer.CustomerData.date_of_birth = value;
  };

  handleChangeGender = (event, index, value) =>{
    this.setState({gender: value});
    this.customer.CustomerData.gender = value;
  };

  handleChangePassport = (event) =>{
    this.customer.CustomerData.passport_number = event.target.value;
  };

  handleChangeOccupation = (event) =>{
    this.customer.CustomerData.occupation = event.target.value;
  };

  handleChangeAddress = (event) =>{
    this.customer.CustomerData.address = event.target.value;
  };

  handleChangeBirthPlace = (event) =>{
    this.customer.CustomerData.birth_place = event.target.value;
  };

  handleChangePhone = (event) =>{
    this.customer.CustomerData.phone = event.target.value;
  };

  handleChangeHandphone = (event) =>{
    this.customer.CustomerData.handphone = event.target.value;
  };

  handleChangeMarital = (event, index, value) =>{
    this.setState({marital:value})
    this.customer.CustomerData.martial_status = value;
  };

  handleChangeTaxNumber = (event) =>{
    this.customer.CustomerData.id_tax_number = event.target.value;
  };

  handleChangeType = (event,index,value) =>{
    this.setState({
      id_type : value
    })
    this.customer.CustomerData.id_type = value;
  };

  handleChangeNumber= (event) =>{
    this.customer.CustomerData.id_number = event.target.value;
  };

  render() {

  	const gender = [
  	  <MenuItem key={1} value={"Man"} primaryText="Man"/>,
  	  <MenuItem key={2} value={"Woman"} primaryText="Woman"/>,
    ];
      
    const marital_status = [
    <MenuItem key={1} value={"Married"} primaryText="Married"/>,
    <MenuItem key={2} value={"Single"} primaryText="Single"/>,
    <MenuItem key={2} value={"Divorced"} primaryText="Divorced"/>,
    <MenuItem key={2} value={"Widowed"} primaryText="Widowed"/>,
    ];

    const id_type = [
      <MenuItem key={1} value={"Resident ID Card"} primaryText="Resident ID Card"/>,
      <MenuItem key={2} value={"Driving Lisence"} primaryText="Driving Lisence"/>,
    ];

    return(
      <div style={{
        paddingTop: 10
      }}>
        <div className="row">
          <div className="col s12 m6 l6">
            <div>
              <p className="label-form">Name</p>
              <TextField
                fullWidth={true}
                onChange={this.handleChangeName}
                hintText="E.g. Michael Jordan"
              />
            </div>
          </div>

          <div className="col s12 m6 l6">
            <div>
              <p className="label-form">Email</p>
              <TextField
                fullWidth={true}
                onChange={this.handleChangeEmail}
                type="email"
                hintText="E.g. Michael.Jordan@domain.com"
                errorText={this.state.error_email}
              />
            </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"
                onChange={this.handleChangeDate}
                hintText="2017-08-17"
                openToYearSelection={true}
              />
            </div>
          </div>
          <div className="col s12 m6 l6">
            <div>
              <p className="label-form">Gender</p>
              <SelectField
                value={this.state.gender}
                onChange={this.handleChangeGender}
                fullWidth={true}
              >
                {gender}
              </SelectField>
            </div>
          </div>
        </div>

        <div className="row">
          <div className="col s12 m6 l6">
            <div>
              <p className="label-form">Passport Number</p>
              <TextField
                hintText="E.g. X000000"
                onChange={this.handleChangePassport}
                fullWidth={true}
              />
            </div>
          </div>
          <div className="col s12 m6 l6">
            <div>
              <p className="label-form">Occupation</p>
              <TextField
                hintText="E.g. PNS"
                onChange={this.handleChangeOccupation}
                fullWidth={true}
              />
            </div>
          </div>
        </div>

        <div className="row">
          <div className="col s12 m6 l6">
            <div>
              <p className="label-form">Address</p>
              <TextField
                hintText="E.g. Jl. Kemanggisan No.25 Jakarta Barat"
                multiLine={true}
                fullWidth={true}
                rows={1}
                rowsMax={4}
                onChange={this.handleChangeAddress}
              />
            </div>
          </div>
          <div className="col s12 m6 l6">
            <div>
              <p className="label-form">Birth Place</p>
              <TextField
                hintText="E.g. Bandung"
                fullWidth={true}
                onChange={this.handleChangeBirthPlace}
              />
            </div>
          </div>
        </div>

        <div className="row">
          <div className="col s12 m6 l6">
            <div>
              <p className="label-form">Phone</p>
              <TextField
                hintText="E.g. 88954361"
                onChange={this.handleChangePhone}
                fullWidth={true}
              />
            </div>
          </div>
          <div className="col s12 m6 l6">
            <div>
              <p className="label-form">Handphone</p>
              <TextField
                hintText="E.g. 0899976487"
                onChange={this.handleChangeHandphone}
                fullWidth={true}
              />
            </div>
          </div>
        </div>

        <div className="row">
          <div className="col s12 m6 l6">
            <div>
              <p className="label-form">Marital Status</p>
              <SelectField
                value={this.state.marital}
                onChange={this.handleChangeMarital}
                fullWidth={true}
              >
                {marital_status}
              </SelectField>
            </div>
          </div>
          <div className="col s12 m6 l6">
            <div>
              <p className="label-form">ID Tax Number</p>
              <TextField
                hintText="E.g. 00000000000000000"
                onChange={this.handleChangeTaxNumber}
                fullWidth={true}
              />
            </div>
          </div>
        </div>

        <div className="row">
          <div className="col s12 m6 l6">
            <div>
              <p className="label-form">ID Type</p>
              <SelectField
                value={this.state.id_type}
                onChange={this.handleChangeType}
                fullWidth={true}
              >
                {id_type}
              </SelectField>
            </div>
          </div>
          <div className="col s12 m6 l6">
            <div>
              <p className="label-form">ID Number</p>
              <TextField
                hintText="E.g. 00000000000000"
                onChange={this.handleChangeNumber}
                fullWidth={true}
              />
            </div>
          </div>
        </div>


      </div>
    );

  }

}
