import $ from 'jquery';

const $doc = $( document );

// Define the block selectors we need to replace after ajax loading.
const blockSelectors = [
	'.vp-block-filter-by-category',
	'.vp-block-sort',
	'.vp-block-pagination',
];

$doc.on( 'loadedNewItems.vpf', function ( event, vpObject, $newVP ) {
	if ( 'vpf' !== event.namespace ) {
		return;
	}

	if ( ! vpObject.$item.closest( '.vp-block-loop' ).length ) {
		return;
	}

	const $currentLoop = vpObject.$item.closest( '.vp-block-loop' );
	const $newLoop = $newVP.closest( '.vp-block-loop' );

	// For each block type, find and replace them maintaining order
	blockSelectors.forEach( ( selector ) => {
		const $currentBlocks = $currentLoop.find( selector );
		const $newBlocks = $newLoop.find( selector );

		// Replace each block in order
		$currentBlocks.each( function ( index ) {
			const $currentBlock = $( this );
			const $newBlock = $newBlocks.eq( index );

			// Only replace if we have a corresponding new block
			if ( $newBlock.length ) {
				$currentBlock.replaceWith( $newBlock );
			}
		} );
	} );
} );
