import React, {Component} from "react";
import {Provider} from "sbx-react-core";
import classNames from "classnames";
import Lang from "components/Language";
import Table from "sbx-react-table";

import {toDateTime} from 'helpers/Time';
import {getCurrencySymbol} from 'libs/Orders';

import {setSetting} from "actions/Settings";
import {getTransactionHistory} from 'actions/Orders';

@Provider({
    transactions: ['settings', 'transactions'],
    profile: ['profile']

})

export default class Transactions extends Component {

    render() {
        let {profile} = this.props;
        return (
            <div className="container">
                <Table
                    name="transactionTable"
                    action={getTransactionHistory}
                    config={{
                        limit: 20,
                        order: [
                            ['order', 'DESC']
                        ]
                    }}
                    totalStructure={{
                        profit: {
                            val(total){
                                return <span className="mr-md"><Lang>TOTAL_DEPOSIT</Lang>: {(+total['profit']||0).toFixed(2)}</span>
                            }
                        }
                    }}
                    structure={{
                        order: {
                            name: <Lang>ORDER</Lang>
                        },
                        close_time: {
                            name: <Lang>DATE</Lang>,
                            val(row) {
                                return <div>{toDateTime(row.close_time)}</div>
                            }
                        },
                        type: {
                            name: <Lang>TYPE</Lang>,
                            val(row) {
                                return <div className={classNames({
                                    "text-md text-weight-xlg": true
                                })}><Lang>{(row.length ? row[0].type : row.type).toUpperCase()}</Lang></div>
                            }
                        },

                        profit: {
                            name: <Lang>VOLUME</Lang>,
                            val(row) {
                                return <div>{row.profit.toFixed(2)} {getCurrencySymbol(profile.accounts[0].currency)}
                                </div>
                            }
                        },
                        comment: {
                            name: <Lang>COMMENT</Lang>,
                            val(row) {
                                return <div>{row.comment}</div>;
                            }
                        }
                    }
                    }/>
            </div>
        )
    }
}