import React from 'react';

import {
	ledetekst,
	OppsummeringBlokk,
	OppsummeringFiler,
	useOppsummering,
} from '..';
import { TilbakemeldingForSteg } from './tilbakemelding/TilbakemeldingForSteg';
import { OppsummeringPunkt } from '../pynt/OppsummeringPunkt';
import { erUlikeStrings } from './utils';
import { SlettetInformasjonsboks } from './SlettetInformasjonsboks';

export function TilleggsinformasjonOppsummering() {
	const {
		id: soknadId,
		kunLesbar,
		soknad,
		forrigeSoknad,
		lastNedVedleggUrl,
		lastNedVedlegg,
	} = useOppsummering();
	const tilleggsinformasjon = soknad.tilleggsinformasjon || {};

	const redigeringsLenke = !kunLesbar && `#/${soknadId}/tilleggsinformasjon`;
	const filer = tilleggsinformasjon.vedlegg || [];
	const kommentar = tilleggsinformasjon.kommentar || '';

	const markerEndretKommentar =
		!!forrigeSoknad &&
		erUlikeStrings(
			kommentar,
			forrigeSoknad?.tilleggsinformasjon?.kommentar
		);

	const harSlettetTilleggsinformasjon =
		(!!forrigeSoknad &&
			kommentar.length === 0 &&
			!!forrigeSoknad.tilleggsinformasjon?.kommentar?.length) ||
		(filer.length === 0 &&
			!!forrigeSoknad?.tilleggsinformasjon?.vedlegg?.length);

	if (
		filer.length === 0 &&
		kommentar.length === 0 &&
		!harSlettetTilleggsinformasjon
	)
		return null;

	return (
		<>
			<TilbakemeldingForSteg steg="tilleggsinformasjon" />
			<OppsummeringBlokk
				tittel={ledetekst.getTekst(
					'arbeidsvarsling.soknad.Soknadskomponent.kulepunkter.Tilleggsinformasjon'
				)}
				redigeringsLenke={redigeringsLenke}
				ikon={'ikon-vedlegg'}
				ingenBakgrunn
			>
				{filer.length > 0 && (
					<OppsummeringPunkt
						tittel={ledetekst.getTekst(
							'arbeidsvarsling.frontendkomponenter.Fil.valgtefiler'
						)}
						className="tiltak-oppsummering"
					>
						<OppsummeringFiler
							lastNedVedleggUrl={lastNedVedleggUrl}
							lastNedVedlegg={lastNedVedlegg}
							filer={filer}
							forrigeFiler={
								forrigeSoknad &&
								forrigeSoknad?.tilleggsinformasjon?.vedlegg
							}
						/>
					</OppsummeringPunkt>
				)}
				{kommentar.length > 0 && (
					<OppsummeringPunkt
						tittel={ledetekst.getTekst(
							'arbeidsvarsling.soknad.Soknadsinformasjon.Tilleggsinformasjon.kommentar.tittel'
						)}
						className="tiltak-oppsummering"
					>
						<pre
							className={`util-leselengde ${
								markerEndretKommentar
									? 'saksbehandling-redigert-informasjon'
									: ''
							}`}
							data-hj-suppress
						>
							{kommentar || ''}
						</pre>
					</OppsummeringPunkt>
				)}
				<SlettetInformasjonsboks vis={harSlettetTilleggsinformasjon} />
			</OppsummeringBlokk>
		</>
	);
}