import React from 'react';
import {observer, inject} from 'mobx-react';
import {DIALOG} from "../../../../stores/global_ui";
import NumberFormat from 'react-number-format';
@inject('appstate')
@observer
export default class OrderedOrder extends React.Component {

  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      amount: 0,
      isLoading: true
    };
    this.defaultState = Object.assign({}, this.state);

    this.http = props.appstate.http;
    this.order = props.appstate.order;
    this.globalUI = props.appstate.globalUI;
  }

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

  componentDidMount() {

    const {parent} = this.props;

    this.setState({isLoading: true});

    this.http.post("payments/initial_payment_preview", {
      package_transaction_id: this.order.selectedOrder.id
    })
    .then(res => {

      parent.setState({
        handleNext: () => this.makePayment()
      });

      this.setState({
        isLoading: false,
        amount: res.amount
      })
    });
  }

  render() {
    return (
      <div>
        You'll pay <NumberFormat value={this.state.amount} displayType={'text'} thousandSeparator={true} prefix={'IDR '}/> as DownPayment
      </div>
    )
  }
}
