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 MetricPercentile extends Component {
	static propTypes = {
		title: PropTypes.string.isRequired,
		value: PropTypes.number,
		change: PropTypes.number
	};

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

	render() {
		return (
			<div className={styles.Metric}>
				<h1>
					{this.props.title}
				</h1>
				<div className={styles.Value}>
					<div>
						<h3>
							{
								this.props.value !== null && this.props.value >= 0 ? (
									<>
										{Numbro.format(this.props.value, '0,0')}
										<span>
											{Numbro.nth(this.props.value, true)}
										</span>
									</>
								) : (
									'N/A'
								)
							}
						</h3>
					</div>
					<div>
						<ChangePill
							value={this.props.change}
							format="0,0"
							positive="high"
						/>
					</div>
				</div>
				<div className={styles.Quartile}>
					<div className={(this.props.value !== null && this.props.value <= 25) ? 'active' : ''} />
					<div className={(this.props.value > 25 && this.props.value < 50) ? 'active' : ''} />
					<div className={(this.props.value >= 50 && this.props.value < 75) ? 'active' : ''} />
					<div className={(this.props.value >= 75) ? 'active' : ''} />
				</div>
			</div>
		);
	}
}
