import "./AssetActions.scss";

import React, {Component} from "react";
import {Provider} from 'sbx-react-core';
import Icon from "sbx-react-icon";
import Tooltip from "sbx-react-tooltip";
import Dropdown     from 'sbx-react-dropdown';

import TradePanel from "containers/TradePanel/TradePanel";
import AssetInfo from "containers/Market/components/AssetInfo";
import Modal from "sbx-react-modal";
import classNames from "classnames";
import {addToFavourites, setChart} from "actions/Settings";
import InputStep from "components/InputStep";
import {validatePrice} from "helpers/Validate";

import Lang from 'components/Language';

const info = require('../../../../assets/icons/info.svg');
const candles = require('../../../../assets/icons/candles.svg');
const plus = require('../../../../assets/icons/plus.svg');
const star = require('../../../../assets/icons/star.svg');
const starGold = require('../../../../assets/icons/starGold.svg');
const close = require('../../../../assets/icons/close.svg');

@Provider({
    asset: props => ['assets', props.symbol]
})

class TpSl extends Component {
    state = {
        sl: this.props.sl || 0,
        tp: this.props.tp || 0,
        isActive: this.props.sl || this.props.tp
    };
    onChange = (stop, value) => {
        let isActive = true;
        if(!this.state.isActive && value > 0) {
            isActive = true
        }
        if(this.state.isActive && !value) {
            isActive = false
        }
        this.setState({[stop]: value, isActive}, () => {
            this.props.onChange && this.props.onChange(this.state)
        })
    };
    toggle = () => {
        const {isActive} = this.state;
        this.setState({isActive: !isActive}, () => {
            if(!this.state.isActive) {
                this.props.onChange && this.props.onChange({sl: 0, tp: 0})
            }
        })
    };
    render() {
        const {sl, tp, isActive} = this.state;
        return (
            <div className="tpsl">
                <div className="tpsl-title">
                    <Lang>MARKET_ACTIONS_SL</Lang>
                </div>
                <div className="tpsl-close" onClick={e => {
                    e.stopPropagation();
                    this.props.onHide()
                }}>
                    <Icon src={close}/>
                </div>
                <div className="tpsl-change">
                    <div className="tpsl-change-item">
                        <div className="label">SL</div>
                        <InputStep
                            className="input-tpsl"
                            value={sl}
                            valueMin={0}
                            valueMax={Infinity}
                            valueStep={0.1}
                            validate={validatePrice}
                            onChange={value => {
                                this.onChange('sl', value)
                            }}
                        />
                    </div>
                    <div className="tpsl-change-item">
                        <div className="label">TP</div>
                        <InputStep
                            className="input-tpsl"
                            value={tp}
                            valueMin={0}
                            valueMax={Infinity}
                            valueStep={0.1}
                            validate={validatePrice}
                            onChange={value => {
                                this.onChange('tp', value)
                            }}
                        />
                    </div>
                </div>
                <div className={classNames({
                    "tpsl-toggle": true,
                    "active": isActive
                })}>
                    <div className="label label-left">off</div>
                    <div
                        onClick={this.toggle}
                        className="toggle"
                    >
                        <div className="toggle-indicator"/>
                    </div>
                    <div className="label label-right">on</div>
                </div>
            </div>
        )
    }
}

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

