import React, { Component } from 'react'
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
import {themeColour, textColour, lighterTextColour} from '../themeColours'

let Figure = ({figure, title}) =>
	<ReactCSSTransitionGroup
			transitionName="flash"
			transitionEnterTimeout={100}
			transitionLeaveTimeout={100}
			>
			<span key={figure} className="figure" title={title} style={{color: textColour}} >
				{figure} €
			</span>
		</ReactCSSTransitionGroup>

export default class Summary extends Component {
	render() {
		let
			{
				results,
				results: {
					salaire_super_brut, cout_du_travail,
				},
				typeEntreprise, typeSalaireEntré,
				humanizeFigures: humanize,
				toggleSection,
				showDetails,
			} = this.props,
			labelTypeEntreprise = {
				'entreprise_est_association_non_lucrative': 'association',
				'entreprise': 'entreprise',
			}[typeEntreprise],
			correspondanceSalaires = {
				'net': [ 'brut', 'Salaire brut', 'salaire_de_base' ],
				'brut': [ 'net', 'Salaire net', 'salaire_net_a_payer' ],
			}[typeSalaireEntré],
			[ salaireTitle, salaireDescription, salaireVariable ] = correspondanceSalaires,
			salaireFigure = results[salaireVariable],
			paragraphBorderStyle = {borderColor: textColour},
			buttonStyle = {borderColor: textColour, color: textColour}

		return (
			<div className="simulation-summary">
				<div className="content" style={{background: themeColour, color: lighterTextColour}}>
					<div className="figures">
						<p style={paragraphBorderStyle}>
							Cela coûtera <Figure title="Salaire super-brut" figure={humanize(salaire_super_brut)}/> par mois à mon {labelTypeEntreprise},
							{ (salaire_super_brut != cout_du_travail) &&
								<span>
									<br />
									ou <Figure title="Coût du travail" figure={humanize(cout_du_travail)}/>
									&nbsp;après déduction des aides différées.
								</span>
							}
						</p>
						<p style={paragraphBorderStyle}>
							Mon salarié·e touchera <Figure title={salaireDescription} figure={humanize(salaireFigure)}/>&nbsp;
							{salaireTitle} par mois.
						</p>
					</div>
					<button	type="button"
						className="action show-details" autoComplete="off"
						onClick={toggleSection}
						style={buttonStyle} >
						{showDetails ?
							<span>Revenir à la saisie</span> :
							<span>Voir le détail<br />des prélèvements</span>
						}
					</button>
			</div>
		</div>
		)
	}
}

@@ -1654,17 +1654,16 @@
 reprise%7D
-,
 %0A%09%09%09%09%09%09%09
@@ -1708,10 +1708,9 @@
 il) 
-&&
+?
 %0A%09%09%09
@@ -1716,24 +1716,25 @@
 %09%09%09%09%09%09%3Cspan%3E
+,
 %0A%09%09%09%09%09%09%09%09%09%3Cb
@@ -1882,24 +1882,49 @@
 %09%09%09%09%09%3C/span%3E
+ :%0A%09%09%09%09%09%09%09%09%3Cspan%3E.%3C/span%3E
 %0A%09%09%09%09%09%09%09%7D%0A%09%09

Remove comma in results when no "Aides différées"