import React from "react";
import {inject, observer} from "mobx-react";
import QueueAnim from 'rc-queue-anim';
import "./style.scss";
import {LINKS} from './../../routes'
import {Link} from 'react-router-dom';
import * as _ from 'lodash';
import NumberFormat from 'react-number-format';
import {
  Paper,
  Card,
  CardActions,
  CardHeader,
  CardMedia,
  CardTitle,
  CardText,
  FlatButton,
  GridList,
  GridTile,
  Divider,
  Step,
  Stepper,
  StepLabel,
  StepButton,
  RaisedButton,
} from 'material-ui';


@inject('appstate')
@observer
export default class CardAdmin extends React.Component {

  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      stepIndex: 1,
      stepAccount : false,
      stepDeposit : false,
      stepChallenge : false,

    };
    this.defaultState = Object.assign({}, this.state);
    this.globalUI = props.appstate.globalUI;
    this
      .globalUI
      .changeBackgroundColor("#f7f7f7");
    // .changeBackgroundColor("#208166");
    this.dashboardStore = props.appstate.dashboard;
    this.authStore = props.appstate.auth;
    this.userData = props.appstate.userData;
  }

  componentDidMount() {
    
  }

  componentWillUnmount() {
    this
      .globalUI
      .changeBackgroundColor("#fff");
  }

  getValue = (data)=> {
    if(data == null){
      return 0
    }
    else{
      return data
    }
  }



  render() {

    const contentStyle = {margin: '0 16px'};


    return (
      <div>
          
          <div className="col s12 m4 l4 row">
            {/*<Card style={{backgroundColor: '#2196f3', minHeight: 145}} className="cardLite">*/}
              {/*<CardHeader*/}
                {/*style={{padding: '16px 16px 0',}}*/}
                {/*title={<h1 style={{fontSize: 22, fontWeight: '400', color: '#fff'}}>Total Deposit</h1>}*/}
              {/*/>*/}
              {/*<CardTitle style={{padding: '16px 16px 8px 16px'}}*/}
                         {/*title={<h1 style={{fontSize: 38, fontWeight: "300", color: "#fff"}}><NumberFormat value={this.getValue(this.dashboardStore.dashboard.top.total[0].sum)} displayType={'text'} thousandSeparator={true} prefix={'IDR '} /><span*/}
                           {/*className="saldo-analytic-percentage" style={{fontSize: 18}}><NumberFormat value={this.getValue(this.dashboardStore.dashboard.top.today[0].sum)} displayType={'text'} thousandSeparator={true} prefix={'IDR '} /></span></h1>}*/}
                         {/*subtitle={<span style={{fontSize: 16, fontWeight: 300, color: '#fff'}}>Today</span>}/>*/}

              {/*<CardText style={{padding: '8px 0 8px 0px', position: 'relative'}}>*/}
                {/*<Divider style={{marginBottom: 8, backgroundColor: '#3984c4'}}/>*/}
                {/*<span style={{fontSize: 16, fontWeight: 300, color: '#fff', paddingLeft: 16}}>Yesterday</span>*/}
                {/*<span style={{*/}
                  {/*position: 'absolute',*/}
                  {/*right: '16px',*/}
                  {/*fontSize: 16,*/}
                  {/*fontWeight: 400,*/}
                  {/*paddingLeft: 16,*/}
                  {/*color: "#fff"*/}
                {/*}}><NumberFormat value={this.getValue(this.dashboardStore.dashboard.top.yesterday[0].sum)} displayType={'text'} thousandSeparator={true} prefix={'IDR '} /></span>*/}
              {/*</CardText>*/}

            {/*</Card>*/}

          </div>
          <div className="col s12 m4 l4">
            <Card style={{minHeight: 145}} className="cardLite">
              <CardHeader
                style={{padding: '16px 16px 0',}}
                title={<h1 style={{fontSize: 22, fontWeight: '400'}}>Total Withdraw</h1>}
              />

              <CardTitle style={{padding: '16px 16px 8px 16px'}}
                         title={<h1 style={{fontSize: 38, fontWeight: "300"}}><NumberFormat value={this.getValue(this.dashboardStore.dashboard.bottom.total[0].sum)} displayType={'text'} thousandSeparator={true} prefix={'IDR '} /><span
                           className="saldo-analytic-percentage" style={{fontSize: 16}}><NumberFormat value={this.getValue(this.dashboardStore.dashboard.bottom.today[0].sum)} displayType={'text'} thousandSeparator={true} prefix={'IDR '} /></span></h1>}
                         subtitle={<span style={{fontSize: 16, fontWeight: 300}}>Today</span>}/>


              <CardText style={{padding: '8px 0 8px 0px', position: 'relative'}}>
                <Divider style={{marginBottom: 8}}/>
                <span style={{fontSize: 16, fontWeight: 300, color: 'rgba(66, 71, 112, 0.54)', paddingLeft: 16}}>Yesterday</span>
                <span style={{position: 'absolute', right: '16px', fontSize: 16, fontWeight: 400, paddingLeft: 16}}><NumberFormat value={this.getValue(this.dashboardStore.dashboard.bottom.yesterday[0].sum)} displayType={'text'} thousandSeparator={true} prefix={'IDR '} /></span>
              </CardText>

            </Card>
          </div>

        </div>
    )
  }
}