import React, { Component } from 'react';
import _ from 'underscore';
import {Provider, Emitter} from 'sbx-react-core';
import classNames from 'classnames';

import Table        from 'sbx-react-table';
import Dropdown     from 'sbx-react-dropdown';
import Tooltip      from "sbx-react-tooltip";
import Modal        from "sbx-react-modal";
import Confirm      from "sbx-react-confirm";

import TradePanel from "containers/TradePanel/TradePanel";
import Lang from 'components/Language';

//helpers and libs
import { toDateTime, toDateTimeUTC }                from 'helpers/Time';
import { artRound }                                 from 'helpers/Math';
import { getOrderProfit, orderIsBuy }               from 'libs/Orders';

import { getOpenOrders, closeOrder, closeAllOrder, closeAllGroupOrder, reverseOrder, openOrder, addOrderToChart } from 'actions/Orders';

import IconClose    from './images/close.svg?jsx';
import IconInfo     from './images/info.svg?jsx';
import IconReverse  from './images/reverse.svg?jsx';
import IconCopy     from './images/copy.svg?jsx';
import IconMore     from './images/more.svg?jsx';
import IconNote     from './images/note.svg?jsx';
import IconChart     from './images/chart.svg?jsx';

import './OpenOrders.scss';
import Icon from "../Market/components/AssetActions";

@Provider({
    quote: props => ['feed', props.order.symbol],
    assets: 'assets'
})
class  MarketPrice  extends Component  {

    bid = 0;
    ask = 0;

    constructor(props){
        super(props);
        this.ask = this.bid = props.order.close_price || 0;
    }

    componentWillReceiveProps(nextProps, nextContext) {
        const prevPrice = (this.props.quote.ask + this.props.quote.bid)/2;
        const nextPrice = (nextProps.quote.ask + nextProps.quote.bid)/2;
        if(prevPrice !== nextPrice) {
            this.bid = nextProps.quote.bid;
            this.ask = nextProps.quote.ask;
        }
    }

    render() {
        let {order, collapse, assets} = this.props;

        return <div className={classNames({
            "text-sm text-weight-md":collapse,
            "text-sm text-gray":!collapse
        })}
        >{(orderIsBuy(order.cmd)?this.ask:this.bid).toFixed(assets[order.symbol].digits)}</div>
    }
}

@Provider({
    quote: props => ['feed', props.symbol]
})
class  NetProfit  extends Component  {

    bid = 0;
    ask = 0;

    componentWillReceiveProps(nextProps, nextContext) {
        const prevPrice = (this.props.quote.ask + this.props.quote.bid)/2;
        const nextPrice = (nextProps.quote.ask + nextProps.quote.bid)/2;
        if(prevPrice !== nextPrice || this.props.symbol !== nextProps.symbol) {
            this.bid = nextProps.quote.bid;
            this.ask = nextProps.quote.ask;
        }
    }


    render() {
        let {data, quote, symbol} = this.props;

        let profit = 0;
        if(data.length){
            profit = _.reduce(data, (a, b) => a + getOrderProfit(Object.assign({}, b, quote)), 0);
        }else{
            profit = getOrderProfit(Object.assign({}, data, quote));
        }

        return <div  className={classNames({
            "text-md text-weight-xlg":data.length,
            "text-sm":!data.length,
            "text-profit":profit>0,
            "text-lose":profit<0
        })}
        >{profit.toFixed(2)}</div>
    }
}

@Provider({
    openOrders: 'openOrders',
    assets: 'assets',
    confirmations: ['settings','confirmations'],
    trade: ['settings','trade'],
    serverUTCTimeOffset: ['settings','serverUTCTimeOffset']
})

export default class OpenOrders extends Component {

    constructor(){
        super();
        getOpenOrders();
    }

