import React, {Component} from "react";
import classNames from "classnames";
import {Provider} from 'sbx-react-core';
import {getMarketStats, getMarketHistory} from "actions/Market";
import {getOrdersPercentage} from "libs/Orders";
import Chart from "sbx-react-micro-chart";

import Lang from 'components/Language';

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

export default class Performance extends Component {
    state = {
        data: false,
        history: [],
        isFetching: true
    };
    componentDidMount() {
        getMarketStats(this.props.symbol)
            .then(resp => {
                this.setState({
                    isFetching: false,
                    data: resp.data.stats
                })
            });
        getMarketHistory(this.props.symbol, 60 * 60, 24)
            .then(resp => {
                let history = [];
                resp.data.data.forEach(item => {
                    history.push(item[0]);
                });
                this.setState({history})
            })
    }
    render() {
        const {symbol, assets, quote: {ask, bid}} = this.props;
        const {data, history, isFetching} = this.state;
        if(isFetching) return null;
        const {day, week, month, month3, month6, year} = data;
        const price = (ask + bid)/2;
        const d_d = price - day['first'];
        const d_r = d_d/day['first'] * 100;
        const w_d = price - week['first'];
        const w_r = w_d/week['first'] * 100;
        const m_d = price - month['first'];
        const m_r = m_d/month['first'] * 100;
        const m3_d = price - month3['first'];
        const m3_r = m3_d/month3['first'] * 100;
        const m6_d = price - month6['first'];
        const m6_r = m6_d/month6['first'] * 100;
        const y_d = price - year['first'];
        const y_r = y_d/year['first'] * 100;
        const [sellers, buyers] = getOrdersPercentage(symbol);
        return (
            <div className="performance">
                <div className="performance-row">
                    <table className="market-stats">
                        <thead>
                        <tr>
                            <th/>
                            <th>1D</th>
                            <th>1W</th>
                            <th>1M</th>
                            <th>3M</th>
                            <th>6M</th>
                            <th>1Y</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>
                                <Lang>INFO_PRICE_CHANGE_TITLE</Lang>
                            </td>
                            <td>
                                {`${d_d.toFixed(2)}`}
                            </td>
                            <td>
                                {`${w_d.toFixed(2)}`}
                            </td>
                            <td>
                                {`${m_d.toFixed(2)}`}
                            </td>
                            <td>
                                {`${m3_d.toFixed(2)}`}
                            </td>
                            <td>
                                {`${m6_d.toFixed(2)}`}
                            </td>
                            <td>
                                {`${y_d.toFixed(2)}`}
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <Lang>INFO_PRICE_CHANGE</Lang>
                            </td>
                            <td className={classNames({
                                "text-green": d_r > 0,
                                "text-red": d_r < 0
                            })}>
                                {`${d_r.toFixed(2)} %`}
                            </td>
                            <td className={classNames({
                                "text-green": w_r > 0,
                                "text-red": w_r < 0
                            })}>
                                {`${w_r.toFixed(2)} %`}
                            </td>
                            <td className={classNames({
                                "text-green": m_r > 0,
                                "text-red": m_r < 0
                            })}>
                                {`${m_r.toFixed(2)} %`}
                            </td>
                            <td className={classNames({
                                "text-green": m3_r > 0,
                                "text-red": m3_r < 0
                            })}>
                                {`${m3_r.toFixed(2)} %`}
                            </td>
                            <td className={classNames({
                                "text-green": m6_r > 0,
                                "text-red": m6_r < 0
                            })}>
                                {`${m6_r.toFixed(2)} %`}
                            </td>
                            <td className={classNames({
                                "text-green": y_r > 0,
                                "text-red": y_r < 0
                            })}>
                                {`${y_r.toFixed(2)} %`}
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div className="performance-row">
                    <div className="title">
                        <Lang>INFO_PRICE_SENTIMENT</Lang>
                    </div>
                    <div className="market-sentiment">
                        <div className="market-sentiment-chart">
                            <div className="chart chart-sellers" style={{width: sellers}}/>
                            <div className="chart chart-buyers" style={{width: buyers}}/>
                        </div>
                        <div className="market-sentiment-total">
                            <div className="total total-sellers">
                                {sellers}
                            </div>
                            <div className="total total-buyers">
                                {buyers}
                            </div>
                        </div>
                    </div>
                </div>
                {
                    assets[symbol].mode === 0 && (
                        <div className="performance-row">
                            <div className="title">
                                <Lang>INFO_PRICE_HEATMAP</Lang>
                            </div>
                        </div>
                    )
                }
                <div className="performance-row">
                    <div className="title">
                        <Lang>CHART</Lang>
                    </div>
                    <div className="history-chart">
                        <Chart
                            data={history}
                            stroke={d_d > 0 ? ["#26b276"] : ["#f73e4a"]}
                            strokeWidth={0.5}
                            gradient={d_d > 0 ? ["rgba(11,178,118,0.7)", "rgba(11,178,118,0.01)"] : ["rgba(247,80,74,0.7)", "rgba(247,80,74,0.01)"]}
                            height={40}
                        />
                    </div>
                </div>
            </div>
        )
    }
}