import React from 'react';
import {observer, inject} from 'mobx-react';
import {Route as RouteDOM} from "react-router-dom";
import {LINKS} from "../../routes";
import NumberFormat from "react-number-format";

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

  render() {
    return (<div className={'containerWalletBar'}>
      <span style={{display: 'none'}}>{this.props.appstate.wallet.data.wallet}</span>
      <div className={'containerVoucher'}>
        <p className={'titleVoucher'}>Voucher</p>
        <RouteDOM render={({ history}) => (
          <p onClick={() => history.push(LINKS.WALLET)} className={'textVoucher'}>
            <NumberFormat value={(this.props.appstate.wallet.data.wallet).toFixed(2)} displayType={'text'} thousandSeparator={true} prefix={'Rp '}/>
          </p>
        )} />
      </div>
      <div className={'containerPoints'}>
        <p className={'titlePoints'}>Points</p>
        <RouteDOM render={({ history}) => (
          <p onClick={() => history.push(LINKS.WALLET)} className={'textPoints'}>
            <NumberFormat value={(this.props.appstate.wallet.data.point)} displayType={'text'} thousandSeparator={true}/>
          </p>
        )} />
      </div>
    </div>);
  }
}
