import React from 'react';
import {observer, inject} from 'mobx-react';
import {
  Dialog, FlatButton, RaisedButton,
  Step,
  StepLabel,
  Stepper,
  IconButton
} from "material-ui";
import {DIALOG} from "../../../../stores/global_ui";
import schema from 'async-validator'
import AddressDetail from './Address';

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

  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      stepIndex: 0,
      finished: false,
      openedDialog: false,
      openMaps : false,
      confirmationDialog : false,
      formData: {},
      errorMessage: '',
      default:{
        is_shipment : true,
        is_default : true
      }
    };
    this.defaultState = Object.assign({}, this.state);
    this.globalUI = props.appstate.globalUI;
    this.userAddress = props.appstate.userAddress;
    this.userData = props.appstate.userData;
  }

  componentDidMount(){
    this.setState({
      stepIndex:0
    });
  }

  componentWillReceiveProps(nextProps){
    this.setState({stepIndex : 0,formData : nextProps.defaultValue, default : nextProps.defaultValue});
  }

  getStepContent(stepIndex) {

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

    switch (stepIndex) {
      case 0:
        return (
          <AddressDetail
            mode={mode}
            defaultValue={defaultValue}
            onChangeData={formData => this.setState({formData})}/>
        );
    }
  }

  handleOpen = () => {
    this.setState({confirmationDialog: true})
  };

  handleNext = () => {
    const {stepIndex} = this.state;
    if (stepIndex === 0) {

      const rules = {
        name: [
          {
            required: true,
            message: "Please fill address name"
          }
        ],
        address: [
          {
            required: true,
            message: 'Please fill address',
          }
        ],
        province_id: [
          {
            required: true,
            message: 'Please select province',
          }
        ],
        city_id: [
          {
            required: true,
            message: 'Please select city',
          }
        ],
        phone_number: [
          {
            required: true,
            message: 'Please fill phone number',
          }
        ],
        postal_code: [
          {
            required: true,
            message: 'Please fill postal code',
          }
        ],
      };

      const validator = new schema(rules);
      console.log(this.state.formData);
      validator.validate(this.state.formData, (errs, f) => {
        console.log(errs);

        if (errs) {
          this.globalUI.showNotification("Something's Wrong", errs[0].message);
        } else {
          // let regex=/^(\([0-9]{4}\)\s*|[0-9]{4}\-|\([0-9]{3}\)\s*|[0-9]{3}\-|[0-9]{11,15})([0-9]{8}|\s*)$/;
          let regex=/^(^\+62\s?|^0)(\d{3,4}-?){2}\d{3,4}$/g;
          if(this.state.formData.phone_number.match(regex)) {
            this.setState({
              stepIndex: stepIndex + 1,
            });
          }
          else{
            this.globalUI.showNotification("Phone number should be correct !");
          }
        }
      });
    }
  }

  handlePrev = () => {
    const {stepIndex} = this.state;
    if (stepIndex > 0) {
      this.setState({stepIndex: stepIndex - 1});
    }
  }

  save = () => {
    this.globalUI.hideDialog(DIALOG.ADDRESS.CREATE);
    this.globalUI.showDialogLoading();
    const {mode="create", defaultValue={}} = this.props;
    var data = this.state.formData;
    data.lat = this.userAddress.geoData.lat;
    data.long = this.userAddress.geoData.lng;
    data.geoaddress = this.userAddress.geoData.geoaddress;

    if(this.userData.role == 'store') {
      if (mode === "create") {

        this.userAddress.addAddress(data).then(res=>{
          this.globalUI.openSnackbar('Successfully add new Address');
        }).catch((err)=> {
          console.log(err);
          this.globalUI.closeLoading();
        })
      } else if (mode === "update") {
        this.userAddress.updateAddress(data).then(res=>{
          this.globalUI.openSnackbar('Successfully update Address');
        }).catch(err=>{
          console.log(err);
          this.globalUI.openSnackbar('Something Error');
        })

      }
    }
    else if(this.userData.role == 'administrator'){
      if (mode === "create") {
        this.userAddress.addAddressAdmin(this.props.id,data).then(res=>{
          this.globalUI.openSnackbar('Successfully add new Address');
        }).catch((err)=> {
          console.log(err);
          this.globalUI.closeLoading();
        })
      } else if (mode === "update") {
        this.userAddress.updateAddressAdmin(this.props.id,data).then(res=>{
          this.globalUI.openSnackbar('Successfully update Address');
        }).catch(err=>{
          console.log(err);
          this.globalUI.openSnackbar('Something Error');
        })

      }
    }

  }

  handleClose = () => {
    this.setState({confirmationDialog: false,formData : {}})
  };


  continueButton() {
    if (this.state.stepIndex === 1) {
      return (
        <RaisedButton
          label="Finish"
          primary={true}
          onClick={this.save}
        />
      );
    } else {
      return (
        <RaisedButton
          label="Next"
          primary={true}
          onClick={this.handleNext}
        />
      );
    }
  }

  openWarningDialog = ()=>{
    // this.userAddress.deletedAddress(data.id).then(res=>{
    //   this.globalUI.openSnackbar('Delete Success');
    // })
    // console.log(data);
    this.setState(
      {
      confirmationDialog :true,errorMessage:
          'Are you sure want to delete this address?'}
          )
  ;};

  deletedAddress = (data)=>{
    this.setState({confirmationDialog:false});
    this.globalUI.hideDialog(DIALOG.ADDRESS.CREATE);
    if(this.userData.role == 'store') {
      this.userAddress.deletedAddress(data.id).then(res=>{
        this.globalUI.openSnackbar('Delete success')
      });
    }
    else if(this.userData.role == 'administrator'){
      this.userAddress.deletedAddressAdmin(this.props.id,data.id).then(res=>{
        this.globalUI.openSnackbar('Delete success')
      });
    }
  };

  render() {

    const {finished, stepIndex} = this.state;
    const {mode="create", defaultValue={}} = this.props;

    const actions = [
      <RaisedButton
        label="No"
        primary={false}
        style={{marginRight: 10}}
        onClick={this.handleClose}
      />,
      <RaisedButton
        label="Yes"
        primary={true}
        style={{marginRight: 10}}
        onClick={()=>this.deletedAddress(this.state.formData)}
      />
    ];

    const title =
      <div>
        <h4 style={{
          fontSize: 26,
          marginBottom: 0,
          marginTop: 0,
          fontWeight: 500,
          color: "black"
        }}>{(mode === "create") ? "Add New" : "Update"} Address</h4>
      </div>
    ;

    return (
      <div>
        <Dialog
          title={<div>
            <div>{title}</div>
            {/*<div style={{padding: "0px 14px 0 0", marginTop: 10}}>*/}
              {/*<Stepper activeStep={stepIndex}>*/}
                {/*<Step>*/}
                  {/*<StepLabel style={{padding: "0px 14px 0px 0px", height: 52}}>Bank Account</StepLabel>*/}
                {/*</Step>*/}
                {/*/!* <Step>*/}
                  {/*<StepLabel style={{padding: "0px 0px 0px 14px", height: 52}}>Identification & Passport</StepLabel>*/}
                {/*</Step> *!/*/}
              {/*</Stepper>*/}
            {/*</div>*/}
          </div>}
          titleStyle={{paddingBottom: 10}}
          modal={false}
          actions={<div style={{marginTop: 12}}>
            <FlatButton
              label={(stepIndex === 0) ? "Cancel" : "Back"}
              style={{marginRight: 10}}
              primary={true}
              onClick={() => (stepIndex === 0) ? this.globalUI.hideDialog(DIALOG.ADDRESS.CREATE) : this.handlePrev()}
            />
            {this.continueButton()}
            {(this.state.default.is_shipment != true && this.state.default.is_default != true) ?
              <FlatButton
                label={"Delete"}
                style={{marginRight: 10}}
                primary={true}
                onClick={() => this.openWarningDialog()}
              /> : ''}
          </div>}
          autoScrollBodyContent={true}
          repositionOnUpdate={true}
          open={this.globalUI[DIALOG.ADDRESS.CREATE]}
          onRequestClose={this.handleClose}
          paperClassName={'radius6'}
          contentClassName={'marketplace-dialog-small'}
        >
          <div style={{marginTop: 20}}>
            {this.getStepContent(stepIndex)}
          </div>
        </Dialog>

        <Dialog
          title="Warning"
          actions={actions}
          modal={false}
          autoScrollBodyContent={false}
          contentStyle={{width: 350}}
          open={this.state.confirmationDialog}
          onRequestClose={() => this.handleClose()}
        >
          {this.state.errorMessage}
        </Dialog>
      </div>
    )
  }
}