import { T } from 'Components'
import withLanguage from 'Components/utils/withLanguage'
import React, { useState } from 'react'
import emoji from 'react-easy-emoji'

export default withLanguage(function SimulateurWarning({
	simulateur,
	autoFolded,
	language
}) {
	let [userFolded, userFold] = useState(undefined)

	let folded = userFolded === undefined ? autoFolded : userFolded,
		toggle = () => userFold(!userFolded)

	return (
		<div id="SimulateurWarning" style={{ marginBottom: '2em' }}>
			<p>
				{emoji('🚩 ')}
				<strong>
					<T k="simulateurs.warning.titre">Outil en cours de développement </T>
				</strong>{' '}
				{folded && (
					<button className="ui__ button simple small" onClick={toggle}>
						<T k="simulateurs.warning.plus">(plus d'info)</T>
					</button>
				)}
			</p>
			<div className={`content ${folded ? '' : 'ui__ card'}`}>
				{!folded && (
					<ul style={{ marginLeft: '1em' }}>
						{simulateur !== 'auto-entreprise' && (
							<li>
								<T k="simulateurs.warning.line1">
									le chiffre d'affaires déduit des charges va à 100% dans la
									rémunération du dirigeant
								</T>
							</li>
						)}
						<li>
							<T k="simulateurs.warning.line2">
								l'impôt sur le revenu est calculé pour un célibataire sans
								enfant et sans autre revenu.
							</T>{' '}
							{simulateur == 'auto-entreprise' && language === 'fr' && (
								<span>L'impôt libératoire n'est pas encore intégré.</span>
							)}
						</li>
						<li>
							<T k="simulateurs.warning.line3">
								les calculs sont indicatifs et ne se substituent pas aux
								décomptes réels des Urssaf, impots.gouv.fr, etc
							</T>
						</li>
					</ul>
				)}

				{!folded && (
					<div style={{ textAlign: 'right', paddingRight: '1em' }}>
						<button className="ui__ button simple small" onClick={toggle}>
							<T>J'ai compris</T>
						</button>
					</div>
				)}
			</div>
		</div>
	)
})