import $ from 'jquery';

const $body = $('body');
const $doc = $(document);
const $preview = $('#vp_preview');

// prevent click on links.
document.addEventListener(
	'click',
	(e) => {
		e.stopPropagation();
		e.preventDefault();

		if (window.parentIFrame) {
			window.parentIFrame.sendMessage('clicked');
		}
	},
	true
);

// prevent click on <select> and similar elements.
document.addEventListener(
	'mousedown',
	(e) => {
		e.stopPropagation();
		e.preventDefault();

		e.target.blur();
		window.focus();
	},
	true
);

// add dynamic data to AJAX calls.
$doc.on('startLoadingNewItems.vpf', (event, vpObject, url, ajaxData) => {
	if (event.namespace !== 'vpf') {
		return;
	}

	ajaxData.data = Object.assign(
		ajaxData.data || {},
		window.vp_preview_post_data
	);
});

// Dynamic CSS cache.
const dynamicCSScache = {};

// configure iFrame resizer script.
window.iFrameResizer = {
	log: false,
	heightCalculationMethod() {
		return $preview.outerHeight(true);
	},
	onMessage(data) {
		if (!data || !data.name) {
			return;
		}

		switch (data.name) {
			case 'resize':
				// This random number needed for proper resize Isotope and other plugins.
				$body.css('max-width', data.width + Math.random());
				break;
			case 'dynamic-css': {
				// Insert dynamic styles.
				const styleId = `vp-dynamic-styles-${data.blockId}-inline-css`;

				// Skip if styles haven't changed.
				if (
					dynamicCSScache[styleId] &&
					data.styles === dynamicCSScache[styleId]
				) {
					break;
				}

				let $style = $(`#${styleId}`);

				if (!$style.length) {
					$style = $(`<style id="${styleId}"></style>`).appendTo(
						'head'
					);
				}

				dynamicCSScache[styleId] = data.styles;

				$style.text(data.styles);
				break;
			}
			// no default
		}
	},
};