import { useMemo } from '@wordpress/element';

const LinkMaskingPreview = ( { allMetaData} ) => {

	const {homeUrl, linkbase} = window?.adpressoAdminData || {};
	const urlParams = new URLSearchParams( window.location.search );
	const adId = urlParams.get( 'entity_id' ) || '{AD_ID}';
	const overrideBase = allMetaData?.linkbase_override || '';


	const previewUrl = useMemo( () => {
		let activeBase = overrideBase && overrideBase.trim() !== '' ? overrideBase.trim() : linkbase;

		activeBase = activeBase.replace(/^\/|\/$/g, '');

		return `${homeUrl}/${activeBase}/${adId}`;
	}, [ overrideBase, linkbase, adId ] );

	return (
		<div className="adpresso-link-preview-box">
			<code className="adpresso-code">
				{ previewUrl }
			</code>
		</div>
	);
};

export default LinkMaskingPreview;