import React from 'react';
import classnames from 'classnames';

import { ProgramContext } from '../diverse/ProgramContext';

export const punktTilStegvalg = {
	soknadsinformasjon: 'soknadsinformasjon',
	vegarbeidomrade: 'omrade',
	vegarbeidbeskrivelse: 'risikoforhold',
	varslingsplan: 'skisse',
	vegarbeidperiode: 'periode',
	kontaktinformasjon: 'kontaktinformasjon',
	tilleggsinformasjon: 'tilleggsinformasjon',
};

function Stegvalg({ klasser, steg, visFeil, vedVerdi }) {
	return (
		<li
			className={classnames(klasser)}
			role="presentation"
			key={steg.verdi}
		>
			{
				<a
					tabIndex={0}
					className="steg-lenke klikkbar"
					href={steg.lenke || '#'}
					onClick={(e) => {
						e.preventDefault();
						if (!steg.lenke) {
							visFeil(null);
							vedVerdi(steg.verdi);
						}
					}}
				>
					<p className="beskrivelse">{steg.tekst}</p>
				</a>
			}
		</li>
	);
}
function Stegviser(props) {
	const { alternativer, vedVerdi, verdi } = props;

	return (
		<ProgramContext.Consumer>
			{({ visFeil }: any) => (
				<ol
					className={
						'stegindikator stegindikator-bredde-' +
						alternativer.length
					}
					role="progressbar"
				>
					{alternativer.map((steg) => {
						const klasser = classnames('steg', {
							'er-aktiv': steg.verdi === verdi,
						});

						return steg.lenke || typeof vedVerdi === 'function' ? (
							<Stegvalg
								key={steg.verdi}
								steg={steg}
								klasser={klasser}
								vedVerdi={vedVerdi}
								visFeil={visFeil}
							/>
						) : (
							<li
								className={klasser}
								role="presentation"
								key={steg.verdi}
							>
								<p className="beskrivelse">{steg.tekst}</p>
							</li>
						);
					})}
				</ol>
			)}
		</ProgramContext.Consumer>
	);
}

export { Stegviser };