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

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

  constructor(props) {
    super(props);
    this.props = props;
    this.customer = props.appstate.customer;
    this.state = {
      formData: Object.assign({
        geoaddress : ''
      }, props.defaultValue) || {},
      openMaps : false,
    };
    this.http = props.appstate.http;
    this.globalUI = props.appstate.globalUI;
    this.userAddress = props.appstate.userAddress;
    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*)$/);
  }

  componentWillMount(){
    this.userAddress.setGeoData({
      lat : this.props.defaultValue.lat,
      lng : this.props.defaultValue.long,
      geoaddress : this.props.defaultValue.geoaddress
    })
  }

  componentDidMount() {
    // this.globalUI.showNotification("Something's Wrong", 'errs[0].message');
    this.globalUI.openLoading();
    this.userAddress.getProvinces().then(res=>{
      this.globalUI.closeLoading();
    })
    if(this.props.mode === 'update'){
      this.userAddress.getCities(this.props.defaultValue.province_id);
    }
  }

  closeMap = ()=>{
    this.setState({
      openMaps : !this.state.openMaps
    });
  };



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


  render() {
    // const roles = this.roleStore.roles.map(r => {
    //   return <MenuItem key={r.id} value={r.id} primaryText={r.name} />
    // });

    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 wrapperImage = key => ele => React.cloneElement(ele, {
      src: this.http.appendImagePath(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) => {
        if(key == 'province_id'){
          this.userAddress.resetCities();
          this.userAddress.getCities(v);
        }
        this.setState({
          formData: {
            ...this.state.formData,
            [key]: v,
          }
        }, () => this.triggerOnChange());
      }
    });

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

    const province = this.userAddress.provinces.map(r => {
      return <MenuItem key={r.id} value={r.id} primaryText={r.name} />
    });

    const cities = this.userAddress.cities.map(r => {
      return <MenuItem key={r.id} value={r.id} primaryText={r.type+" "+r.name} />
    });

    return(
      <div>
        <div className="row">
          <div className="col s6">
            <p className="label-form font-14" style={{marginBottom: -4}}>Name</p>
            {wrapperText("name")(
              <TextField
                fullWidth={true}
                className={'font-14'}
                hintText="E.g. Ridwan Abadi"/>
            )}
          </div>
          <div className="col s6">
            <p className="label-form font-14" style={{marginBottom: -4}}>Sender Name</p>
            {wrapperText("receiver_name")(
              <TextField
                fullWidth={true}
                className={'font-14'}
                hintText="E.g. Ridwan Abadi"/>
            )}
          </div>
        </div>
        <div className="row">
          <div className="col s12">
            <p className="label-form font-14" style={{marginBottom: -4}}>Phone Number</p>
            {wrapperText("phone_number")(
              <TextField
                fullWidth={true}
                className={'font-14'}
                hintText="E.g. 08883339992"
                type="number"
              />
            )}
          </div>
        </div>
        <div className="row">
          <div className="col s6">
            <p className="label-form font-14" style={{marginBottom: -4}}>Province</p>
            {wrapperSelect("province_id")(
              <SelectField
                fullWidth={true}
                className={'font-14'}
              >
                {province}
              </SelectField>
            )}
          </div>
          <div className="col s6">
            <p className="label-form font-14" style={{marginBottom: -4}}>Cities</p>
            {wrapperSelect("city_id")(
              <SelectField
                fullWidth={true}
                className={'font-14'}
              >
                {cities}
              </SelectField>
            )}
          </div>
        </div>
        <div className="row">
          <div className="col s12">
            {/* <p className="label-form" style={{marginBottom: -4}}>Phone Number</p> */}
            {wrapperText("address")(
              <TextField
                fullWidth={true}
                className={'font-14'}
                hintText="Building name, Street name, etc"
              />
            )}
          </div>
        </div>
        <div className="row">
          <div className="col s12">
            {wrapperText("postal_code")(
              <TextField
                fullWidth={true}
                className={'font-14'}
                type="number"
                hintText="Post code"
              />
            )}
          </div>
        </div>
        <div className="row">
          <div className="col s12">
            <p className="label-form font-14" style={{marginBottom: -4}}>Pin Location (Optional)</p>
            <div className="pin-picker">
              <div className="row">
                <div className="col s1 icon-pin">
                </div>
                <div className="col s7 text-pin">
                  <p>{(this.userAddress.geoData.geoaddress == "" || this.userAddress.geoData.geoaddress == null) ? 'Pin your location on map so you can use services such as Go Send or another delivery services' : this.userAddress.geoData.geoaddress}</p>
                </div>
                <div className="col s4 text-pin">
                  <RaisedButton label="Pick Location" primary={true} fullWidth={true} onClick={this.closeMap}/>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="row">
          <div className="col s6">
            {wrapperSwitch("is_default")(
              <Checkbox
                label="Set as my default address"
                labelStyle={{fontSize:14}}
                style={{marginTop: 20}}
              />
            )}
          </div>
          <div className="col s6">
            {wrapperSwitch("is_shipment")(
              <Checkbox
                label="Set as store address"
                labelStyle={{fontSize:14}}
                style={{marginTop: 20}}
              />
            )}
          </div>
        </div>
        <MapDialog openMaps={this.state.openMaps} onClose={this.closeMap} mode={this.props.mode}/>
      </div>
    );

  }

}