export default class AssetActions extends Component {
    state = {
        stopsIsActive: false,
        stopsIsOpen: false,
    };
    sl = 0;
    tp = 0;
    constructor(props) {
        super(props);
        this.actions = {
            info: {
                icon: info,
                action: this.showInfo,
                tooltip: <Lang>ASSET_INFO</Lang>
            },
            chart: {
                icon: candles,
                action: this.openChart,
                tooltip: <Lang>OPEN_CHART</Lang>
            },
            openOrder: {
                icon: plus,
                action: this.showOpenOrder,
                tooltip: <Lang>OPEN_TICKET</Lang>
            },
            favourites: {
                icon: this.isFavourite() ? starGold : star,
                action: this.addToFavourites,
                tooltip: this.isFavourite() ? <Lang>REMOVE_FAVOURITE</Lang>:<Lang>ADD_FAVOURITE</Lang>
            },
            stops: {
                text: 'SL/TP',
                action: this.showStops,
                tooltip: 'Set Stop loss / Take profit for Click & Trade'
            }
        };
    }
    showInfo = () => {
        this.infoModal.show();
    };
    openChart = () => {
        return setChart(this.props.symbol)
    };
    showOpenOrder = () => {
        // this.tradeModal.show();
        this.infoModal.hide();
    };
    addToFavourites = () => {
        return addToFavourites(this.props.symbol)
    };
    isFavourite = () => {
        const {symbol, settings} = this.props;
        return Array.isArray(settings['favourites']) && settings['favourites'].includes(symbol);
    };
    showStops = () => {
        const {stopsIsOpen} = this.state;
        this.setState({stopsIsOpen: !stopsIsOpen})
    };
    render() {
        const {actions, symbol, volume, asset} = this.props;
        const {stopsIsActive} = this.state;
        const {sl, tp} = this;
        return (
            <div className="asset-actions">
                {/*<Modal*/}
                    {/*ref={e => this.tradeModal = e}*/}
                    {/*size="md"*/}
                    {/*title={*/}
                        {/*<div className="modal-title">*/}
                            {/*<img src={`/bundle/images/icon/${symbol}.png`} className="icon-lg mr-sm" alt={symbol}/>*/}
                            {/*<div className="symbol">{symbol}</div>*/}
                            {/*<div className="group">{asset.groups[0].substring(0, 2)}</div>*/}
                        {/*</div>*/}
                    {/*}*/}
                    {/*className="modal"*/}
                {/*>*/}
                    {/*{(data, hide) => <TradePanel hide={hide} order={{symbol, volume}} formType="open"/>}*/}
                {/*</Modal>*/}
                <Modal
                    ref={e => this.infoModal = e}
                    size="md"
                    title={
                        <div className="modal-title">
                            <img src={`/static/images/icon/${symbol}.png`} className="icon-lg mr-sm"  alt=""/>
                            <div className="symbol">{symbol}</div>
                            <div className="group">{asset.groups[0].substring(0, 2)}</div>
                        </div>
                    }
                    className="modal"
                >
                    {(data, hide) => <AssetInfo hide={hide} symbol={symbol}/>}
                </Modal>
                {
                    actions.map(item => {
                        return (
                            <Tooltip position="bottom" data={this.actions[item].tooltip}>
                                <div className={classNames({
                                    "asset-actions-item": true,
                                    "active": item === "stops" && stopsIsActive
                                })} onClick={e => {
                                    e.stopPropagation();
                                    this.actions[item].action(e);
                                    //this.props.onActionClick && this.props.onActionClick();
                                }}>
                                    {item !== "favourites" && this.actions[item].icon && <Icon src={this.actions[item].icon}/>}
                                    {item === "favourites" && this.actions[item].icon && <Icon src={this.isFavourite() ? starGold : star}/>}
                                    {item === "stops" && (
                                        <Dropdown
                                            positions="bottom"
                                            className="tpsl-dropdown"
                                            ref={e => this.dropdown = e}
                                            data={
                                                <div className="asset-actions-item-inner">
                                                    <TpSl
                                                        sl={sl}
                                                        tp={tp}
                                                        symbol={symbol}
                                                        onHide={() => {
                                                            this.setState({stopsIsOpen: false}, () => {
                                                                this.dropdown.hide()
                                                            });
                                                        }}
                                                        onChange={data => {
                                                            if(data.sl || data.tp) {
                                                                this.setState({stopsIsActive: true})
                                                            } else {
                                                                this.setState({stopsIsActive: false})
                                                            }
                                                            this.sl = data.sl;
                                                            this.tp = data.tp;
                                                            this.props.onChange(data)
                                                        }}
                                                    />
                                                </div>
                                            }
                                        >
                                            <span className="asset-actions-text">
                                                {this.actions[item].text}
                                            </span>
                                        </Dropdown>
                                    )}
                                </div>
                            </Tooltip>
                        )
                    })
                }
            </div>
        )
    }
}