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
		}
	},
};
