import "./style/MiniTradePanel.scss";

import React, {Component} from "react";
import {Provider, Emitter, Global} from 'sbx-react-core';
import Modal from 'sbx-react-modal';
import Price from 'sbx-react-price';
import Tooltip from "sbx-react-tooltip";

import classNames from "classnames";
import {calcResidual} from "helpers/Math";
import {validatePrice} from "helpers/Validate";
import AssetActions from "containers/Market/components/AssetActions";
import AssetDirection from "containers/Market/components/AssetDirection";
import {openOrder} from "actions/Orders";
import TradePanel from "containers/TradePanel/TradePanel";

import Lang from 'components/Language';

import IconUp from './images/up.svg?jsx';
import IconDown from './images/down.svg?jsx';

@Provider({
    asset: props => ['assets', props.symbol],
    quote: props => ['feed', props.symbol],
    confirmations: ["settings", "confirmations"]
})

export default class MiniTradePanel extends Component {
    state = {
        // volume: Global.activeLots[this.props.asset.groups[0]] ||this.props.asset['volumeMin'],
        volume: this.props.asset['volumeMin'],
        volumeIsInvalid: false,
        isFocused: false,
        isExpanded: false,
        sl: 0,
        tp: 0
    };
    validateVolume = volume => {
        const {volumeMin, volumeMax, volumeStep} = this.props.asset;
        const floatValue = parseFloat(volume);
        return (
            !volume.length ||
            volume[volume.length - 1] === '.' ||
            floatValue < volumeMin ||
            floatValue > volumeMax ||
            calcResidual(floatValue , volumeStep)
        )
    };
    onInput = e => {
        e.stopPropagation();
        e.preventDefault();
        const {value} = e.target;
        if(validatePrice(value)) {
            this.setState({
                volume: value,
                volumeIsInvalid: this.validateVolume(value)
            });
        }
    };
    onFocus = (e) => {
        e.stopPropagation();
        e.preventDefault();
        this.setState({isFocused: true})
    };
    onBlur = (e) => {
        e.stopPropagation();
        e.preventDefault();
        const {volumeIsInvalid} = this.state;
        if(volumeIsInvalid) {
            this.setState({volume: this.props.asset['volumeMin'], volumeIsInvalid: false})
        }
        this.setState({isFocused: false})
    };

    onMouseEnter = () => {
        this.setState({isExpanded: true})
    };

    onMouseLeave = () => {
        this.setState({isExpanded: false})
    };

    calc = (valueStep, next) => {
        const digits = String(valueStep).split('.')[1] ? String(valueStep).split('.')[1].length : 0;
        if(digits && String(next).split('.')[1]) {
            let left = String(next).split('.')[0];
            let right = String(next).split('.')[1];
            right = right.substring(0, digits);
            return parseFloat(left.concat('.', right)).toFixed(digits);
        } else {
            return next
        }
    };


    changeVolume = type => {
        const {volumeMin, volumeMax, volumeStep, groups} = this.props.asset;
        const {volume} = this.state;
        const floatVolume = parseFloat(volume);
        let nextVolume = 0;
        const digits = String(volumeStep).split('.')[1] ? String(volumeStep).split('.')[1].length : 0;

        if(type === "minus") {
            if(floatVolume <= volumeMin || (floatVolume - volumeStep) <= volumeMin || isNaN(floatVolume)) {
                nextVolume = volumeMin
            } else {
                nextVolume = Math.floor((floatVolume * (10 ** digits))/(volumeStep * (10 ** digits)) - 1) * volumeStep;
            }
        }
        if(type === "plus") {
            if(floatVolume >= volumeMax || (floatVolume + volumeStep) >= volumeMax || isNaN(floatVolume)) {
                nextVolume = volumeMax
            } else {
                nextVolume = Math.round((floatVolume * (10 ** digits))/(volumeStep * (10 ** digits)) + 1) * volumeStep;
            }
        }
        nextVolume = this.calc(volumeStep, nextVolume);
        this.setState({volume: nextVolume});
    };

    getDayChange = () => {
        const {ask, bid} = this.props.quote;
        const openPrice = this.props.asset.ohlc[0];
        const price = (ask + bid)/2;
        let d_d = price - openPrice;
        return d_d/openPrice * 100;
    };

    onSubmit = cmd => {
        const {symbol, asset: {marketState}} = this.props;
        const {volume, sl, tp, volumeIsInvalid} = this.state;
        if(marketState === "open" && !volumeIsInvalid) {
            return openOrder({
                symbol,
                volume,
                cmd,
                sl,
                tp
            })
        }
    };

    showOrderModal = cmd => {
        const {symbol, asset: {marketState}} = this.props;
        const {volume, sl, tp, volumeIsInvalid} = this.state;
        if(marketState === "open") {
            this.orderModal.show({
                symbol,
                volume,
                cmd,
                sl,
                tp
            });
        }
    };

