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";
import SelectPaymentType from "./SelectPaymentType";

import BookedOrder from './BookedOrder';
import OrderedOrder from './OrderedOrder';
import CompleteOrder from './CompleteOrder';

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

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

  componentDidMount() {

  }

  getContent() {
    switch (this.order.selectedOrder.status) {
      case "ordered":
        return <OrderedOrder parent={this} />;
      case "booked":
        return <BookedOrder parent={this} />;
      case "payment_complete":
        return <CompleteOrder parent={this} />;
      default:
        return <div/>;
    }
  }

  render() {

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

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

    return (
      <Dialog
        title="Make a Payment"
        modal={false}
        actions={(this.order.selectedOrder.status === 'payment_complete') ? actionsCancelOnly : actions}
        open={this.globalUI[DIALOG.ORDER.MAKE_PAYMENT]}
        onRequestClose={this.handleClose}>
        {this.getContent()}
      </Dialog>
    )
  }
}