import React from 'react';
import {inject, observer} from 'mobx-react';
import {
  FlatButton,
  Divider
} from 'material-ui';
import {Card} from 'antd';
import {startCase} from 'lodash';
import './style.scss';

@inject('appstate')
@observer
export default class FinishVouchers extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      value: 1,
    };
    this.defaultState = Object.assign({}, this.state);
    this.http = props.appstate.http;
    this.authStore = props.appstate.auth;
    this.globalUI = props.appstate.globalUI;
    this.vouchersStore = props.appstate.vouchers;
  }

  componentDidMount() {
    console.log(this.vouchersStore)
    // console.log("skuid",this.vouchersStore.skuId);
    // console.log("skuName",this.vouchersStore.skuName);
    // console.log("skuPrice",this.vouchersStore.skuPrice);
    // console.log("data",this.vouchersStore.dataItems);
  }

  render() {

    return (
      <div className="row">
        <div className="row">
          <Card>
            <div className="">
              <div style={{display:'flex',justifyContent:'center'}}>
                <h3 style={{fontSize:18}}>
                  Berhasil menukarkan voucher
                </h3>
              </div>
            </div>
            <Divider style={{marginBottom:10,marginTop:10}} />
            <div className="row" style={{marginTop:30}}>
              <div className="col s12">
                <div className={'textContainer'}>
                  <p>Anda akan dialihkan ke page voucher dengan menekan tombol finish dibawah ini. Selamat Berbelanja!</p>
                </div>
              </div>
            </div>
          </Card>
        </div>
        <div className="row">
          {this.props.button()}
        </div>
      </div>
    )
  }
}
