import React from 'react';
import {observer, inject} from 'mobx-react';
import {Dialog, FlatButton, TextField} from "material-ui";
import {DIALOG} from "../../../../stores/global_ui";
import NumberFormat from 'react-number-format';
import get from 'lodash/get';

@inject('appstate')
@observer
export default class GojekDialog extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ''
    };
    this.props = props;
    this.order = props.appstate.order;
  }

  // componentDidUpdate(prevState, prevProps){
  //   if(this.props !== prevProps){
  //     console.log(this.order.gojekPrice, 'this.order.gojekPrice this.order.gojekPrice')
  //   }
  // }

  render() {
    const actions = [
      <FlatButton
        label="Cancel"
        primary={true}
        onClick={() => {
          this.props.appstate.globalUI.hideDialog(DIALOG.ORDER.GOJEK_DELIVERY);
          this.setState({
            value: ''
          });
        }}
      />,
      <FlatButton
        label="Submit"
        primary={true}
        keyboardFocused={true}
        onClick={() => {
          this.props.appstate.order.bookingGojek();
          this.props.appstate.odoo.createSales(this.props.appstate.order.selectedOrder.id);
          this.props.appstate.globalUI.hideDialog(DIALOG.ORDER.GOJEK_DELIVERY);
          this.setState({
            value: ''
          });
        }}
      />,
    ];

    const actionsError = [
      <FlatButton
        label="Cancel"
        primary={true}
        onClick={() => {
          this.props.appstate.globalUI.hideDialog(DIALOG.ORDER.GOJEK_DELIVERY);
          this.setState({
            value: ''
          });
        }}
      />
    ];

    return (<Dialog
      title="Booking Gojek Delivery"
      actions={(this.order.gojekPrice.serviceable) ? actions : actionsError}
      modal={false}
      open={this.props.appstate.globalUI[DIALOG.ORDER.GOJEK_DELIVERY]}
      onRequestClose={() => {
        this.props.appstate.globalUI.hideDialog(DIALOG.ORDER.GOJEK_DELIVERY);
        this.setState({
          value: ''
        });
      }}
    >
      {(this.order.gojekPrice.serviceable) ? <div>
        <div>
          <div className="center-align"><p style={{ lineHeight: "1.6rem" }}>You will find driver to pick up and send your package</p></div>
          <div className="center-align"><p style={{ lineHeight: "1.6rem", marginTop: "0px", marginBottom: "0px" }}>Total Amount</p></div>
          <div className="center-align"><h4 className="black-text" style={{ lineHeight: "1.6rem", marginTop: "0px", fontSize: "26px", marginBottom: "0px" }}><NumberFormat value={get(this.order.gojekPrice, 'price.total_price',0)} displayType={'text'} thousandSeparator={true} prefix={'IDR '} /></h4></div>


          <div className="row" style={{marginTop: 20}}>
            <div className="col s12">
              <h4 className="center-align" style={{ fontSize: '14px', marginBottom: "8px" }}>To</h4>
              <div style={{
                boxShadow: "none",
                border: "1px solid #d4d4d4",
                backgroundColor: "#f9f9f9",
                padding: "10px 10px 10px 20px",
                marginTop: 0,
                marginBottom: 0,
                textAlign: 'center'
              }} className="card-panel">
                <p className="black-text" style={{ lineHeight: '1.0rem', fontSize: 11 }}>
                  Shipment Method: {get(this.order.gojekPrice, 'shipment_method','-')}
                </p>
                <p className="black-text" style={{ lineHeight: '1.0rem', fontSize: 11 }}>
                  Estimate time: {get(this.order.gojekPrice, 'shipment_method_description','-')}
                </p>
                <p className="black-text" style={{ lineHeight: '1.0rem', fontSize: 11 }}>
                  Distance : {get(this.order.gojekPrice, 'distance',0)} KM
                </p>
              </div>
            </div>

          </div>




        </div>
      </div> : <div>
        <div className="center-align"><p style={{ lineHeight: "1.6rem" }}>GO-SEND Service are <strong>Unavailable</strong> because</p></div>
        {/*<div className="center-align"><p style={{ lineHeight: "1.6rem", marginTop: "0px", marginBottom: "0px" }}>Total Amount</p></div>*/}
        <div className="center-align"><h4 className="black-text" style={{ lineHeight: "1.6rem", marginTop: "0px", fontSize: "26px", marginBottom: "0px" }}>
          {get(this.order.gojekPrice, 'shipment_method_description','-')}
        </h4></div>
      </div>}
    </Dialog>);
  }
}