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

import classNames from 'classnames';

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

import { getPendingOrders, closeOrder, closeAllOrder, closeAllGroupOrder } from 'actions/Orders';

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';

import IconClose from './images/close.svg?jsx';
import IconMore from './images/more.svg?jsx';
import IconNote from './images/note.svg?jsx';


@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]&&assets[order.symbol].digits)}</div>
    }
}

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

    constructor(props){
        super(props);
        getPendingOrders()
    }

    render() {
        let {pendingOrders, assets, settings} = this.props;
        let {close, close_all, close_group, double, reverse} = settings.confirmations;


        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
                    name="pending"
                    rows= {pendingOrders}
                    groupBy = "symbol"
                    config = {{
                        order: ['symbol', 'ASC']
                    }}
                    onRowClick={(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_PENDING_ORDER_TITLE</Lang>: {row.symbol}</div>
                            </div>
                        );
                        Emitter.emit('sound','tab');
                    }}

                    structure= {{
                        symbol: {
                            name: <Lang>PENDING_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] && 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>,
                            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+settings.serverUTCTimeOffset):toDateTimeUTC(row.open_time+settings.serverUTCTimeOffset)}</div>
                            }
                        },
                        type: {
                            name: <Lang>TYPE</Lang>,
                            val(row){
                                return !row.length &&<div className={classNames({
                                    "text-md text-weight-xlg":row.length,
                                    "text-sm text-gray":!row.length,
                                    "badge": true,
                                    "badge-sell": !orderIsBuy(row.cmd),
                                    "badge-buy": orderIsBuy(row.cmd)
                                })}><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 + (!orderIsBuy(b.cmd)?-b.volume:b.volume)
                                }, 0):row.volume)}</div>
                            }
                        },
                        open_price: {
                            name: <Lang>ACTIVATION_PRICE</Lang>,
                            val(row){
                                return <div>{row.open_price}</div>
                            }
                        },
                        close_price: {
                            name: <Lang>MARKET_PRICE</Lang>,
                            val(row){
                                return !row.length&& <MarketPrice collapse={row.length} order={row}/>
                            }
                        },
                        sl: {
                            name: <Lang>SL_PRICE</Lang>
                        },
                        tp: {
                            name: <Lang>TP_PRICE</Lang>
                        },
                        action: {
                            name: (structure) => {
                                return settings.trade&&settings.trade.closeAll&&<Dropdown
                                    ref = {e => this.closeDrop = e}
                                    data={(<ul className="list-box">
                                        <li>
                                            <Confirm
                                                onClick={() => {
                                                    closeAllOrder('pending')
                                                        .then(()=>{
                                                            this.closeDrop.hide();
                                                        })
                                                }}
                                                type={close_all?'dropdown':'self'}
                                                approveText={<Lang>CONFIRM_APPROVE</Lang>}
                                                cancelText={<Lang>CONFIRM_DELETE</Lang>}
                                                desc={<Lang>CONFIRM_DELETE_ALL_ORDER</Lang>}
                                            >
                                                <a><Lang>CLOSE_ALL</Lang></a>
                                            </Confirm>
                                        </li>
                                    </ul>)}
                                    position="bottom_right"
                                ><button className="btn btn-red btn-xs"><Lang>DELETE</Lang></button>
                                </Dropdown>
                            },
                            val:(row)=>{
                                if(row.length){
                                    return <div className="open-orders-actions">
                                        {(settings.trade&&settings.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_DELETE</Lang>}
                                                        desc={<Lang>CONFIRM_DELETE_GROUP_ORDER</Lang>}
                                                    >
                                                        <a><Lang>DELETE_ALL_GROUP</Lang></a>
                                                    </Confirm>
                                                </li>
                                            </ul>)}
                                            position="left"
                                        >
                                            <button><IconMore className="icon-sm"/></button>
                                        </Dropdown>}
                                    </div>
                                }
                                return <div className="open-orders-actions">
                                    <Tooltip position="left" data={<Lang>DELETE_ORDER</Lang>}>
                                        <Confirm
                                            onClick={() => {
                                                closeOrder(row)
                                            }}
                                            type={close_all?'dropdown':'self'}
                                            approveText={<Lang>CONFIRM_APPROVE</Lang>}
                                            cancelText={<Lang>CONFIRM_DELETE</Lang>}
                                            desc={<Lang>CONFIRM_DELETE_ALL_ORDER</Lang>}
                                        >
                                            <button className="icon-red">
                                                <IconClose className="icon-sm"/>
                                            </button>
                                        </Confirm>
                                    </Tooltip>
                                </div>
                            }
                        }

                    }}/>

            </div>
        )
    }
}