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 CustomerDetailForm from './CustomerDetailForm';
import IdentificationPassport from './IdentificationPassport';
import ArrowForwardIcon from 'material-ui/svg-icons/navigation/arrow-forward';
import NavigationArrowBack from 'material-ui/svg-icons/navigation/arrow-back';

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

  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      stepIndex: 0,
      formData: {},
      finished: false,
      openedDialog: false
    };
    this.defaultState = Object.assign({}, this.state);
    this.globalUI = props.appstate.globalUI;
    this.customer = props.appstate.customer;
  }

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

  onChangeForm(formData) {
    this.setState({formData});
  }

  getStepContent(stepIndex) {
    switch (stepIndex) {
      case 0:
        return <CustomerDetailForm/>;

      case 1:
        return <IdentificationPassport/>;
    }
  }

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

  handleNext = () => {
    const {stepIndex} = this.state;
    if (stepIndex === 0) {
      if (this.customer.CustomerData.name === '' ||
        this.customer.CustomerData.date_of_birth === '' ||
        this.customer.CustomerData.email === '' ||
        this.customer.CustomerData.address === '' ||
        this.customer.CustomerData.occupation === '' ||
        this.customer.CustomerData.gender === '' ||
        this.customer.CustomerData.birth_place === '' ||
        this.customer.CustomerData.phone === '' ||
        this.customer.CustomerData.handphone === '' ||
        this.customer.CustomerData.martial_status === '' ||
        this.customer.CustomerData.id_tax_number === '' ||
        this.customer.CustomerData.id_type === '' ||
        this.customer.CustomerData.id_number === '' ||
        this.customer.CustomerData.passport_number === '' || this.customer.CustomerData.error_email != '') {
        this.handleOpen();
      } else {
        this.setState({
          stepIndex: stepIndex + 1,
        });
      }
    }
  }

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

  handleClose = () => {
    this.setState({openedDialog: false})
  };

  save = () => {
    this.customer.create()
      .then(res => {
        this.globalUI.hideDialog(DIALOG.CUSTOMER.CREATE);
        this.customer.getAll();
      })
  }

  handlePost = () => {
    this.agentStore.post().then(res => {
      this.props.history.push(LINKS.SETTING);
      this.globalUI.openSnackbar("Successfull Added Agent");
    });
  };

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

  render() {

    const {finished, stepIndex} = this.state;

    // const actions = [
    //   <FlatButton
    //     label="Cancel"
    //     primary={true}
    //     style={{marginRight: 10}}
    //     onClick={() => this.globalUI.hideDialog(DIALOG.CUSTOMER.CREATE)}
    //   />,
    //   <RaisedButton
    //     label="Submit"
    //     primary={true}
    //     onClick={() => this.save()}
    //   />,
    // ];


    const actions = [
      <RaisedButton
        label="OK"
        primary={true}
        style={{marginRight: 10}}
        onClick={this.handleClose}
      />,
    ]

    const title =
      <div>
        <h4 style={{
          fontSize: 26,
          marginBottom: 0,
          marginTop: 0,
          fontWeight: 500,
          color: "black"
        }}>Add New Customer</h4>
        {/*<IconButton*/}
        {/*iconClassName="material-icons"*/}
        {/*tooltip="Close"*/}
        {/*iconStyle={{*/}
        {/*color: 'grey',*/}
        {/*}}*/}
        {/*style={{*/}
        {/*position: 'absolute',*/}
        {/*right: 0,*/}
        {/*top: 0*/}
        {/*}}*/}
        {/*onClick={() => this.globalUI.hideDialog(DIALOG.CUSTOMER.CREATE)}*/}
        {/*>*/}
        {/*close*/}
        {/*</IconButton>*/}
      </div>
    ;

    return (
      <div>
        {/*<Dialog*/}
        {/*title="Add New Costumer"*/}
        {/*modal={false}*/}
        {/*autoScrollBodyContent={true}*/}
        {/*actions={actions}*/}
        {/*open={this.globalUI[DIALOG.CUSTOMER.CREATE]}*/}
        {/*onRequestClose={this.handleClose}>*/}
        {/*<CustomerForm onChangeData={this.onChangeForm.bind(this)} />*/}
        {/*</Dialog>*/}
        <Dialog
          title={<div>
            <div>{title}</div>
            <div style={{padding: "0px 14px 0px 0px", marginTop: 10}}>
              <Stepper activeStep={stepIndex}>
                <Step>
                  <StepLabel style={{padding: "0px 14px 0px 0px", height: 52}}>Customer Data</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.CUSTOMER.CREATE) : this.handlePrev()}
            />
            {this.continueButton()}
          </div>}
          autoScrollBodyContent={true}
          repositionOnUpdate={true}
          open={this.globalUI[DIALOG.CUSTOMER.CREATE]}
          onRequestClose={this.handleClose}>
          <div style={{marginTop: 20}}>
            {this.getStepContent(stepIndex)}
          </div>
        </Dialog>
        <Dialog
          title="Warning"
          actions={actions}
          modal={false}
          autoScrollBodyContent={false}
          contentStyle={{width: 350}}
          open={this.state.openedDialog}
          onRequestClose={() => this.handleClose()}
        >
          Please Fill the form correctly
        </Dialog>
      </div>
    )
  }
}
