import React from 'react';
import { hentSprak, removeQuerystring } from '../utils/utils';
import { Ramme } from './Ramme';
import { ledetekst } from '../diverse/Ledetekst';

interface Props {
	children: JSX.Element;
}

export type Sprak = 'en' | 'no' | 'nn';

function FeilmeldingSprak({ children }: Props): JSX.Element {
	const sprak = hentSprak();

	// Språk
	const engelsk = 'en';
	const bokmal = 'no';
	const nynorsk = 'nn';

	function oppdaterSprakOgRefreshSide(sprak: Sprak) {
		document.cookie = `ForceLocale1=${sprak};path=/`;
		const originalUrl = window?.location?.href ?? '';
		const url = removeQuerystring(originalUrl, '?lang=en'); // Episerver setter ForceLocale1-cookie til en dersom querystring blir med til episerver. Fjerner derfor slik at vi får satt korrekt språk.
		location.replace(url);
		return;
	}

	if (sprak === engelsk) {
		return (
			<section className="er-innlogget">
				<Ramme>
					<p>
						<a href="/dinside/oversikt/veg">
							<span role="navigation" className="pil-tilbake" />
							{ledetekst.getTekst(
								'arbeidsvarsling.frontendkomponenter.engelsk.feilmelding.returlenke'
							)}
						</a>
					</p>
				</Ramme>
				<Ramme avstand>
					<h1 className="sidetittel">
						{ledetekst.getTekst(
							'arbeidsvarsling.frontendkomponenter.engelsk.feilmelding.tittel'
						)}
					</h1>
					<p>
						{ledetekst.getTekst(
							'arbeidsvarsling.frontendkomponenter.engelsk.feilmelding.beskrivelse'
						)}
					</p>
					<p>
						{ledetekst.getTekst(
							'arbeidsvarsling.frontendkomponenter.engelsk.feilmelding.velgSprakBeskrivelse'
						)}
					</p>
					<section className="knapperad knapperad-left knapperad-mobil">
						<button
							onClick={() => oppdaterSprakOgRefreshSide(bokmal)}
							className="knapp"
						>
							{ledetekst.getTekst(
								'arbeidsvarsling.frontendkomponenter.engelsk.feilmelding.bokmal'
							)}
						</button>
						<button
							onClick={() => oppdaterSprakOgRefreshSide(nynorsk)}
							className="knapp"
						>
							{ledetekst.getTekst(
								'arbeidsvarsling.frontendkomponenter.engelsk.feilmelding.nynorsk'
							)}
						</button>
					</section>
				</Ramme>
			</section>
		);
	}
	return children;
}
export default FeilmeldingSprak;