jQuery( document ).ready(
	function ($) {

		$( document ).on(
			"click",
			".upload_image_button",
			function (e) {
				e.preventDefault();
				var $button = $( this );

				// Create the media frame.
				var file_frame = wp.media.frames.file_frame = wp.media(
					{
						title: 'Select or upload a file for the Magnet.',
						button: {
							text: 'Select'
						},
						multiple: false  // Set to true to allow multiple files to be selected.
					}
				);

				// When an image is selected, run a callback.
				file_frame.on(
					'select',
					function () {
						// We set multiple to false so only get one image from the uploader.

						var attachment = file_frame.state().get( 'selection' ).first().toJSON();

						$button.siblings( '.psdm_filename' ).val( attachment.url ).change();

					}
				);

				// Finally, open the modal.
				file_frame.open();
			}
		);

		$( '#smartwizard' ).smartWizard(
			{
				selected: 0,
				theme: 'round',
				transitionEffect: 'fade',
				showStepURLhash: false,
				toolbarSettings: {
					showNextButton: true,
					showPreviousButton: true,
				},
				anchor: {
					enableNavigationAlways: true,
				},
				keyboard: {
					keyNavigation: false,
				},

			}
		);

		const $rangeInput = $( '#psdm_borderwidth' );

		// Add an event listener for the 'input' event.
		$rangeInput.on(
			'input',
			function () {
				$( '#psdm-border-width-value' ).text( $( this ).val() + 'px' );
			}
		)

		const $radiusInput = $( '#psdm_borderradius' );

		$radiusInput.on(
			'input',
			function () {
				$( '#psdm-border-radius-value' ).text( $( this ).val() + 'px' );
			}
		)

		var togglePopupTriggerOptions = function () {
			var isPopup = $( '#psdm_style' ).val() === 'popup';
			$( '#psdm_exit_intent_option, #psdm_delay_seconds_option' ).toggle( isPopup );
		};

		$( '#psdm_style' ).on( 'change', togglePopupTriggerOptions );
		togglePopupTriggerOptions();
	}
);

// jQuery( document ).tooltip(
// {
// show: {duration: 500}
// }
// );

jQuery( '#psdm_style' ).on(
	'change',
	function () {
		var psdm_text = jQuery( "#psdm_style" ).val();
		switch (psdm_text) {
			case "inline":
			case "popup":
				var psdm_shortcodetext                               = jQuery( "#psdm_shortcodebase" ).val();
				document.getElementById( "psdm_copybutton" ).onclick = function () {
					psdm_copyToClipboard( psdm_shortcodetext, event ); };
			break;
			case "button":
				var psdm_shortcodetext                               = jQuery( "#psdm_shortcodebuttonbase" ).val();
				document.getElementById( "psdm_copybutton" ).onclick = function () {
					psdm_copyToClipboard( psdm_shortcodetext, event ); };
			break;
		}
		jQuery( "#psdm_shortcodetext" ).text( psdm_shortcodetext );
	}
);
