/**
 * Frontend functionality for the Broadcasts block and shortcode.
 *
 * @since   1.9.7.4
 *
 * @package ConvertKit
 * @author ConvertKit
 */

/**
 * Register events
 */
document.addEventListener(
	'DOMContentLoaded',
	function () {
		// Listen for click events.
		document.addEventListener(
			'click',
			function (e) {
				// Check the broadcasts pagination was clicked.
				if ( e.target.matches( 'ul.convertkit-broadcasts-pagination a' ) ) {

					e.preventDefault();

					// Get block container and build object of data-* attributes.
					let blockContainer = e.target.closest( 'div.convertkit-broadcasts' );
					let atts           = {
						display_date: blockContainer.dataset.displayDate,
						date_format: blockContainer.dataset.dateFormat,
						display_image: blockContainer.dataset.displayImage,
						display_description: blockContainer.dataset.displayDescription,
						display_read_more: blockContainer.dataset.displayReadMore,
						read_more_label: blockContainer.dataset.readMoreLabel,
						limit: blockContainer.dataset.limit,
						paginate: blockContainer.dataset.paginate,
						paginate_label_prev: blockContainer.dataset.paginateLabelPrev,
						paginate_label_next: blockContainer.dataset.paginateLabelNext,
						link_color: blockContainer.dataset.linkColor,
						page: e.target.dataset.page,
						nonce: e.target.dataset.nonce,
					};

					convertKitBroadcastsRender( blockContainer, atts );
				}

			}
		);
	}
);

/**
 * Sends an AJAX request to request HTML based on the supplied block attributes,
 * when pagination is used on a Broadcast block.
 *
 * @since 	1.9.7.6
 *
 * @param 	object 	blockContainer 	DOM object of the block to refresh the HTML in.
 * @param 	object 	atts 			Block attributes
 */
function convertKitBroadcastsRender( blockContainer, atts ) {

	// Append action.
	atts.action = convertkit_broadcasts.action;

	if ( convertkit_broadcasts.debug ) {
		console.log( 'convertKitBroadcastsRender()' );
		console.log( atts );
	}

	// Show loading indicator.
	blockContainer.classList.add( 'convertkit-broadcasts-loading' );

	// Fetch HTML.
	fetch(
		convertkit_broadcasts.ajax_url,
		{
			method: 'POST',
			headers: {
				'Content-Type': 'application/x-www-form-urlencoded',
			},
			body: new URLSearchParams( atts ),
		}
	)
	.then(
		function ( response ) {
			if ( convertkit_broadcasts.debug ) {
				console.log( response );
			}

			return response.json();
		}
	)
	.then(
		function ( result ) {
			if ( convertkit_broadcasts.debug ) {
				console.log( result );
			}

			// Remove loading indicator.
			blockContainer.classList.remove( 'convertkit-broadcasts-loading' );

			// Replace block container's HTML with response data.
			blockContainer.innerHTML = result.data;
		}
	)
	.catch(
		function ( error ) {
			if ( convertkit.debug ) {
				console.error( error );
			}

			// Remove loading indicator.
			blockContainer.classList.remove( 'convertkit-broadcasts-loading' );
		}
	);

}