import withColours from 'Components/utils/withColours'
import withSitePaths from 'Components/utils/withSitePaths'
import { compose } from 'ramda'
import React from 'react'
import emoji from 'react-easy-emoji'
import { useSelector } from 'react-redux'
import { Link } from 'react-router-dom'
import { analysisWithDefaultsSelector } from 'Selectors/analyseSelectors'
import './Targets.css'

export default compose(
	withColours,
	withSitePaths
)(function Targets({ colours, sitePaths }) {
	const analysis = useSelector(analysisWithDefaultsSelector)
	let { nodeValue, unité: unit, dottedName } = analysis.targets[0]
	return (
		<div id="targets">
			<span className="icon">→</span>
			<span className="content" style={{ color: colours.textColour }}>
				<span className="figure">
					<span className="value">{nodeValue?.toFixed(1)}</span>{' '}
					<span className="unit">{unit}</span>
				</span>
				<Link
					title="Quel est calcul ?"
					style={{ color: colours.colour }}
					to={sitePaths.documentation.index + '/' + dottedName}
					className="explanation">
					{emoji('📖')}
				</Link>
			</span>
		</div>
	)
})