(
	function ( $ ) {
		"use strict";
		/**
		 * Change-listener to the three filters of the finder: Country, Type, Category:
		 * Reloads the results as soon as one was changed
		 */
		$( document ).on(
			'change',
			".ajo-job-finder-countries, .ajo-job-finder-types, .ajo-job-finder-categories",
			function () {
				// get the new HTML of the finder and set it.
				ajax_get_new_job_finder_html();
			}
		);

		/**
		 * Get the projects via AJAX from the backend and replace the existing ones
		 *
		 * @param page The page of the results. Default: 1.
		 */
		function ajax_get_new_job_finder_html( page = 1 ) {
			toggle_spinner_overlay( true );
			toggle_inputs_active( false );

			var country = $( ".ajo-job-finder-countries" ).val();
			var type = $( ".ajo-job-finder-types" ).val();
			var category = $( ".ajo-job-finder-categories" ).val();
			var per_page = $( ".ajo-job-finder" ).data( "per-page" );
			var template = $( ".ajo-job-finder" ).data( "template" );
			var fixed_category = $( ".ajo-job-finder" ).data( "fixed-category" );
			var dropdown_where = $( ".ajo-job-finder" ).data( "dropdown-show-where" );
			var dropdown_what = $( ".ajo-job-finder" ).data( "dropdown-show-what" );
			var dropdown_how = $( ".ajo-job-finder" ).data( "dropdown-show-how" );
			var az_job_category = $( ".ajo-job-finder" ).data( "az-job-category" );

			$.ajax(
				ajo_job_finder_client_parameters.url,
				{
					type: 'POST',
					data: {
						action: 'ajo_job_finder_frontend_sync',
						func: 'get_job_finder_html',
						nonce: ajo_job_finder_client_parameters.nonce,
						country: country,
						type: type,
						category: undefined !== category ? category : '',
						page: page,
						per_page: per_page,
						template: template,
						fixed_category: undefined !== fixed_category ? fixed_category : '',
						dropdown_where: undefined !== dropdown_where ? dropdown_where : 'true',
						dropdown_what: undefined !== dropdown_what ? dropdown_what : 'true',
						dropdown_how: undefined !== dropdown_how ? dropdown_how : 'true',
						az_job_category: az_job_category
					},
					dataType: 'json',
					success: function ( data ) {
						if ( data.hasOwnProperty( 'success' ) && data.hasOwnProperty( 'data' ) ) {
							// replace the HTML.
							$( ".ajo-job-finder-wrapper" ).replaceWith( data.data );

							// remove the passed search parameters from the URL.
							var url = new URL( location.href );
							url.searchParams.delete( 'ajo-finder-country' );
							url.searchParams.delete( 'ajo-finder-type' );
							url.searchParams.delete( 'ajo-finder-category' );
							window.history.pushState( {}, document.title, url.toString() );
						} else {
							// TODO: error handling.
						}
					}, error: function () {
						// TODO: error handling.
					},
					complete: function () {
						toggle_inputs_active( true );
						toggle_spinner_overlay( false );

						// scroll to top of finder.
						$( [document.documentElement, document.body] ).animate(
							{
								scrollTop: $( ".ajo-job-finder" ).offset().top
							},
							700
						);
					}
				}
			);
		}

		/**
		 * Click-listener for when a user clicks on a pagination link
		 */
		$( document ).on(
			'click',
			".ajo-job-finder-pagination-page",
			function () {
				// get the new HTML of the finder and set it.
				ajax_get_new_job_finder_html( $( this ).data( 'ajo-job-finder-page' ) );
			}
		);

		/**
		 * Activate/ deactivate all finder input values: The three filters and the pagination
		 *
		 * @param activate Activate the buttons.
		 */
		function toggle_inputs_active( activate ) {
			$( ".ajo-job-finder-countries, .ajo-job-finder-types, .ajo-job-finder-categories" ).prop( 'disabled', !activate );

			if ( true === activate ) {
				$( ".ajo-job-finder-pagination-page" ).removeClass( "disabled" );
			} else {
				$( ".ajo-job-finder-pagination-page" ).addClass( "disabled" );
			}
		}

		/**
		 * Activate/ deactivate the overlay and spinner over the finder
		 *
		 * @param active Activate the overlay and spinner.
		 */
		function toggle_spinner_overlay( active ) {
			if ( true === active ) {
				$( ".ajo-job-finder-overlay" ).css( "display", "block" );
			} else {
				$( ".ajo-job-finder-overlay" ).css( "display", "none" );
			}
		}
	}
)( jQuery );