import React from 'react';
import { Vedlegg } from '../domene/Soknad';
import { finnesElementIListe } from '../oppsummering/utils';
import { SlettetInformasjonsboks } from '../oppsummering/SlettetInformasjonsboks';

function visFilnavn(fil: { filnavn: string }) {
	try {
		return decodeURIComponent(fil.filnavn);
	} catch (error) {
		return fil.filnavn;
	}
}

interface Props {
	filer: Vedlegg[];
	forrigeFiler?: Vedlegg[];
	forEach?: (fil: { fil: Vedlegg }) => JSX.Element | null;
	lastNedVedleggUrl: (vedleggId: string) => string;
	lastNedVedlegg: (filId: string, lastNedAutomatisk: boolean) => void;
	skisseprefiks?: string;
}

export function OppsummeringFiler(props: Props) {
	const {
		filer,
		forrigeFiler,
		forEach: ForEach,
		lastNedVedleggUrl,
		lastNedVedlegg,
		skisseprefiks,
	} = props;

	return (
		<div className="oppsummering-filer">
			<ul>
				{filer.map((fil, i) => {
					const lastNedUrl = lastNedVedleggUrl
						? lastNedVedleggUrl(fil.id)
						: undefined;
					const markerEndretFil =
						!!forrigeFiler &&
						!finnesElementIListe(fil, forrigeFiler);

					return (
						<li
							key={fil.id}
							data-hj-suppress
							className={
								markerEndretFil
									? 'saksbehandling-redigert-informasjon'
									: ''
							}
						>
							{!lastNedUrl ? (
								<a
									rel="noopener noreferrer"
									onClick={(e) => {
										e.preventDefault();
										lastNedVedlegg(fil.id, true);
									}}
									href="#"
									download
								>
									<span className="filnavn filnavn-med-handling">
										{skisseprefiks &&
											`${skisseprefiks} ${i + 1} - `}
										{visFilnavn(fil)}
									</span>
								</a>
							) : (
								<a href={lastNedUrl} download>
									<span className="filnavn filnavn-med-handling">
										{skisseprefiks &&
											`${skisseprefiks} ${i + 1} - `}
										{visFilnavn(fil)}
									</span>
								</a>
							)}
							{ForEach && <ForEach fil={fil} />}
						</li>
					);
				})}
			</ul>
			<SlettetInformasjonsboks
				vis={!!forrigeFiler && forrigeFiler.length > filer.length}
				tekst={'Fil(er) har blitt slettet.'}
			/>
		</div>
	);
}