/* @flow */
import { goToQuestion } from 'Actions/actions'
import { T } from 'Components'
import { compose, contains, filter, reject, toPairs } from 'ramda'
import React from 'react'
import { connect } from 'react-redux'
import { withRouter } from 'react-router'
import {
	currentQuestionSelector,
	nextStepsSelector
} from 'Selectors/analyseSelectors'
import type { Location } from 'react-router'

type OwnProps = {
	quickLinks: { [string]: string }
}
type Props = OwnProps & {
	goToQuestion: string => void,
	location: Location,
	currentQuestion: string,
	nextSteps: Array<string>,
	quickLinksToHide: Array<string>,
	show: boolean
}

const QuickLinks = ({
	goToQuestion,
	currentQuestion,
	nextSteps,
	quickLinks,
	quickLinksToHide
}: Props) => {
	if (!quickLinks) {
		return null
	}
	const links = compose(
		toPairs,
		filter(dottedName => contains(dottedName, nextSteps)),
		reject(dottedName => contains(dottedName, quickLinksToHide))
	)(quickLinks)

	return (
		!!links.length && (
			<span>
				<small>Questions :</small>
				{links.map(([label, dottedName]) => (
					<button
						key={dottedName}
						className={`ui__ link-button ${
							dottedName === currentQuestion ? 'active' : ''
						}`}
						css="margin: 0 0.4rem !important"
						onClick={() => goToQuestion(dottedName)}>
						<T k={'quicklinks.' + label}>{label}</T>
					</button>
				))}{' '}
				{/* <button className="ui__ link-button">Voir la liste</button> */}
			</span>
		)
	)
}

export default (compose(
	withRouter,
	connect(
		(state, props) => ({
			key: props.language,
			currentQuestion: currentQuestionSelector(state),
			nextSteps: nextStepsSelector(state),
			quickLinks: state.simulation?.config.questions?.["à l'affiche"],
			quickLinksToHide: state.conversationSteps.foldedSteps
		}),
		{
			goToQuestion
		}
	)
)(QuickLinks): React$ComponentType<OwnProps>)