import $ from 'jquery';
import { debounce } from 'throttle-debounce';

let jetpackLazyImagesLoadEvent;
try {
	jetpackLazyImagesLoadEvent = new Event( 'jetpack-lazy-images-load', {
		bubbles: true,
		cancelable: true,
	} );
} catch ( e ) {
	jetpackLazyImagesLoadEvent = document.createEvent( 'Event' );
	jetpackLazyImagesLoadEvent.initEvent(
		'jetpack-lazy-images-load',
		true,
		true
	);
}

// Fix AJAX loaded images.
$( document ).on( 'loadedNewItems.vpf', function ( event ) {
	if ( event.namespace !== 'vpf' ) {
		return;
	}

	$( 'body' ).get( 0 ).dispatchEvent( jetpackLazyImagesLoadEvent );
} );

// Fix masonry reloading when Jetpack images lazy loaded.
// https://github.com/Automattic/jetpack/issues/9595
//
// p.s. it looks like this fix is not working at all in Safari browser.
const runReLayout = debounce( 200, ( $gallery ) => {
	$gallery.vpf( 'imagesLoaded' );
} );

$( document.body ).on(
	'jetpack-lazy-loaded-image',
	'.vp-portfolio',
	function () {
		const $this = $( this ).closest( '.vp-portfolio' );

		if ( $this && $this.length ) {
			runReLayout( $this );
		}
	}
);
