import React, {Component} from "react";
import {Link} from "react-router-dom";
import axios from "axios";
import * as configs from '../../Config/config';

const Finance = props => (
    <tr>
        <td>{props.finance.account_month}</td>
        <td>Rs.{props.finance.total_income}</td>
        <td>Rs.{props.finance.total_expenses}</td>
        <td>Rs.{props.finance.gross_revenue}</td>
        <td>
            <Link style={{color:"black"}} to={"/admin/finance/edit/"+props.finance._id}><button style={{paddingRight:"20px",width:"auto"}} className="btn btn-warning mr-1"><i className="fa fa-pencil"> Edit</i></button></Link>
            <button style={{width:"auto",color:"black"}} className="btn btn-danger" onClick={() => {props.deleteFinance(props.finance._id)}}><i className="fa fa-trash"> Delete</i></button>
        </td>
    </tr>
);

export default class ViewFinancialDetails extends Component{
    constructor(props) {
        super(props);

        this.deleteFinance = this.deleteFinance.bind(this);

        this.state = {
            finance : []
        };
    }

    componentDidMount() {
        axios.get(configs.BASE_URL+'/admin/finance/')
            .then(response => {
                this.setState({ finance : response.data})
                // console.log(this.state);
            })
            .catch(error =>{
                console.log(error);
            })
    }

    deleteFinance(id){
        axios.delete(configs.BASE_URL+'/admin/finance/'+id)
            .then(res => console.log(res.data));

        this.setState({
            finance : this.state.finance.filter(el => el._id !== id)
        })
    }

    financialList(){
        return this.state.finance.map(currentdetails => {
            return <Finance finance={currentdetails} deleteFinance={this.deleteFinance} key={currentdetails._id} />;
        })
    }


    render() {
        return(
            <div>
                <div className="app-page-title">
                    <div className="page-title-wrapper">
                        <div className="page-title-heading">
                            <div className="page-title-icon">
                                <i className="pe-7s-display1 fa fa-line-chart"></i>
                            </div>
                            <div>
                                Financial Details
                            </div>
                        </div>
                    </div>
                </div>
                <div className="col-lg-12">
                    <div className="main-card mb-3 card">
                        <div className="card-body">
                            <table className="mb-0 table table-striped">
                                <thead>
                                    <tr>
                                        {/*<th>#</th>*/}
                                        <th>Account Month</th>
                                        <th>Gross Income</th>
                                        <th>Gross Expenses</th>
                                        <th>Gross Revenue</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {this.financialList()}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}