    render() {
        let {openOrders, assets, confirmations, serverUTCTimeOffset, trade} = this.props;
        let {close, close_all, close_group, double, reverse} = confirmations;

        console.log('@openOrders', openOrders);

        return (
            <div className="block-wrapper">
                <Modal
                    ref={e => this.tradeModal = e}
                    size="md"
                    className="modal"
                >
                    {(data, hide) => <TradePanel order={data} hide={hide} formType="modify"/>}
                </Modal>
                <Table
                    key="openOrders"
                    name = "openOrders"
                    rows = {openOrders}
                    groupBy = "symbol"
                    config = {{
                        order: ['symbol', 'ASC']
                    }}
                    onCollapseRowClick={(row) => {
                        Emitter.emit('sound','tab');
                    }}
                    onDoubleRowClick={row => {
                        this.tradeModal.show(row, <div className="modal-title">
                            <img src={`/static/images/icon/${row.symbol}.png`} className="icon-lg mr-sm"  alt={row.symbol}/>
                            <div className="symbol"><Lang>MODIFY_ORDER_TITLE</Lang>: {row.symbol} ({<Lang>{(row.type).toUpperCase()}</Lang>})</div>
                        </div>);
                        Emitter.emit('sound','tab');
                    }}
                    structure= {{
                        symbol: {
                            name: <Lang>POSITION</Lang>,
                            val(row){
                                if(row.length){
                                    return <div className="content-middle">
                                        <div className="text-md text-weight-lg mr-sm ">{row[0].symbol} <span>({row.length})</span> </div>
                                        <div className="text-sm text-weight-xs text-gray">{assets[row[0].symbol].description}</div>
                                    </div>
                                }else{
                                    return <div className="ml-xs">
                                        <i className="icon-md icon-grey mr-sm"><IconNote/></i>
                                        <span className="mr-sm">{row.order}</span>
                                        <span className="text-sm text-weight-md">{row.symbol}</span>
                                    </div>
                                }
                            }
                        },
                        open_time: {
                            name: <Lang>OPEN_DATE</Lang>,
                            sort:'max',
                            val(row){
                                return <div className={classNames({
                                    "text-sm text-weight-md":row.length,
                                    "text-sm text-gray":!row.length
                                })}>{row.length?toDateTimeUTC(row[0].open_time+serverUTCTimeOffset):toDateTimeUTC(row.open_time+serverUTCTimeOffset)}</div>
                            }
                        },

                        type: {
                            name: <Lang>TYPE</Lang>,
                            val(row){
                                // {row.length&&(_.reduce(row, (a, b) => a + (b.type==='sell'?-b.volume:b.volume), 0)>0?<Lang>BUY</Lang>:<Lang>SELL</Lang>)}
                                return !row.length&&<div className={classNames({
                                    "text-md text-weight-xlg":row.length,
                                    "text-sm text-gray":!row.length,
                                    "badge": true,
                                    "badge-sell": row.cmd === 1,
                                    "badge-buy": row.cmd === 0
                                })}>{<Lang>{row.type.toUpperCase()}</Lang>}</div>
                            }
                        },
                        volume: {
                            name: <Lang>VOLUME</Lang>,
                            val(row){
                                return <div className={classNames({
                                    "text-md text-weight-md":row.length,
                                    "text-sm text-gray":!row.length
                                })}>{artRound(row.length?_.reduce(row, function (a, b) {
                                    return a + (b.type==='sell'?-b.volume:b.volume)
                                }, 0):row.volume)}</div>
                            }
                        },
                        row: {
                            name: <Lang>SL_PRICE</Lang>,
                            val(row){
                                return row.length?'-':(+row.sl).toFixed(assets[row.length?row[0].symbol:row.symbol].digits)
                            }
                        },
                        tp: {
                            name: <Lang>TP_PRICE</Lang>,
                            val(row){
                                return row.length?'-':(+row.tp).toFixed(assets[row.length?row[0].symbol:row.symbol].digits)
                            }
                        },
                        open_price: {
                            name: <Lang>OPEN_PRICE</Lang>,
                            val(row){
                                return <div className={classNames({
                                    "text-sm text-weight-md":row.length,
                                    "text-sm text-gray":!row.length
                                })}>{row.length&&<Lang>AVG</Lang>} {(row.length?_.reduce(row, (a, b) => a + b.open_price, 0)/row.length:row.open_price).toFixed(assets[row.length?row[0].symbol:row.symbol].digits)}</div>
                            }
                        },
                        close_price: {
                            name: <Lang>MARKET_PRICE</Lang>,
                            val(row){
                                 return !row.length&& <MarketPrice collapse={row.length} order={row}/>
                            }
                        },
                        commission: {
                            name: <Lang>COMMISSION</Lang>,
                            val(row){
                                return ((row.length?_.reduce(row, (a, b) => a + b.commission, 0):row.commission) || 0).toFixed(4);
                            }
                        },
                        storage: {
                            name: <Lang>SWAPS</Lang>,
                            val(row){
                                return <div className={classNames({
                                    "text-sm text-weight-md":row.length,
                                    "text-sm text-gray":!row.length
                                })}>{(row.length?_.reduce(row, (a, b) => a + b.storage, 0):row.storage).toFixed(2)}</div>
                            }
                        },

                        profit: {
                            name: <Lang>NET_PROFIT</Lang>,
                            val(row, index){
                                return <NetProfit key={row.length?'main'+index:'collapse'+index} symbol={row.length?row[0].symbol:row.symbol} data={row}/>
                            }
                        },
                        actions: {
                            name: (structure) => {
                                return trade&&trade.closeAll&&(<Dropdown
                                        ref = {e => this.closeDrop = e}
                                        data={(<ul className="list-box">
                                            <li>
                                                <Confirm
                                                    onClick={(e) => {
                                                        closeAllOrder()
                                                            .then(()=>{
                                                                this.closeDrop.hide();
                                                            })
                                                    }}
                                                    type={close_all?'dropdown':'self'}
                                                    approveText={<Lang>CONFIRM_APPROVE</Lang>}
                                                    cancelText={<Lang>CONFIRM_CANCEL</Lang>}
                                                    desc={<Lang>CONFIRM_CLOSE_ALL_ORDER</Lang>}
                                                >
                                                    <a><Lang>CLOSE_ALL</Lang></a>
                                                </Confirm>
                                            </li>
                                            <li>
                                                <Confirm
                                                    onClick={() => {
                                                        closeAllOrder('profit')
                                                            .then(()=>{
                                                                this.closeDrop.hide();
                                                            })
                                                    }}
                                                    type={close_all?'dropdown':'self'}
                                                    approveText={<Lang>CONFIRM_APPROVE</Lang>}
                                                    cancelText={<Lang>CONFIRM_CANCEL</Lang>}
                                                    desc={<Lang>CONFIRM_CLOSE_ALL_PROFIT_ORDER</Lang>}
                                                >
                                                    <a><Lang>CLOSE_ALL_PROFITABLE</Lang></a>
                                                </Confirm>
                                            </li>
                                            <li>
                                                <Confirm
                                                    onClick={() => {
                                                        closeAllOrder('lose')
                                                            .then(()=>{
                                                                this.closeDrop.hide();
                                                            })
                                                    }}
                                                    type={close_all?'dropdown':'self'}
                                                    approveText={<Lang>CONFIRM_APPROVE</Lang>}
                                                    cancelText={<Lang>CONFIRM_CANCEL</Lang>}
                                                    desc={<Lang>CONFIRM_CLOSE_ALL_LOSE_ORDER</Lang>}
                                                >
                                                    <a><Lang>CLOSE_ALL_LOSE</Lang></a>
                                                </Confirm>
                                            </li>
                                        </ul>)}
                                        position="bottom_right"
                                    >
                                        <button className="btn btn-red btn-xs"><Lang>CLOSE</Lang></button>
                                    </Dropdown>)
                            },
                            sort: false,
                            val:(row)=>{
                                if(row.length){
                                    return <div className="open-orders-actions">
                                        {(trade&&trade.closeGroup)&&<Dropdown
                                            ref = {e => this.closeDropGroup = e}
                                            data={(<ul className="list-box">
                                                <li>
                                                    <Confirm
                                                        onClick={() => {
                                                            closeAllGroupOrder(row)
                                                            this.closeDropGroup.hide();
                                                        }}
                                                        type={close_all?'dropdown':'self'}
                                                        approveText={<Lang>CONFIRM_APPROVE</Lang>}
                                                        cancelText={<Lang>CONFIRM_CANCEL</Lang>}
                                                        desc={<Lang>CONFIRM_CLOSE_GROUP_ORDER</Lang>}
                                                    >
                                                        <a><Lang>CLOSE_ALL_GROUP</Lang></a>
                                                    </Confirm>
                                                </li>
                                            </ul>)}
                                            position="left"
                                        >
                                            <button>
                                                <IconMore className="icon-sm"/>
                                                </button>
                                        </Dropdown>}
                                    </div>
                                }
                                return <div className="open-orders-actions">

                                    {(trade&&trade.addChart)&&
                                    <Tooltip position="top" data={<Lang>ORDER_TO_CHART</Lang>}>
                                        <Confirm
                                            onClick={()=>{
                                                addOrderToChart(row)
                                            }}
                                            type={double?'dropdown':'self'}
                                            approveText={<Lang>CONFIRM_APPROVE</Lang>}
                                            cancelText={<Lang>CONFIRM_CANCEL</Lang>}
                                            desc={<Lang>CONFIRM_REVERSE_ORDER</Lang>}
                                        >
                                            <button onClick={()=>{
                                                addOrderToChart(row)
                                            }}>
                                                <IconChart className="icon-sm"/>
                                            </button>
                                        </Confirm>
                                    </Tooltip>}
                                    {(trade && trade.doubleOpen)&&
                                    <Tooltip position="top" data={<Lang>DOUBLE_UP_POSITION</Lang>}>
                                        <Confirm
                                            onClick={()=>{
                                                openOrder(row)
                                            }}
                                            type={double?'dropdown':'self'}
                                            approveText={<Lang>CONFIRM_APPROVE</Lang>}
                                            cancelText={<Lang>CONFIRM_CANCEL</Lang>}
                                            desc={<Lang>CONFIRM_REVERSE_ORDER</Lang>}
                                        >
                                            <button>
                                                <IconCopy className="icon-sm"/>
                                            </button>
                                        </Confirm>
                                    </Tooltip>}
                                    {(trade && trade.reverseOpen)&&
                                    <Tooltip position="top" data={<Lang>REVERSE_POSITION</Lang>}>
                                        <Confirm
                                            onClick={()=>{
                                                reverseOrder(_.clone(row))
                                            }}
                                            type={reverse?'dropdown':'self'}
                                            approveText={<Lang>CONFIRM_APPROVE</Lang>}
                                            cancelText={<Lang>CONFIRM_CANCEL</Lang>}
                                            desc={<Lang>CONFIRM_REVERSE_ORDER</Lang>}
                                        >
                                            <button>
                                                <IconReverse className="icon-sm"/>
                                            </button>
                                        </Confirm>
                                    </Tooltip>}

                                    <Tooltip position="left" data={<Lang>CLOSE_ORDER</Lang>}>
                                        <Confirm
                                            onClick={()=>{
                                                closeOrder(row)
                                            }}
                                            type={close?'dropdown':'self'}
                                            approveText={<Lang>CONFIRM_APPROVE</Lang>}
                                            cancelText={<Lang>CONFIRM_CANCEL</Lang>}
                                            desc={<Lang>CONFIRM_CLOSE_ORDER</Lang>}
                                        >
                                            <button className="icon-red">
                                                <IconClose className="icon-sm"/>
                                            </button>
                                        </Confirm>
                                    </Tooltip>
                                </div>
                            }
                        }
                    }
                }/>
            </div>
        )
    }
}