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

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

  componentWillReceiveProps() {

  }

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

    return (<Dialog
      title="Input shipping code"
      actions={actions}
      modal={false}
      open={this.props.appstate.globalUI[DIALOG.ORDER.INPUT_SHIPPING_CODE]}
      onRequestClose={() => {
        this.props.appstate.globalUI.hideDialog(DIALOG.ORDER.INPUT_SHIPPING_CODE);
        this.setState({
          value: ''
        });
      }}
    >
      <TextField
        hintText="Shipping Code"
        value={this.state.value}
        onChange={(event) => this.setState({value: event.target.value})}
      />
    </Dialog>);
  }
}