import withLanguage from 'Components/utils/withLanguage'
import React, { Component } from 'react'
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
import './AnimatedTargetValue.css'

export default withLanguage(
	class AnimatedTargetValue extends Component {
		render() {
			let { value, language } = this.props
			let formattedValue =
				value == null
					? ''
					: Intl.NumberFormat(language, {
							style: 'currency',
							currency: 'EUR',
							maximumFractionDigits: 0,
							minimumFractionDigits: 0
					  }).format(value)
			return (
				<ReactCSSTransitionGroup
					transitionName="flash"
					transitionEnterTimeout={100}
					transitionLeaveTimeout={100}>
					<span key={value} className="Rule-value">
						{' '}
						<span>{formattedValue}</span>
					</span>
				</ReactCSSTransitionGroup>
			)
		}
	}
)