( function ( GF_Google_Analytics_Admin, $ ) {
	function display_error( message ) {
		$( '.gforms_note_error' ).remove();
		$( '#gform-page-loader-mask' ).hide();
		$( '#gform-settings' ).before( '<div class="alert gforms_note_error" role="alert">' + message + '</div>' );
		$( '.alert' ).get(0).scrollIntoView();
	}
	function hide_error() {
		$( '.gforms_note_error' ).remove();
	}

	jQuery( document ).ready( function() {
		// Main form wrapper.
		let $form = $( '#gform-settings' );

		// Handle disconnects from the admin.
		let $disconnect = $( '.gfga-disconnect' );
		if ( $disconnect.length > 0 ) {
			$disconnect.on( 'click', function( e ) {
				e.preventDefault();
				$disconnect.html( google_analytics_admin_strings.disconnect );

				var url_params = wpAjax.unserialize( e.target.href );
				var nonce_value = url_params.nonce;

				// Perform Ajax request.
				$.post(
					ajaxurl,
					{
						action: 'disconnect_account',
						nonce: nonce_value,
					},
					function( response ) {
						window.location.href = window.location.href;
					}
				);
			} );
		}

		// Disable submit button and only reenable if required fields are filled out. Necessary to work with new loader.
		let $action = $form.find( 'input[name="gfgaaction"]');
		if ( $action.length !== 0 && $action.val() !== 'manual' ) {
			let $submit_button = $form.find( ':submit' );
			$submit_button.prop( 'disabled', true );
		}
		$( '#gform-settings-section-google-analytics-settings' ).on( 'change', ( 'input, select' ), function( event ) {
			let property = $form.find( 'select[name="gaproperty"]' ).find(':selected').val();
			let measurement_id = $( '#ga-data-streams select :selected' ).val();

			let gtm_container = $form.find( 'select[name="gtmproperty"]' ).find( ':selected' ).val();
			if ( ! gtm_container ) {
				gtm_container = $form.find( '#container' ).val();
			}
			let workspace = $form.find( 'select[name="gaworkspace"]' ).val();
			if ( ! workspace ) {
				workspace = $form.find( '#workspace' ).val();
			}

			let $submit_button = $form.find( ':submit' );
			if ( 'ga' === $action.val() ) {
				if ( property && measurement_id ) {
					$submit_button.prop( 'disabled', false );
				} else {
					$submit_button.prop( 'disabled', true );
				}
			}
			if ( 'gtm' === $action.val() ) {
				if ( gtm_container && workspace ) {
					$submit_button.prop( 'disabled', false );
				} else {
					$submit_button.prop( 'disabled', true );
				}
			}
		})

		// Handle form submission on connect screen
		$form.on( 'submit', function( e ) {

			// Hide error message if there is one being displayed
			hide_error();

			// Determining if we're just connecting for the first time.
			if ( $form.find( 'input[value="google_analytics_setup"]' ).length === 1 ) {
				// is_postback
				e.preventDefault();

				// Set l18n.
				var $save_button = $form.find( '#gform-settings-save' );
				var $mode = $form.find( '[name="_gform_setting_mode"]:checked').val();

				// Validate that a connection type was selected.
				if ( ! $mode ) {
					display_error( google_analytics_admin_strings.mode_required );
					return;
				}

				$save_button.prop( 'value', google_analytics_admin_strings.redirect ).prop( 'disabled', 'disabled' );

				// Get nonce.
				var nonce_value = $form.find( 'input[name="gfganonce"]').val();

				// Perform Ajax request.
				$.post(
					ajaxurl,
					{
						action: 'redirect_to_api',
						nonce: nonce_value,
						mode: $mode,
					},
					function( response ) {
						if ( ! response.data.errors ) {
							window.location.href = response.data.redirect;
						}
					},
					'json'
				);

				return;
			}

			// Determine if we're executing in the correct form
			let $action = $form.find( 'input[name="gfgaaction"]');
			if( $action.length === 0 ) {
				return;
			}

			if ( 'ga' === $action.val() ) {
				e.preventDefault();

				// Getting selected items from the account/property and data stream drop downs.
				let $selected_property = $form.find( 'select[name="gaproperty"]' ).find( ':selected' );
				let $selected_data_stream = $form.find( '#ga-data-streams select :selected' )

				$.post(
					ajaxurl,
					{
						action: 'save_google_analytics_data',
						account_id: $selected_property.data( 'account-id' ),
						account_name: $selected_property.data('account-name'),
						property_id: $selected_property.val(),
						property_name: $selected_property.data('property-name'),
						measurement_id: $selected_data_stream.val(),
						data_stream_name: $selected_data_stream.data( 'data-stream-name' ),
						data_stream_id: $selected_data_stream.data( 'data-stream-id' ),
						nonce: $form.find( 'input[name="gfganonce"]' ).val(),
						token: $form.find('input[name="gfga_token"]' ).val(),
						refresh: $form.find('input[name="gfga_refresh"]' ).val(),
					},
					function( response ) {
						if ( response.success ) {
							window.location.href = response['data'];
						} else {
							display_error( response.data[0].message );
						}
					}
				);
			}
			if ( 'gtm' === $action.val() ) {
				// We're in Google Tag Manager mode
				e.preventDefault();

				// Get Google Analytics data
				let $selected_property = $form.find( 'select[name="gaproperty"]' ).find( ':selected' );
				let $selected_data_stream = $form.find( '#ga-data-streams select :selected' )

				// Get GTM Data
				let $selected_gtm_account = $form.find( 'select[name="gtmproperty"] :selected' );
				let $selected_gtm_container = $form.find( 'select[name="gacontainer"] :selected' );
				let $gtm_workspace = $form.find( 'select[name="gaworkspace"] :selected' );
				let $gtm_auto_create = $form.find( 'input[name="_gform_setting_gtm_auto_create"]' );

				$.post(
					ajaxurl,
					{
						action             : 'save_google_tag_manager_data',
						account_id         : $selected_property.data( 'account-id' ),
						account_name       : $selected_property.data( 'account-name' ),
						property_id        : $selected_property.val(),
						property_name      : $selected_property.data( 'property-name' ),
						measurement_id     : $selected_data_stream.val(),
						data_stream_name   : $selected_data_stream.data( 'data-stream-name' ),
						gtm_account_id     : $selected_gtm_account.data( 'account-id' ),
						gtm_account_name   : $selected_gtm_account.val(),
						gtm_api_path       : $selected_gtm_container.data( 'path' ),
						gtm_container      : $selected_gtm_container.val(),
						gtm_auto_create    : $gtm_auto_create.val(),
						gtm_workspace_id   : $gtm_workspace.val(),
						gtm_workspace_name : $gtm_workspace.text(),
						nonce              : $form.find( 'input[name="gfganonce"]' ).val(),
						token              : $form.find( 'input[name="gfga_token"]' ).val(),
						refresh            : $form.find( 'input[name="gfga_refresh"]' ).val(),
					},
					function( response ) {
						if ( false === response.success ) {
							display_error( response.data[0].message );
						} else {
							window.location.href = response.data;
						}
					}
				);
			}
			if ( 'manual' === $action.val() ) {
				// We're in manual configuration mode
				e.preventDefault();

				$.post(
					ajaxurl,
					{
						action           : 'save_manual_configuration_data',
						mode             : $form.find( '#ga_connection_type' ).val(),
						measurement_id   : $form.find( '#ga_measurement_id' ).val(),
						gmp_api_secret   : $form.find( '#gmp_api_secret' ).val(),
						gtm_container    : $form.find( '#gtm_container_id' ).val(),
						gtm_workspace_id : $form.find( '#gtm_workspace_id' ).val(),
						nonce            : $form.find( 'input[name="gfganonce"]' ).val(),
						ga               : $form.find( 'input[name="_gform_setting_ga"]:checked' ).val(),
						install_gtm      : $form.find('input[name="_gform_setting_install_gtm"]:checked').val(),
						ua_tracker       : $form.find('input[name="_gform_setting_ua_tracker"]').val(),
					},
					function( response ) {
						if ( false === response.success ) {
							display_error( response.data[0].message );
						} else {
							window.location.href = response.data;
						}
					}
				);
			}
		} );

		// Get data streams for selected Analytics account/property.
		$( '#gaproperty' ).on( 'change', function( e ) {

			// Hide error message if there is one being displayed
			hide_error();

			let $option = $( this ).find( ':selected' );
			let nonce = $( 'body' ).find( 'input[name="gfganonce"]' ).val();
			let token = $form.find('input[name="gfga_token"]' ).val();

			$( '#ga-data-streams' ).html( '<br /><img src="' + google_analytics_admin_strings.spinner + '" />' );
			$.post(
				ajaxurl,
				{
					action: 'get_ga4_data_streams',
					account: $option.data( 'account-id' ),
					property: $option.val(),
					nonce: nonce,
					token: token,
				},
				function( response ) {
					if ( response.success ) {
						$( '#ga-data-streams' ).html( response['data'] );
					} else {
						$( '#ga-data-streams' ).html( '' );
						display_error( response.data[0].message );
					}
				}
			);
		} );

		// Get containers for selected GTM account.
		$( '#gtmproperty' ).on( 'change', function( e ) {

			// Hide error message if there is one being displayed
			hide_error();

			const $option = $( this ).find( ':selected' );
			const accountId = $option.data( 'accountId' );
			const path = $option.data( 'path' );
			const token = $option.data( 'token' );
			const nonce = $( 'body' ).find( 'input[name="gfganonce"]' ).val();
			$( '#gtm-containers' ).html( '<br /><img src="' + google_analytics_admin_strings.spinner + '" />' );
			$( '#gtm-workspaces' ).html( '' );
			$.post(
				ajaxurl,
				{
					action: 'get_gtm_containers',
					accountId: accountId,
					path: path,
					nonce: nonce,
					token: token,
				},
				function( response ) {
					if( response.success ) {
						$( '#gtm-containers' ).html( response.body );
					} else {
						display_error( response.data[0].message );
						$( '#gtm-containers' ).html( '' );
					}
				}
			);
		} );

		// Get views for selected UA account.
		$( document ).on( 'change', '#gacontainer', function( e ) {

			// Hide error message if there is one being displayed
			hide_error();

			const $option = $( this ).find( ':selected' );
			const path = $option.data( 'path' );
			const token = $option.data( 'token' );
			const nonce = $( 'body' ).find( 'input[name="gfganonce"]' ).val();
			$( '#gtm-workspaces' ).html( '<br /><img src="' + google_analytics_admin_strings.spinner + '" />' );
			$.post(
				ajaxurl,
				{
					action: 'get_gtm_workspaces',
					path: path,
					nonce: nonce,
					token: token,
				},
				function( response ) {
					if( response.success ) {
						$( '#gtm-workspaces' ).html( response.body );
					} else {
						display_error( response.data[0].message );
						$( '#gform_setting_workspace' ).show();
						$( '#gtm-workspaces' ).html( '' );
					}
				}
			);
		} );
	} );
}( window.GF_Google_Analytics_Admin = window.GF_Google_Analytics_Admin || {}, jQuery ) );