( function ( $ ) {
	'use strict';

	var i18n = window.parkstaticAdmin || {};

	document.querySelectorAll( '.parkstatic-copy' ).forEach( function ( button ) {
		var defaultLabel = button.textContent;

		button.addEventListener( 'click', function () {
			var targetId = button.getAttribute( 'data-copy-target' );
			var target = document.getElementById( targetId );

			if ( ! target ) {
				return;
			}

			var value = target.value || target.textContent || '';

			if ( navigator.clipboard && navigator.clipboard.writeText ) {
				navigator.clipboard.writeText( value ).then( function () {
					button.textContent = i18n.copiedSecret || 'Copied!';
					setTimeout( function () {
						button.textContent = defaultLabel;
					}, 1500 );
				} );
				return;
			}

			if ( target.select ) {
				target.select();
				document.execCommand( 'copy' );
			}
		} );
	} );

	document.querySelectorAll( '.parkstatic-secret-toggle' ).forEach( function ( button ) {
		var targetId = button.getAttribute( 'aria-controls' );
		var target = targetId ? document.getElementById( targetId ) : null;

		if ( ! target ) {
			return;
		}

		var showLabel = i18n.showSecret || 'Show';
		var hideLabel = i18n.hideSecret || 'Hide';

		button.addEventListener( 'click', function () {
			var isHidden = 'password' === target.type;

			target.type = isHidden ? 'text' : 'password';
			button.textContent = isHidden ? hideLabel : showLabel;
			button.setAttribute( 'aria-pressed', isHidden ? 'true' : 'false' );
		} );
	} );

	var modeForm = document.getElementById( 'parkstatic-static-mode-form' );

	if ( modeForm ) {
		var saveButton = document.getElementById( 'parkstatic-save-static-mode' );
		var hint = document.getElementById( 'parkstatic-static-mode-hint' );
		var radios = modeForm.querySelectorAll( 'input[name="parkstatic_static_enabled"]' );
		var savedValue = null;

		radios.forEach( function ( radio ) {
			if ( radio.checked ) {
				savedValue = radio.value;
			}
		} );

		var syncModeForm = function () {
			var selected = modeForm.querySelector( 'input[name="parkstatic_static_enabled"]:checked' );
			var hasChanges = selected && savedValue !== null && selected.value !== savedValue;

			if ( saveButton ) {
				saveButton.disabled = ! hasChanges;
			}

			if ( hint ) {
				hint.hidden = ! hasChanges;
				hint.classList.toggle( 'is-unsaved', hasChanges );
			}
		};

		radios.forEach( function ( radio ) {
			radio.addEventListener( 'change', syncModeForm );
		} );

		syncModeForm();
	}

	var debugDialog = document.getElementById( 'parkstatic-debug-dialog' );

	if ( debugDialog ) {
		document.querySelectorAll( '.parkstatic-debug-open' ).forEach( function ( button ) {
			button.addEventListener( 'click', function () {
				if ( typeof debugDialog.showModal === 'function' ) {
					debugDialog.showModal();
				} else {
					debugDialog.setAttribute( 'open', 'open' );
				}
			} );
		} );

		debugDialog.querySelectorAll( '.parkstatic-debug-close' ).forEach( function ( button ) {
			button.addEventListener( 'click', function () {
				if ( typeof debugDialog.close === 'function' ) {
					debugDialog.close();
				} else {
					debugDialog.removeAttribute( 'open' );
				}
			} );
		} );

		debugDialog.addEventListener( 'click', function ( event ) {
			if ( event.target === debugDialog ) {
				debugDialog.close();
			}
		} );
	}

	$( document ).on( 'click', '.parkstatic-media-select', function ( event ) {
		event.preventDefault();

		var button = $( this );
		var targetId = button.data( 'target-id' );
		var previewId = button.data( 'preview-id' );
		var frameTitle = button.data( 'title' ) || i18n.selectImage || 'Select image';
		var targetInput = $( '#' + targetId );
		var previewImage = $( '#' + previewId );
		var removeButton = button.siblings( '.parkstatic-media-remove' );

		var frame = wp.media( {
			title: frameTitle,
			button: {
				text: i18n.selectImage || 'Select image',
			},
			multiple: false,
		} );

		frame.on( 'select', function () {
			var attachment = frame.state().get( 'selection' ).first().toJSON();
			var previewUrl = attachment.sizes && attachment.sizes.thumbnail
				? attachment.sizes.thumbnail.url
				: attachment.url;

			targetInput.val( attachment.id );
			previewImage.attr( 'src', previewUrl ).show();
			removeButton.prop( 'disabled', false );
		} );

		frame.open();
	} );

	$( document ).on( 'click', '.parkstatic-media-remove', function ( event ) {
		event.preventDefault();

		var button = $( this );
		var targetId = button.data( 'target-id' );
		var previewId = button.data( 'preview-id' );

		$( '#' + targetId ).val( '0' );
		$( '#' + previewId ).attr( 'src', '' ).hide();
		button.prop( 'disabled', true );
	} );
}( jQuery ) );
