import React, { Component } from 'react'
import { Trans, translate } from 'react-i18next'
import formValueTypes from 'Components/conversation/formValueTypes'
import { rules, findRuleByName } from 'Engine/rules'
import { propEq, contains, without, curry, append, ifElse } from 'ramda'
import './TargetSelection.css'
import BlueButton from './BlueButton'
import { Field, reduxForm, formValueSelector, change } from 'redux-form'
import { connect } from 'react-redux'
import { RuleValue } from './rule/RuleValueVignette'
import classNames from 'classnames'
import { buildValidationFunction } from './conversation/FormDecorator'
export let salaries = ['salaire total', 'salaire de base', 'salaire net']
export let popularTargetNames = [...salaries, 'aides employeur']
@translate()
@reduxForm({
form: 'conversation'
})
@connect(
state => ({
getTargetValue: dottedName =>
formValueSelector('conversation')(state, dottedName),
targets: state.analysis ? state.analysis.targets : [],
flatRules: state.flatRules
conversationTargetNames: state.conversationTargetNames
}),
dispatch => ({
setFormValue: (field, name) =>
dispatch(change('conversation', field, name)),
setConversationTargets: (targetNames, fromScratch = false) =>
dispatch({ type: 'SET_CONVERSATION_TARGETS', targetNames, fromScratch })
})
)
export default class TargetSelection extends Component {
state = {
activeInput: null
}
render() {
this.firstEstimationComplete =
this.state.activeInput && this.props.targets.length > 0
return (
{!this.firstEstimationComplete &&
Entrez un salaire mensuel
}
{this.renderOutputList()}
{this.firstEstimationComplete && (
{this.props.selectingTargets ? (
!this.props.conversationVisible && (
Que voulez-vous affiner ?
)
) : (
<>
Estimation par défaut pour un CDI non cadre ...
{
this.props.setSelectingTargets()
}}
>
Personnaliser
>
)}
)}
)
}
renderOutputList() {
let popularTargets = popularTargetNames.map(curry(findRuleByName)(flatRules)),
{
conversationTargetNames,
textColourOnWhite,
setConversationTargets
} = this.props,
optionIsChecked = s => (conversationTargetNames || []).includes(s.name),
visibleCheckbox = s =>
this.props.selectingTargets && s.dottedName !== this.state.activeInput,
toggleTarget = target =>
ifElse(contains(target), without(target), append(target))
return (
{popularTargets.map(s => (
))}
)
}
}
let validate = buildValidationFunction(formValueTypes['euros'])
let InputComponent = ({ input, meta: { dirty, error } }) => (
{dirty && error && {error}}
)
let TargetInputOrValue = ({
s,
targets,
firstEstimationComplete,
activeInput,
setActiveInput,
clearFormValue
}) => (
{activeInput === s.dottedName ? (
) : (
)}
{(firstEstimationComplete || s.question) && €}
)
@connect(
() => ({}),
dispatch => ({
setFormValue: (field, name) => dispatch(change('conversation', field, name))
})
)
class TargetValue extends Component {
render() {
let { targets, s, setFormValue, activeInput, setActiveInput } = this.props,
rule = targets.find(propEq('dottedName', s.dottedName)),
value = rule && rule.nodeValue,
humanValue = value != null && value.toFixed(0)
return (
{
if (!s.question) return
if (value != null) {
setFormValue(s.dottedName, humanValue + '')
setFormValue(activeInput, '')
}
setActiveInput(s.dottedName)
}}
>
)
}
}