import React, { Context, Dispatch, useContext, useReducer } from 'react';
import { Punkter, Tilbakemelding } from '../../domene/Tilbakemelding';
import { punktTilStegvalg } from '../../pynt/Stegviser';
import {
	initialTilbakemeldingState,
	reducer,
	TilbakemeldingActions,
	TilbakemeldingState,
} from './TilbakemeldingReducer';

const TilbakemeldingContext = React.createContext<TilbakemeldingState>({
	...initialTilbakemeldingState,
});
TilbakemeldingContext.displayName = 'TilbakemeldingContext';

const DispatchContext: Context<Dispatch<TilbakemeldingActions>> =
	React.createContext({} as any);
DispatchContext.displayName = 'TilbakemeldingDispatchContext';

const useTilbakemelding = (): Tilbakemelding => {
	const { tilbakemelding } = useContext(TilbakemeldingContext);
	return tilbakemelding;
};

const useTilbakemeldingerForSteg = (
	steg: string
): { punkt: string; innhold: string[] } | null => {
	const { tilbakemeldingspunkter } = useTilbakemelding();
	const punkt = punktTilStegvalg[steg];
	return {
		punkt: punkt,
		innhold: tilbakemeldingspunkter
			?.filter((p) => p.punkt === punkt)
			?.map((p) => p.innhold),
	};
};

export function punktTilTekst(punkt: string): PunktData {
	return punktdata[punkt];
}

function TilbakemeldingProvider({ children }: { children: React.ReactNode }) {
	const [state, dispatch] = useReducer(reducer, initialTilbakemeldingState);

	return (
		<TilbakemeldingContext.Provider value={state}>
			<DispatchContext.Provider value={dispatch}>
				{children}
			</DispatchContext.Provider>
		</TilbakemeldingContext.Provider>
	);
}

interface PunktData {
	tekst: string;
	url?: string;
}

const punktdata: { [key in Punkter]: PunktData } = {
	soknadsinformasjon: {
		tekst: '1. Søknadsinformasjon',
		url: 'soknadsinformasjon',
	},
	omrade: { tekst: '2. Område', url: 'vegarbeidomrade' },
	periode: { tekst: '3. Periode', url: 'vegarbeidperiode' },
	risikoforhold: { tekst: '4. Risikoforhold', url: 'vegarbeidbeskrivelse' },
	skisse: { tekst: '5. Skisse', url: 'varslingsplan' },
	kontaktinformasjon: {
		tekst: '6. Kontaktinformasjon',
		url: 'kontaktinformasjon',
	},
	tilleggsinformasjon: {
		tekst: '7. Tilleggsinformasjon',
		url: 'tilleggsinformasjon',
	},
	annet: { tekst: 'Annet' },
};

export {
	TilbakemeldingProvider,
	TilbakemeldingContext,
	DispatchContext,
	useTilbakemelding,
	useTilbakemeldingerForSteg,
};