import React,{Component} from 'react';
import axios from 'axios';
import { useState,useEffect } from "react";
import { useParams,Link } from 'react-router-dom';
import { Helmet } from 'react-helmet';

export default class Withdrawl extends Component{
    constructor(props){
        super(props);
         this.state={
            assetsLoaded:false,page:0,wds:[],wamt:1000,bal:0
         }
      }

      componentDidMount(){
        axios.get('https://capitalsgrowth.in/Rest/withdrawals_api/'+localStorage.getItem('userid')).then(res => {
            this.setState({wds:res.data});
        });
            axios.get('https://traderguru7.com/app/home/wallet_api/'+localStorage.getItem('userid')).then(res => {
                //console.log(res.data);
                this.setState({bal:res.data.wallet})
            });
      }

      update_amt(at){
          this.setState({amt:at})
      }

      cancelReq=(tid)=>{
        //alert("asdf");return false;
        fetch('https://capitalsgrowth.in/Rest/cancel_withdrawal_api/'+tid).then((response)=>response.json())
        .then((responseJson)=>{
            alert(responseJson.msg);
            this.componentDidMount();
            //console.log(responseJson);
        }).catch((error)=>{
          console.log(error)
        });
    }

      submitForm(){
        //alert(this.state.wamt);return false;
        if(this.state.wamt<999){alert("Min Amt 1000 to withdraw");return false;}
        axios.post('https://capitalsgrowth.in/Rest/withdraw_submit_api/'+localStorage.getItem('userid'),{withdrawAmt:this.state.wamt})
        .then((res) => {
            //console.log(res.data);return false;
            alert(res.data.msg);this.componentDidMount();
        }).catch((err) => alert("Couldnot reach to server"));    
    }


    render(){
        return (     
            <div>
            <Helmet>
            <title>MCX Trading</title>
            <link rel="stylesheet" href="/site/css/style.css"/>
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/> 
            <script src="/site/js/lib/bootstrap.bundle.min.js"></script>
            <script src="/site/js/plugins/splide/splide.min.js"></script>
            
            </Helmet>
            <div className="appHeader no-border">
                <div className="left">
                    <Link to="/dashboard" className="headerButton goBack">
                        <i className="fa fa-arrow-left"></i> 
                    </Link>
                </div>
                <div className="pageTitle">Withdrawl</div>
                <div className="right"> </div>
            </div>

            <div id="appCapsule">    
                <div className="section pt-1">
                <h3 className='text-primary'>Availble Balance {this.state.bal}/-</h3><hr/>
                <div className="wallet-card text-center">
                <div className="balance">
                        <input type="number" value={this.state.wamt} onChange={(e)=>this.setState({wamt:e.target.value})}
                        className="form-control" placeholder='Enter Amount' required />
                        <button type="button" onClick={()=>this.submitForm()} className="btn btn-warning">WITHDRAW</button>
                    
                </div>
                
            </div><hr/>

            <div class="transactions">
            {this.state.wds.map(m => (
                <div class="item">
                    <div class="detail">
                        
                        <div>
                        <div class="price text-danger"> {m.wamt}</div>
                            <p>{m.req_date}</p>
                        </div>
                    </div>
                    <div class="right">
                    <span className='badge badge-info'>{m.req_status}</span>&nbsp;
                            {m.remarks!=='' &&
                            <p>{m.remarks}</p>}
                                                     
                            {m.req_status!=='Approved' &&
                             <button type="button" onClick={()=>this.cancelReq(m.wid)}
                             className='btn btn-sm btn-danger mt-1'>CANCEL</button>}
                       
                    </div>
                </div>))}
            </div>
            
                   
               </div>
              
            </div>
            
            </div>
        )}
}


