import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
	Label as SemanticLabel,
	Icon as SemanticIcon
} from 'semantic-ui-react';
import Numbro from '../Numbro';

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

export default class ChangePill extends Component {
	static propTypes = {
		value: PropTypes.number,
		format: PropTypes.string,
		positive: PropTypes.string.isRequired
	};

	static defaultProps = {
		value: null,
		format: '0,0'
	};

	render() {
		let changeColor = 'grey';
		let { value } = this.props;

		// Format, then unformat, so we can make decision based on displayed value
		// i.e. raw value of 0.001, with format "0,0", shows as 0
		//      so display calculations (green / red / grey, arrow dir, etc) should be based on 0 not 0.001
		if (value !== null && !Number.isNaN(value)) {
			value = Numbro.format(value, this.props.format);
		} else {
			value = null;
		}

		value = Numbro.unformat(value);

		if (
			(this.props.positive === 'high' && value < 0)
			|| (this.props.positive === 'low' && value > 0)
		) {
			changeColor = 'red';
		} else if (
			(this.props.positive === 'high' && value > 0)
			|| (this.props.positive === 'low' && value < 0)
		) {
			changeColor = 'green';
		}

		return (
			<SemanticLabel
				color={changeColor}
				className={styles.ChangePill}
			>
				{
					value !== null && value !== 0 ? (
						<>
							<SemanticIcon
								name={`arrow ${value > 0 ? 'up' : 'down'}`}
							/>
							{Numbro.format(value > 0 ? value : Math.abs(value), this.props.format)}
						</>
					) : (
						<>
							<SemanticIcon
								name="minus"
							/>
						</>
					)
				}
			</SemanticLabel>
		);
	}
}
