import { goToQuestion } from 'Actions/actions'
import { contains, filter, pipe, reject, toPairs } from 'ramda'
import React from 'react'
import { Trans } from 'react-i18next'
import { useDispatch, useSelector } from 'react-redux'
import { RootState } from 'Reducers/rootReducer'
import { DottedName } from 'Rules'
import {
	currentQuestionSelector,
	nextStepsSelector
} from 'Selectors/analyseSelectors'

export default function QuickLinks() {
	const currentQuestion = useSelector(currentQuestionSelector)
	const nextSteps = useSelector(nextStepsSelector)
	const quickLinks = useSelector(
		(state: RootState) => state.simulation?.config.questions?.["à l'affiche"]
	)
	const quickLinksToHide = useSelector(
		(state: RootState) => state.simulation?.foldedSteps || []
	)
	const dispatch = useDispatch()

	if (!quickLinks) {
		return null
	}
	const links = pipe(
		reject((dottedName: DottedName) => contains(dottedName, quickLinksToHide)),
		filter((dottedName: DottedName) => contains(dottedName, nextSteps)),
		toPairs
	)(quickLinks)

	if (links.length < 1) {
		return null
	}

	return (
		<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={() => dispatch(goToQuestion(dottedName))}
				>
					<Trans i18nKey={'quicklinks.' + label}>{label}</Trans>
				</button>
			))}{' '}
			{/* <button className="ui__ link-button">Voir la liste</button> */}
		</span>
	)
}