import React, { Component } from 'react';

import { HorizontalBar } from 'react-chartjs-2'

import { formatMoney, formatNumber } from "lib/i18n";
import { injectIntl } from 'react-intl';


//TODO move somewhere else
const _colors = ["#f79239", "#4ec3e0", "#1287ed", "#929ba3", "#678096", "#5beeff"];

function colors(summary) {
	return {
		borderColor: summary,
		backgroundColor: summary,
		pointBorderColor: summary,
		pointBackgroundColor: summary,
		pointHoverBackgroundColor: summary,
		pointHoverBorderColor: summary,
	};
}


class PaymentStats extends Component {


	renderChart(params) {
		return JSON.stringify(this.props.chart);
	}


	render() {
		let { stats = {}, status, currency, i18n, intl } = this.props;

		return (
			<div>
				<div className="row row-margin-10">
					<div className="col-sm-6 p10 summary-panel">

						<div className="summary-row">
							<div className="value">{ formatMoney(stats.total, currency, i18n) }</div>  
							<div className="label">{ intl.formatMessage({ id: "payment.stats.total" }) }</div>	
						</div>
						<div className="summary-row">
							<div className="value">{ formatMoney(stats.paid, currency, i18n) }</div>  
							<div className="label">{ intl.formatMessage({ id: "payment.stats.paid" }) }</div>	
						</div>
						<div className="summary-row">
							<div className="value">{ formatMoney(stats.pending, currency, i18n) }</div>  
							<div className="label">{ intl.formatMessage({ id: "payment.stats.pending" }) }</div>	
						</div>
						<div className="summary-row">
							<div className="value">{ formatMoney(stats.overdue, currency, i18n) }</div>  
							<div className="label">{ intl.formatMessage({ id: "payment.stats.overdue" }) }</div>	
						</div>
						{ this.renderChart(this.props.chart) }
					</div>
				</div>
			</div>
		);
	}

}


export default injectIntl(PaymentStats);