// ( function( wp ) {
// 	const { registerBlockVariation } = wp.blocks;
// 	const { icon } = wp.components; // Optional: if you want to use a custom icon
//
// 	registerBlockVariation( 'core/query-pagination', {
// 		name: 'load-more',
// 		title: 'Load More',
// 		icon: 'arrow-down-alt2', // You can use any Dashicon or custom icon here.
// 		attributes: {
// 			// Set the layout attribute to 'load-more' to use a "Load More" button style.
// 			layout: 'load-more',
// 		},
// 		description: 'A variation of the Query Pagination block that replaces pagination with a Load More button.',
// 	} );
// } )( window.wp );
(function( wp, $ ) {
    // Register a variation for the query-pagination-next block.
    wp.blocks.registerBlockVariation(
        'core/query-pagination-next',
        {
            name: 'load-more',
            title: 'Load More Button',
            description: 'A load more button that loads additional posts via AJAX.',
            attributes: {
                text: 'Load More',
                className: 'is-load-more',
            },
            // Adding a custom class will let you target the variation in your script.

                    __experimentalLabel: 'Load More (Active Variation)',
            isActive: function( blockAttributes, variationAttributes ) {
                // Check if the block’s className includes our custom class.
                return blockAttributes.className === 'is-load-more';
            }
        }
    );

    // When the document is ready, attach a click handler on our load-more button.
    $( document ).ready( function() {
        // Delegate the click event to any anchor inside our load-more block.
        $( document ).on( 'click', '.wp-block-query-pagination-next.is-load-more a', function( e ) {
            e.preventDefault();

            var $button = $( this );
            var nextPageUrl = $button.attr( 'href' );

            if ( ! nextPageUrl ) {
                return;
            }

            // Optionally update the button text or add a loading indicator.
            $button.text( 'Loading...' );

            // Make an AJAX GET request to fetch the next page.
            $.ajax({
                url: nextPageUrl,
                method: 'GET'
            }).done( function( data ) {
                // In this basic example we assume that the AJAX response
                // returns HTML containing your posts wrapped with the class ".wp-block-post".
                var $data = $( data );
                var $posts = $data.find( '.wp-block-post' );

                if ( $posts.length ) {
                    // Append the new posts to your query container.
                    // (Adjust the selector to target your query loop container as needed.)
                    $( '.wp-block-query' ).append( $posts );

                    // Find the new "next page" link in the returned HTML.
                    var newLink = $data.find( '.wp-block-query-pagination-next a' ).attr( 'href' );
                    if ( newLink ) {
                        // Update the button’s link and restore its text.
                        $button.attr( 'href', newLink ).text( 'Load More' );
                    } else {
                        // No new link? Remove the load more button.
                        $button.closest( '.wp-block-query-pagination-next' ).remove();
                    }
                } else {
                    // No posts found: remove the button.
                    $button.closest( '.wp-block-query-pagination-next' ).remove();
                }
            }).fail( function() {
                // On error, reset the button text.
                $button.text( 'Load More' );
            });
        });
    });
})( window.wp, window.jQuery );