import React from 'react';
import {inject, observer} from 'mobx-react';
import {
    FlatButton
} from 'material-ui';
import { Affix, Card, Slider, Select, Row, Col, Icon, Tag,Rate, Button, Checkbox ,Divider, DatePicker, Alert, Input } 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 Search from 'material-ui/svg-icons/action/search';
import Timer from 'react-compound-timer';
import {LINKS} from "../../../routes";
import {Route} from "react-router-dom";

@inject('appstate')
@observer
export default class VerifyVouchers 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 m2 l2" />
            <div className="col s12 m8 l8">
                <Card>
                    <div className="row">
                        <div style={{display:'flex',justifyContent:'center'}}>
                            <h2 style={{color:'grey'}}>
                                Verifikasi Keamanan
                            </h2>
                        </div>
                    </div>
                    <div className="row">
                        <Alert message="Untuk melanjutkan transaksi, masukan 6-digit kode verifikasi yang telah dikirim." type="info" />
                    </div>
                    <div className="row">
                        <p>Kode verifikasi telah dikirim ke ****.****.6523</p>
                    </div>
                    <div className="row">
                        <Input placeholder="Masukan Kode Verifikasi" />
                    </div>
                    <div className="row">

                    <Button style={{marginRight:10}}>Kirim ulang melalui SMS (<Timer
                        initialTime={70000}
                        lastUnit="s"
                        direction="backward"
                    >
                        {() => (
                            <React.Fragment>
                                <Timer.Seconds />
                            </React.Fragment>
                        )}
                    </Timer>)</Button>
                    <Button>Telepon Saya</Button>
                    </div>
                    <div className="row">
                        <div style={{display:'flex',justifyContent:'flex-end'}}>
                          <Route render={({ history}) => (
                            <Button type="danger" onClick={() => history.goBack()}>Batal</Button>
                          )} />
                          <Route render={({ history}) => (
                            <Button type="primary" style={{marginLeft:10}} onClick={() => history.push(LINKS.CHECKOUT_VOUCHERS)}>OK</Button>
                          )} />
                        </div>
                    </div>
                </Card>
            </div>
            <div className="col s0 m2 l2" />
        </div>
    </div>
    )
  }
}
