text: import { goBackToSimulation } from 'Actions/actions'
  import { ScrollToTop } from 'Components/utils/Scroll'
  import { encodeRuleName } from 'Engine/rules'
  import {
  	decodeRuleName,
  	findRuleByDottedName,
  	findRulesByName
  } from 'Engine/rules.js'
  import { compose, head } from 'ramda'
  import React from 'react'
  import emoji from 'react-easy-emoji'
  import { Trans } from 'react-i18next'
  import { connect } from 'react-redux'
  import { Link, Redirect } from 'react-router-dom'
  import {
  	flatRulesSelector,
  	noUserInputSelector,
  	situationBranchNameSelector
  } from 'Selectors/analyseSelectors'
  import { capitalise0 } from '../utils'
  import Namespace from './rule/Namespace'
  import Rule from './rule/Rule'
  import './RulePage.css'
  import SearchButton from './SearchButton'
  
  export default compose(
  	connect(state => ({
  		valuesToShow: !noUserInputSelector(state),
  		flatRules: flatRulesSelector(state),
  		brancheName: situationBranchNameSelector(state)
  	}))
  )(function RulePage({ flatRules, match, valuesToShow, brancheName }) {
  	let name = match?.params?.name,
  		decodedRuleName = decodeRuleName(name)
  
  	const renderRule = dottedName => {
  		return (
  			<div id="RulePage">
  				<ScrollToTop key={brancheName + dottedName} />
  				<div className="rule-page__header">
  					{valuesToShow ? <BackToSimulation /> : <span />}
  					{brancheName && <span id="situationBranch">{brancheName}</span>}
  					<SearchButton />
  				</div>
  				<Rule dottedName={dottedName} />
  			</div>
  		)
  	}
  
  	if (decodedRuleName.includes(' . ')) {
  		if (!findRuleByDottedName(flatRules, decodedRuleName))
  			return <Redirect to="/404" />
  
  		return renderRule(decodedRuleName)
  	}
  
  	let rules = findRulesByName(flatRules, decodedRuleName)
  	if (!rules.length) return <Redirect to="/404" />
  	if (rules.find(({ ns }) => ns == null)) return renderRule(decodedRuleName)
  	if (rules.length > 1)
  		return (
  			<DisambiguateRuleQuery rules={rules} flatRules={flatRules} name={name} />
  		)
  	let dottedName = head(rules).dottedName
  	return renderRule(dottedName)
  })
  
  const BackToSimulation = compose(
  	connect(
  		null,
  		{ goBackToSimulation }
  	)
  )(
  	// Triggers rerender when the language changes
  	function BackToSimulation({ goBackToSimulation }) {
  		return (
  			<button className="ui__ simple small button" onClick={goBackToSimulation}>
  				{emoji('⬅️')} <Trans i18nKey="back">Reprendre la simulation</Trans>
  			</button>
  		)
  	}
  )
  
  let DisambiguateRuleQuery = ({ rules, flatRules, name }) => (
  	<div className="centeredMessage ui__ container">
  		<h1>{capitalise0(name)}</h1>
  		<p>
  			<Trans i18nKey="ambiguous">
  				Plusieurs règles de la base ont ce nom. Laquelle voulez-vous afficher ?
  			</Trans>
  		</p>
  		<ul>
  			{rules.map(({ dottedName, ns, title }) => (
  				<li key={dottedName}>
  					<Namespace ns={ns} flatRules={flatRules} />
  					<Link to={'' + encodeRuleName(dottedName)}>{title}</Link>
  				</li>
  			))}
  		</ul>
  	</div>
  )
  