import React, { Component } from 'react';
import {Provider, Store, Emitter} from 'sbx-react-core';

import classNames from 'classnames';

import { getOrdersHistory } from 'actions/Orders';
import { getOrderProfit } from 'libs/Orders';
import { toDateTime, toDateTimeUTC } from 'helpers/Time';

import Table from 'sbx-react-table';
import Dropdown     from 'sbx-react-dropdown';
import Tooltip      from "sbx-react-tooltip";
import Lang         from 'components/Language';



// order: 343686
// id_platform: "cryptency"
// type: "sell"
// symbol: "BTCUST"
// volume: 1
// open_time: "1562232298"
// close_time: "1582116594"
// open_price: 11671.747
// close_price: 10128.432

// sl: 0
// tp: 0
// commission: -5.84
// storage: -28.18
// profit: 15.44
// comment: "IP:172.31.11.235"
// cmd: 1

@Provider({
    assets: 'assets',
    settings: 'settings'
})
export default class OrdersHistory extends Component {

    constructor(){
        super();
    }

    __subscribe = () => {
        this.historyTable.update();
    };

    componentDidMount() {
        Emitter.on('history:update', this.__subscribe)
    }

    componentWillUnmount() {
        Emitter.off('history:update', this.__subscribe)
    }

    render() {

        let { assets, settings} = this.props;

        return (
            <div className="orders-history-box">

                <Table
                    name="clients"
                    action= {getOrdersHistory}
                    ref = {e => this.historyTable = e}
                    // onRowClick={(row) => {
                    //     // alert(row)
                    // }}
                    config={{
                        limit: 20,
                        order: [
                            ['order', 'DESC']
                        ]
                    }}
                    totalStructure={{
                        storage: {
                            val(total){
                                return <span className="mr-md"><Lang>TOTAL_SWAPS</Lang>: {(+total['storage']||0).toFixed(2)}</span>
                            }
                        },
                        profit: {
                            val(total){
                                return <span><Lang>TOTAL_PROFIT</Lang>: {(+total['profit']||0).toFixed(2)}</span>
                            }
                        }
                    }}

                    structure= {{
                        order: {
                            name: <Lang>ORDER</Lang>
                        },
                        symbol: {
                            name: <Lang>SYMBOL</Lang>,
                            val(row){
                                    return <div className="content-middle">
                                        <div className="text-md text-weight-lg mr-sm ">{row.symbol}</div>
                                        <div className="text-sm text-weight-xs text-gray">{assets[row.symbol] && assets[row.symbol].description}</div>
                                    </div>
                            }
                        },

                        open_time: {
                            name: <Lang>OPEN_DATE</Lang>,
                            val(row){
                                return <div className={classNames({
                                    "text-sm text-weight-md":row.length,
                                    "text-sm text-gray":!row.length
                                })}>{toDateTimeUTC((+row.open_time) + settings.serverUTCTimeOffset)}</div>
                            }
                        },
                        close_time: {
                            name: <Lang>CLOSE_DATE</Lang>,
                            val(row){
                                return <div className={classNames({
                                    "text-sm text-weight-md":row.length,
                                    "text-sm text-gray":!row.length
                                })}>{toDateTimeUTC((+row.close_time) + settings.serverUTCTimeOffset)}</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>
                            }
                        },
                        volume: {
                            name: <Lang>VOLUME</Lang>,
                            val(row){
                                return <div className={classNames({
                                    "text-sm text-gray":!row.length
                                })}>{row.length?_.reduce(row, function (a, b) {
                                    return a + (b.type==='sell'?-b.volume:b.volume)
                                }, 0):row.volume}</div>
                            }
                        },
                        open_price: {
                            name: <Lang>OPEN_PRICE</Lang>,
                        },
                        close_price: {
                            name: <Lang>CLOSE_PRICE</Lang>,
                        },
                        commission: {
                            name: <Lang>COMMISSION</Lang>,
                            val(row){
                                return (row.commission).toFixed(4);
                            }
                        },
                        storage: {
                            name: <Lang>SWAPS</Lang>,
                            val(row){
                                return row.storage;
                            }
                        },
                        profit: {
                            name: <Lang>NET_PROFIT</Lang>,
                            val(row){
                                return <div className={classNames({
                                    "text-md": true,
                                    "text-red":row.profit<0,
                                    "text-green":row.profit>0
                                })}>{row.profit.toFixed(2)}</div>
                            }
                        }
                    }
                    }/>

            </div>
        )
    }
}