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 DC from 'decimal.js-light';
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';

const {
  LineChart,
  AreaChart,
  BarChart,
  Bar,
  Line,
  XAxis,
  YAxis,
  ReferenceLine,
  CartesianGrid,
  Tooltip,
  Legend,
  Area,
  ResponsiveContainer
} = require('recharts/umd/Recharts.min');

@inject('appstate')
@observer
export default class CardAgent 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;
    this.transactionStore = props.appstate.transaction;
  }

  componentDidMount() {
    // this.transactionStore.getAmount();
  }

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

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



  render() {
    const money = new DC(this.transactionStore.saldo.amount || 0).toFixed(2);
    const uang = <NumberFormat value={money} displayType={'text'} thousandSeparator={true} prefix={'IDR '} />;
    const contentStyle = {margin: '0 16px'};


    return (
      <div>

          <div className="col s12 m4 l4 row">
            <Card style={{backgroundColor: '#2196f3', minHeight: 245}} className="cardLite">
              <CardHeader
                style={{padding: '16px 16px 0',}}
                title={<h1 style={{fontSize: 22, fontWeight: '400', color: '#fff'}}>Wallet</h1>}
              />
              <CardTitle style={{padding: '16px 16px 8px 16px'}}
                         title={<h1 style={{fontSize: 38, fontWeight: "300", color: "#fff"}}>{uang}<span
                           className="saldo-analytic-percentage" style={{fontSize: 18}}>{/*HERE*/}</span></h1>}
                         subtitle={<span style={{fontSize: 16, fontWeight: 300, color: '#fff'}}><span style={{fontSize:24,fontWeight:'300'}}></span></span>}/>

              <CardText style={{padding: "120px 0px 20px 0px", position: 'relative'}}>
                <Divider style={{marginBottom: 8, backgroundColor: '#3984c4'}}/>
                <span style={{fontSize: 16, fontWeight: 300, color: '#fff', paddingLeft: 16}}>Your Balance</span>
                <span style={{
                  position: 'absolute',
                  right: '16px',
                  fontSize: 16,
                  fontWeight: 400,
                  paddingLeft: 16,
                  color: "#fff"
                }}>{/**/}</span>
              </CardText>

            </Card>

          </div>
        </div>
    )
  }
}