import React from 'react';
import {observer, inject} from 'mobx-react';
import {Dialog, FlatButton, Stepper, Step, StepLabel, Snackbar} from "material-ui";
import {DIALOG} from "../../../../stores/global_ui";

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

  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      currentStep: 0,
      prevText: "Cancel",
      nextText: "Submit"
    };
    this.defaultState = Object.assign({}, this.state);
    this.globalUI = props.appstate.globalUI;
    this.order = props.appstate.order;
    this.http = props.appstate.http;
  }

  componentDidMount() {

  }

  makePayment() {
    return this.http.post("payments/cancel", {
      package_transaction_id: this.order.selectedOrder.id
    })
      .then(res => {
        this.order.getDetail(this.order.selectedOrder.id);
        this.globalUI.hideDialog(DIALOG.ORDER.CANCEL_PAYMENT);
      })
  }

  handleNext = () => this.makePayment();
  handleClose = () => this.globalUI.hideDialog(DIALOG.ORDER.CANCEL_PAYMENT);

  render() {

    const actions = [
      <FlatButton
        label={this.state.prevText}
        primary={true}
        onClick={() => this.globalUI.hideDialog(DIALOG.ORDER.CANCEL_PAYMENT)}
      />,
      <FlatButton
        label={this.state.nextText}
        primary={true}
        onClick={() => this.handleNext().catch(err => this.props.appstate.globalUI.openSnackbar(err.message))}
      />,
    ];

    const actionsCancelOnly = [
      <FlatButton
        label={"Ok"}
        primary={true}
        onClick={() => this.globalUI.hideDialog(DIALOG.ORDER.CANCEL_PAYMENT)}
      />,
    ]

    return (
      <Dialog
        title="Cancel a Payment"
        modal={false}
        actions={actions}
        open={this.globalUI[DIALOG.ORDER.CANCEL_PAYMENT]}
        onRequestClose={this.handleClose}>
        Are you sure want to cancel this book?
      </Dialog>
    )
  }
}
