import "./AssetInfo.scss";

import React, {Component} from "react";
import classNames from "classnames";
import {Provider} from 'sbx-react-core';
import {getPipsForVolume, getOrderSwap, getOrderCommission} from "libs/Orders";
import {getMarketInfo} from "actions/Market";
import Performance from "./Performance";
import AssetActions from "containers/Market/components/AssetActions";
import {getAssetSwap} from "libs/Assets";
import {getLeverageByPercent} from "libs/Orders";

import Lang from 'components/Language';

@Provider({
    asset: props => ['assets', props.symbol],
    quote: props => ['feed', props.symbol],
    user: ['profile', 'accounts']
})

export default class AssetInfo extends Component {
    state = {
        viewType: "basic",
        isFetching: true,
        tradePeriods: false,
        info: false
    };
    componentDidMount() {
        const {symbol} = this.props;
        getMarketInfo(symbol)
            .then(resp => {
                this.setState({
                    isFetching: false,
                    tradePeriods: resp['marketHours'],
                    info: resp
                })
            })
    }
    changeView = view => {
        const {viewType} = this.state;
        if(viewType === view) return false;
        this.setState({viewType: view})
    };
    formatTime = time => {
        if(!time && time !== 0) return '-';
        return time > 9 ? time : `0${time}`
    };


    renderTradePeriods = () => {
        const {tradePeriods} = this.state;
        return Object.keys(tradePeriods).map(item => {
            return (
                <div className="tradePeriods" key={Math.random().toString(24)}>
                    <span className="tradePeriods-title">{item}</span>
                    <div className="tradePeriods-list">
                        {
                            !tradePeriods[item].length && <div className="tradePeriods-list-empty">-</div>
                        }
                        {
                            tradePeriods[item].map(({start, end}) => {
                                return (
                                    <span className="tradePeriods-list-item" key={Math.random().toString(24)}>
                                        {`${this.formatTime(start[0])}:${this.formatTime(start[1])}`}
                                         -
                                        {`${this.formatTime(end[0])}:${this.formatTime(end[1])}`}
                                    </span>
                                )
                            })
                        }
                    </div>
                </div>
            )
        })
    };
    render() {
        const {asset, quote: {ask, bid}, user, symbol} = this.props;
        const {viewType, isFetching, info} = this.state;
        const pipValue = getPipsForVolume({symbol, volume: asset['volumeMin'], ask, bid});
        const swap = getOrderSwap({symbol, ask, bid, volume: asset['volumeMin']});
        const profileCurrency = user[0].currency;
        const commission = getOrderCommission({
            resultAt: 'string',
            asset,
            profileCurrency
        });
        return (
            <>
                <AssetActions
                    symbol={symbol}
                    actions={['chart', 'favourites']}
                />
                <div className="asset-info">
                    <div className="modal-tabs">
                        <div className={classNames({
                            "modal-tabs-item": true,
                            "active": viewType === "basic"
                        })} onClick={() => {
                            this.changeView("basic")
                        }}>
                            <Lang>
                                INFO_TITLE_BASIC
                            </Lang>
                        </div>
                        <div className={classNames({
                            "modal-tabs-item": true,
                            "active": viewType === "performance"
                        })} onClick={() => {
                            this.changeView("performance")
                        }}>
                            <Lang>
                                INFO_TITLE_PERFORMANCE
                            </Lang>
                        </div>
                    </div>
                    <div className="asset-info-body">
                        {
                            !isFetching && viewType === "basic" && (
                                <>
                                    <div className="asset-info-col">
                                        <div className="asset-info-row">
                                            <div className="box">
                                                <div className="title">
                                                    <Lang>INFO_ASSET_CLASS</Lang>
                                                </div>
                                                <div className="value">{asset.groups[0]}</div>
                                            </div>
                                            {asset.groups[1]&&<div className="box">
                                                <div className="title">
                                                    <Lang>INFO_ASSET_SUBCLASS</Lang>
                                                </div>
                                                <div className="value">{asset.groups[1]}</div>
                                            </div>}
                                        </div>
                                        <div className="asset-info-row">
                                            <div className="box">
                                                <div className="title">
                                                    <Lang>INFO_PIP_SIZE</Lang>
                                                </div>
                                                <div className="value">{pipValue.toFixed(4)}</div>
                                            </div>
                                            <div className="box">
                                                <div className="title">
                                                    <Lang>INFO_LOT_VALUE_SIZE</Lang>
                                                </div>
                                                <div className="value">{`${asset['contract_size']} ${asset.currency}`}</div>
                                            </div>
                                        </div>
                                        <div className="asset-info-row">
                                            <div className="box">
                                                <div className="title">
                                                    <Lang>INFO_MIN_SIZE</Lang>
                                                </div>
                                                <div className="value">{asset['volumeMin']}</div>
                                            </div>
                                            <div className="box">
                                                <div className="title">
                                                    <Lang>INFO_MAX_SIZE</Lang>
                                                </div>
                                                <div className="value">{asset['volumeMax']}</div>
                                            </div>
                                        </div>
                                        <div className="asset-info-row">
                                            <div className="box">
                                                <div className="title">
                                                    <Lang>INFO_COMMISSION</Lang>
                                                </div>
                                                <div className="value">{commission}</div>
                                            </div>
                                            <div className="box">
                                                <div className="title">
                                                    <Lang>INFO_LEVERAGE</Lang>
                                                </div>
                                                <div className="value">
                                                    {!asset['percentage'] && 0}
                                                    {/*(${(100/asset['percentage']).toFixed(2)}%)*/}
                                                    {asset['percentage'] && `1/${info.leverage}`}
                                                </div>
                                            </div>
                                        </div>
                                        <div className="asset-info-row">
                                            <div className="box">
                                                <div className="title">
                                                    <Lang>INFO_DAILY_SWAP</Lang>
                                                </div>
                                                <div className="value"><Lang>LONG</Lang>{`: ${getAssetSwap({data: info, type: "long"})}`}</div>
                                                <div className="value"><Lang>SHORT</Lang>{`: ${getAssetSwap({data: info, type: "short"})}`}</div>
                                            </div>
                                            <div className="box">
                                                <div className="title">
                                                    <Lang>INFO_EXPIRATION</Lang>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div className="asset-info-col">
                                        <div className="asset-info-row">
                                            <div className="box">
                                                <div className="title">
                                                    <Lang>INFO_MARKETS_HOURS</Lang>
                                                </div>
                                                <div className="value">{this.renderTradePeriods()}</div>
                                            </div>
                                        </div>
                                    </div>
                                </>
                            )
                        }
                        {
                            !isFetching && viewType === "performance" && <Performance symbol={symbol}/>
                        }
                    </div>
                </div>
            </>
        )
    }
}