import React, { Component } from 'react';

import { formatMoney, formatNumber } from "lib/i18n";
import { LabeledValue } from "lib/components";

import { injectIntl } from 'react-intl';
import messages from './messages.js';


function formatDays(days, intl, format) {
	return isNaN(days) ? "-" : intl.formatMessage(messages.days, { days: format ? formatNumber(Math.abs(days)) : Math.abs(days), overdue: days >= 0 ? "true" : "false" })
}


class CustomerStats extends Component {


	render() {
		let { stats = {}, status, currency, i18n, intl, className } = this.props;
		return (
			<div className={ className }>
				<div className="row row-margin-10">
					<div className="col-xs-6 col-sm-3 p10 summary-panel">
						<div className="summary-row center">
							<LabeledValue label={ intl.formatMessage(messages.minInvoice) }>
								{ formatMoney(stats.min, currency, i18n) }
							</LabeledValue>
						</div>
						<div className="summary-row center">
							<LabeledValue label={ intl.formatMessage(messages.maxInvoice) }>
								{ formatMoney(stats.max, currency, i18n) }
							</LabeledValue>
						</div>
					</div>
					<div className="col-xs-6 col-sm-3 p10 summary-panel">
						<div className="summary-row center">
							<LabeledValue label={ intl.formatMessage(messages.avgInvoice) }>
								{ formatMoney(stats.avg, currency, i18n) }
							</LabeledValue>
						</div>
						<div className="summary-row center">
							<LabeledValue label={ intl.formatMessage(messages.totalAmount) } size="big">
								{ formatMoney(stats.total, currency, i18n) }
							</LabeledValue>
						</div>
					</div>

					<div className="col-xs-6 col-sm-3 p10 summary-panel">
						<div className="summary-row center">
							<LabeledValue label={ intl.formatMessage(messages.avgDueDays) }>
								{ formatDays(stats.avgPaidAfter, intl, true) }
							</LabeledValue>
						</div>
						<div className="summary-row center">
							<LabeledValue label={ intl.formatMessage(messages.invoicesCount) }>
								{ isNaN(stats.invoices) ? "-" : stats.invoices }
							</LabeledValue>
						</div>
					</div>
					<div className="col-xs-6 col-sm-3 p10 summary-panel">
						<div className="summary-row center">
							<LabeledValue label={ intl.formatMessage(messages.minDueDays) }>
								{ formatDays(stats.minPaidAfter, intl) }
							</LabeledValue>
						</div>

						<div className="summary-row center">
							<LabeledValue label={ intl.formatMessage(messages.maxDueDays) }>
								{ formatDays(stats.maxPaidAfter, intl) }
							</LabeledValue>
						</div>
					</div>
				</div>
			</div>
		);
	}

}


export default injectIntl(CustomerStats);