import React from 'react';
import {inject, observer} from 'mobx-react';
import {
    FlatButton,
    Divider
} from 'material-ui';
import { Affix, Card, Slider, Select, Row, Col, Icon, Tag,Rate, Button, Checkbox , DatePicker, Alert, Input ,Avatar} from 'antd';
import {startCase} from 'lodash';
import LoadingDialog from "../../LoadingDialog";
import Loader from 'react-loader-advanced';
// import './style.scss';
import {DIALOG} from "../../../stores/global_ui";
import EmptyComponent from '../../EmptyComponent';
import NavigationArrowBack from 'material-ui/svg-icons/navigation/arrow-back';
import {LINKS} from "../../../routes";
import {Route} from "react-router-dom";

@inject('appstate')
@observer
export default class CheckoutVouchers 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;
  }

  componentDidMount() {

  }

  render() {

    return (
    <div className="wallet containerMiddle">
        <div className="row">
            <div className="col s0 m3 l3" />
            <div className="col s12 m6 l6">
                <div className="row">
                <FlatButton
                    className="headerMenu"
                    hoverColor="#f1f5f9"
                    style={{ background: '#ffffff00' }}
                    onClick={() => this.props.history.goBack()}
                    label="Back"
                    primary={true}
                    icon={<NavigationArrowBack />}
                />
                <Divider style={{marginBottom:10,marginTop:10}} />
                    <Card 
                    // title={<div style={{display:'flex',justifyContent:'center'}}>
                    //             <p style={{fontSize:20}}>
                    //                 Detail Pembelian
                    //             </p>
                    //         </div>}
                            >
                        <div className="">
                            <div style={{display:'flex',justifyContent:'center'}}>
                                <h3 style={{fontSize:18}}>
                                    Detail Pembelian
                                </h3>
                            </div>
                        </div>
                        <Divider style={{marginBottom:10,marginTop:10}} />
                        <div className="row" style={{marginTop:30}}>
                            <div className="col s4 m4 l4">
                                <div style={{display:'flex',justifyContent:'center',alignItems:'center'}}>
                                    <Avatar size={74} src="https://png.pngtree.com/element_origin_min_pic/17/09/17/d78f6e704459b24bcdd0f32943d29145.jpg" />
                                </div>
                            </div>
                            <div className="col s4 m8 l8">
                            <div style={{alignItems:'center'}}>
                                <Row>
                                    <div className="col s12 m6 6">
                                        <h3>Jenis Layanan :</h3>
                                    </div>
                                    <div className="col s12 m6 6">
                                        <h3 style={{color:''}}>KFC Rp.50.000,00</h3>
                                    </div>
                                </Row>
                                <Row>
                                    <div className="col s12 m6 6">
                                        <h3>Point :</h3>
                                    </div>
                                    <div className="col s12 m6 6">
                                        <h3 style={{color:'#FF6F00'}}>50 Points</h3>
                                    </div>
                                </Row>
                            </div>
                            </div>
                        </div>
                    </Card>
                </div>
                <div className="row">
                    <Card >
                        <div className="row">
                            <div style={{display:'flex',justifyContent:'space-between'}}>
                                <h3 style={{color:''}}>Point</h3>
                                <h3 style={{color:'#FF6F00'}}>11,570 Points</h3>
                            </div>
                        </div>
                        <Divider style={{marginBottom:10,marginTop:10}} />
                        <div className="row">
                            <div style={{display:'flex',justifyContent:'space-between'}}>
                                <h3>Total Pembayaran Point</h3>
                                <h3 style={{color:'#FF6F00'}}>50 Points</h3>
                            </div>
                        </div>
                        <div className="row">
                            <Button type="primary" block onClick={() => this.props.history.push(LINKS.PAYMENT_VOUCHERS)}>Lanjut</Button>
                        </div>
                    </Card>
                </div>
            </div>
            <div className="col s0 m3 l3" />
        </div>
    </div>
    )
  }
}