import { startConversation } from 'Actions/actions';
import withTracker from 'Components/utils/withTracker';
import { compose } from 'ramda';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { formValueSelector } from 'redux-form';
import ficheDePaieSelectors from 'Selectors/ficheDePaieSelectors';
import * as Animate from 'Ui/animate';
import SalaryCompactExplanation from './SalaryCompactExplanation';
import './SalaryCompactExplanation.css';
import SalaryFirstExplanation from './SalaryFirstExplanation';

export default compose(
	withTracker,
	connect(
		state => ({
			conversationStarted: state.conversationStarted,
			displayResults: !!ficheDePaieSelectors(state),
			arePreviousAnswers: state.conversationSteps.foldedSteps.length > 0,
			period: formValueSelector('conversation')(state, 'période')
		}),
		{
			startConversation
		}
	)
)(
	class SalaryExplanation extends Component {
		render() {
			return (
				<Animate.fromBottom delay={1000}>
					{!this.props.conversationStarted ? (
						<SalaryFirstExplanation {...this.props} />
					) : (
						<SalaryCompactExplanation {...this.props} />
					)}
					<div style={{ textAlign: 'center' }} />
				</Animate.fromBottom>
			)
		}
	}
)