import React from 'react';
import {observer, inject} from 'mobx-react';
import CustomerForm from './../../Customers/CustomerDialog/CustomerForm';
import {DIALOG} from "../../../stores/global_ui";
import {Dialog, FlatButton, RaisedButton} from "material-ui";

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

  constructor(props) {
    super(props);
    this.props = props;
    this.state = {};
    this.defaultState = Object.assign({}, this.state);

    this.customer = props.appstate.customer;
    this.globalUI = props.appstate.globalUI;
  }

  componentDidMount() {

  }

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

  save() {
    this.customer.update(this.customer.selectedCustomer.id, this.state.formData)
      .then(res => {
        this.globalUI.hideDialog(DIALOG.CUSTOMER.UPDATE);
        this.customer.getAll();
        this.customer.getDetail(this.customer.selectedCustomer.id);
      })
  }

  render() {

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

    return (
      <Dialog
        title="Update Costumer"
        modal={false}
        actions={actions}
        open={this.globalUI[DIALOG.CUSTOMER.UPDATE]}
        onRequestClose={this.handleClose}>
        <CustomerForm defaultValue={this.customer.selectedCustomer} onChangeData={this.onChangeForm.bind(this)} />
      </Dialog>    )
  }
}