    render() {
        const {confirmations = {}} = this.props;

        const {digits, symbol, marketState, groups} = this.props.asset;
        let {ask, bid, high, low} = this.props.quote;
        let {micro} = this.props;
        let {volume, volumeIsInvalid, isFocused, isExpanded} = this.state;
        let dayChange = this.getDayChange();

        return (
            <div className="miniTradePanel">
                <Modal
                    ref={e => this.orderModal = e}
                    size="md"
                    title={
                        <div className="modal-title">
                            <img src={`/static/images/icon/${symbol}.png`} className="icon-lg mr-sm"  alt={symbol}/>
                            <div className="symbol">{symbol}</div>
                            <div className="group">{groups[0].substring(0, 2)}</div>
                        </div>
                    }
                    className="modal"
                >
                    {(data, hide) => <TradePanel hide={hide} order={data} formType="open"/>}
                </Modal>

                <div className="miniTradePanel-head" onClick={this.props.onHide}>
                    <AssetDirection symbol={symbol}/>
                    <AssetActions
                        symbol={symbol}
                        actions={['info', 'chart', 'favourites']}
                    />
                </div>
                <div className={`miniTradePanel-body ${micro&&'miniTradePanel-body-hide'}`}>
                    <div className="miniTradePanel-box miniTradePanel-box-left">
                        <div
                            className={classNames({
                                "tradeButton": true,
                                "button-sell": true,
                                "disabled": marketState !== "open"
                            })}
                              onClick={e => {
                                  e.stopPropagation();
                                  e.preventDefault();
                                  if(!confirmations["open"]) {
                                      this.onSubmit(1)
                                  } else {
                                      this.showOrderModal(1)
                                  }
                              }}
                        >
                            <div className="tradeButton-title">
                                <Lang>SELL</Lang>
                            </div>
                            <div className="tradeButton-quote">
                                <Price digits={digits}>{bid}</Price>
                                <IconDown className="icon-md "/>
                            </div>
                            <div className="tradeButton-stat">
                                <Lang>LOW</Lang>: {low.toFixed(digits)}
                            </div>
                        </div>
                    </div>
                    <div
                        className={classNames({
                            "miniTradePanel-box": true,
                            "miniTradePanel-box-center": true
                        })}
                    >
                        <div
                            onMouseEnter={this.onMouseEnter}
                            onMouseLeave={this.onMouseLeave}
                            className={classNames({
                                "tradePanel-input": true,
                                "invalid": volumeIsInvalid && isFocused,
                                "valid": !volumeIsInvalid && isFocused,
                                "expanded": isExpanded
                            })}>
                            {
                                isExpanded && (
                                    <div className="tradePanel-input-button minus" onClick={e => {
                                        e.preventDefault();
                                        e.stopPropagation();
                                        Emitter.emit('sound','click');
                                        this.changeVolume('minus')
                                    }}>
                                        -
                                    </div>
                                )
                            }
                            <input
                                type="text"
                                onInput={this.onInput}
                                onClick={e => {
                                    e.stopPropagation();
                                    e.preventDefault();
                                }}
                                value={volume}
                                onFocus={this.onFocus}
                                onBlur={this.onBlur}
                            />
                            {
                                isExpanded && (
                                    <div className="tradePanel-input-button plus" onClick={e => {
                                        e.stopPropagation();
                                        e.preventDefault();
                                        Emitter.emit('sound','click');
                                        this.changeVolume('plus')
                                    }}>
                                        +
                                    </div>
                                )
                            }
                            <Tooltip
                                data={<Lang>DAILY_CHANGE</Lang>}
                                position="bottom"
                            >
                                <div className={classNames({
                                    "tradePanel-info": true,
                                    "tradePanel-info-bottom": true,
                                    "text-red": dayChange < 0,
                                    "text-green": dayChange > 0
                                })}>
                                    {dayChange.toFixed(2) + '%'}
                                </div>
                            </Tooltip>
                        </div>
                    </div>
                    <div className="miniTradePanel-box miniTradePanel-box-right">
                        <div
                            className={classNames({
                                "tradeButton": true,
                                "button-buy": true,
                                "disabled": marketState !== "open"
                            })}
                             onClick={e => {
                                 e.stopPropagation();
                                 e.preventDefault();
                                 if(!confirmations["open"]) {
                                     this.onSubmit(0)
                                 } else {
                                     this.showOrderModal(0)
                                 }
                             }}
                        >
                            <div className="tradeButton-title">
                                <Lang>BUY</Lang>
                            </div>
                            <div className="tradeButton-quote">
                                <IconUp className="icon-md"/>
                                <Price digits={digits}>{ask}</Price>
                            </div>
                            <div className="tradeButton-stat">
                                <Lang>HIGH</Lang>: {high.toFixed(digits)}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}