import React, { Component } from 'react';
import PropTypes from 'prop-types';
import ChangePill from '../ChangePill';
import Numbro from '../Numbro';

import * as styles from './Style.less';

export default class MetricValue extends Component {
	static propTypes = {
		title: PropTypes.string.isRequired,
		subheading: PropTypes.string,
		value: PropTypes.number,
		change: PropTypes.number,
		signal: PropTypes.object
	};

	static defaultProps = {
		subheading: null,
		value: null,
		change: null,
		signal: {}
	};

	render() {
		return (
			<div className={styles.Metric}>
				<h1>
					{this.props.title}
				</h1>
				<div className={styles.Value}>
					<div>
						<h3>
							{Numbro.format(this.props.value, this.props.signal.Format || '0,0')}
						</h3>
					</div>
					<div>
						<ChangePill
							value={this.props.change}
							format={this.props.signal.Format || '0,0'}
							positive={this.props.signal.Positive || 'high'}
						/>
					</div>
				</div>
				{
					this.props.subheading && (
						<h5>
							{this.props.subheading}
						</h5>
					)
				}
			</div>
		);
	}
}
