import { EXPLAIN_VARIABLE } from 'Actions/actions'
import withColours from 'Components/utils/withColours'
import marked from 'Engine/marked'
import { findRuleByDottedName } from 'Engine/rules'
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { flatRulesSelector } from 'Selectors/analyseSelectors'
import './Aide.css'
import References from './rule/References'
@connect(
	state => ({
		explained: state.explainedVariable,
		flatRules: flatRulesSelector(state)
	}),
	dispatch => ({
		stopExplaining: () => dispatch({ type: EXPLAIN_VARIABLE })
	})
)
@withColours
export default class Aide extends Component {
	renderExplanationMarkdown(explanation, term) {
		return marked(`### ${term} \n\n${explanation}`)
	}
	render() {
		let { flatRules, explained, stopExplaining, colours } = this.props

		if (!explained) return <section id="helpWrapper" />

		let rule = findRuleByDottedName(flatRules, explained),
			text = rule.description,
			refs = rule.références

		return (
			<div id="helpWrapper" className="active">
				<section id="help">
					<i
						className="fa fa-times-circle"
						onClick={stopExplaining}
						style={{ color: colours.colour }}
					/>
					<p
						dangerouslySetInnerHTML={{
							__html: this.renderExplanationMarkdown(text, rule.title)
						}}
					/>
					{refs && (
						<div>
							<p>Pour en savoir plus: </p>
							<References refs={refs} />
						</div>
					)}
				</section>
			</div>
		)
	}
}