import React from 'react';
import PropTypes from 'prop-types';
import { formaterDato } from './dato';
import { kompetansebevisPropType } from '..';

interface Props {
	kompetansebevis: {
		kompetansebevis: {
			id: string;
		};
		utlopsdato: Date;
	};
	lastNedVedleggUrl: (vedleggId: string) => string;
	lastNedVedlegg: (vedleggId: string, lastNedAutomatisk: boolean) => void;
}

function KompetansebevisSomObjektUtlopsvisning(props: Props) {
	const { kompetansebevis, lastNedVedleggUrl, lastNedVedlegg } = props;

	if (!kompetansebevis || !kompetansebevis.kompetansebevis) {
		return null;
	}

	const vedlegg = kompetansebevis.kompetansebevis;
	const lastnedUrl = lastNedVedleggUrl
		? lastNedVedleggUrl(vedlegg.id)
		: undefined;
	const datoGyldighet = formaterDato(kompetansebevis.utlopsdato);

	if (!!lastnedUrl) {
		return (
			<a className="kompetansebevis-gyldighet" href={lastnedUrl} download>
				{datoGyldighet}
			</a>
		);
	}

	return (
		<a
			className="kompetansebevis-gyldighet"
			rel="noopener noreferrer"
			onClick={(e) => {
				e.preventDefault();
				lastNedVedlegg(vedlegg.id, true);
			}}
			href="#"
			download
		>
			{datoGyldighet}
		</a>
	);
}

KompetansebevisSomObjektUtlopsvisning.propTypes = {
	kompetansebevis: kompetansebevisPropType,
	lastNedVedleggUrl: PropTypes.func,
};

export { KompetansebevisSomObjektUtlopsvisning };