import React from 'react';
import {observer, inject} from 'mobx-react';
import NumberFormat from 'react-number-format';

@inject('appstate')
@observer
export default class DepositReviewComponent extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {};
    this.defaultState = Object.assign({}, this.state);
    this.depositStore = props.appstate.deposit;
  }

  componentDidMount() {
    // console.log('DepositReviewComponent loaded!', this.props)
  }

  render() {

    const {data} = this.props;

    return (
      <div>
        <div>
          <div className="center-align"><p style={{ lineHeight: "1.6rem" }}>You will made deposit request via bank transfer</p></div>
          {/*<div className="center-align"><p  style={{lineHeight:"1.6rem", marginTop:"0px", marginBottom:"0px"}}>Number: <span className="black-text">#3AB3Db</span></p></div>*/}
          <div className="center-align"><p style={{ lineHeight: "1.6rem", marginTop: "0px" }}>Date: <span className="black-text">{moment().format('DD MMMM YYYY, HH:mm:ss')}</span></p></div>
          <div className="center-align"><p style={{ lineHeight: "1.6rem", marginTop: "0px", marginBottom: "0px" }}>Total Amount</p></div>
          <div className="center-align"><h4 className="black-text" style={{ lineHeight: "1.6rem", marginTop: "0px", fontSize: "26px", marginBottom: "0px" }}><NumberFormat value={this.depositStore.data.amount} displayType={'text'} thousandSeparator={true} prefix={'IDR '} /></h4></div>


          <div className="row">
            <div className="col s12 m6">
              <h4 className="center-align" style={{ fontSize: '14px', marginBottom: "8px" }}>From</h4>
              <div style={{
                boxShadow: "none",
                border: "1px solid #d4d4d4",
                backgroundColor: "#f9f9f9",
                padding: "10px 10px 10px 20px",
                marginTop: 0,
                marginBottom: 0
              }} className="card-panel">
                <p className="black-text" style={{ lineHeight: '1.0rem', fontSize: 11 }}>
                  Bank: {this.depositStore.bank.name}
                </p>
                <p className="black-text" style={{ lineHeight: '1.0rem', fontSize: 11 }}>
                  Behalf Of: {this.depositStore.bank.on_behalf}
                </p>
                <p className="black-text" style={{ lineHeight: '1.0rem', fontSize: 11 }}>
                  Account Number: {this.depositStore.bank.account_number}
                </p>
                <p className="black-text" style={{ lineHeight: '1.0rem', fontSize: 11 }}>
                  Currency: IDR
                </p>
                <p className="black-text" style={{ lineHeight: '1.0rem', fontSize: 11 }}>
                  Swift Code:
                </p>

              </div>
            </div>
            <div className="col s12 m6">
              <h4 className="center-align" style={{ fontSize: '14px', marginBottom: "8px" }}>To</h4>
              <div style={{
                boxShadow: "none",
                border: "1px solid #d4d4d4",
                backgroundColor: "#f9f9f9",
                padding: "10px 10px 10px 20px",
                marginTop: 0,
                marginBottom: 0
              }} className="card-panel">
                <p className="black-text" style={{ lineHeight: '1.0rem', fontSize: 11 }}>
                  Bank: {this.depositStore.bankAdmin.name}
                </p>
                <p className="black-text" style={{ lineHeight: '1.0rem', fontSize: 11 }}>
                  Behalf Of: {this.depositStore.bankAdmin.on_behalf}
                </p>
                <p className="black-text" style={{ lineHeight: '1.0rem', fontSize: 11 }}>
                  Account Number: {this.depositStore.bankAdmin.account_number}
                </p>
                <p className="black-text" style={{ lineHeight: '1.0rem', fontSize: 11 }}>
                  Currency: IDR
                </p>
                <p className="black-text" style={{ lineHeight: '1.0rem', fontSize: 11 }}>
                  Swift Code: BBIJIDJA
                </p>
                {/*<p className="black-text" style={{lineHeight: '1.0rem', fontSize: 11}}>*/}
                {/*Note: [Your trading account number]*/}
                {/*</p>*/}
              </div>
            </div>

          </div>




        </div>
      </div>
    )
  }
}
