/**
 * @file assets/js/adminjs/admin-authors-photo.js
 * wp.media author profile photo selector and Add Photo/Change/Remove toggle for the Authors tab.
 * @package MyBookShowroom
 * @since   1.0.0
 */

( function ( $ ) {
	'use strict';
	var __ = wp.i18n.__;

	// Factory-managed frame via MBS_AdminUtils.createMediaFrame() (PLG-052).
	// outerRef nulls photoRef.frame on select/close so the re-open guard works.
	var photoRef = { frame: null };

	/**
	 * Sync the UI state of a single author card's photo controls.
	 *
	 * When hasPhoto is true:
	 *   · preview <img> is shown (hidden attribute removed)
	 *   · Change button text reads "Change"
	 *   · Remove button is shown
	 *
	 * When hasPhoto is false:
	 *   · preview <img> is hidden and src cleared
	 *   · Change button text reads "Add Photo"
	 *   · Remove button is hidden
	 *
	 * All elements are looked up via the data-* attributes that tie the
	 * select/remove buttons back to the preview <img> and hidden input.
	 *
	 * @param {jQuery}  $btn      The button that was clicked (select or remove).
	 * @param {boolean} hasPhoto  Whether the card now has a photo.
	 * @param {string}  [imgSrc]  New preview src (required when hasPhoto=true).
	 */
	function syncCardState( $btn, hasPhoto, imgSrc ) {
		var termId    = $btn.data( 'term-id' );
		var previewId = $btn.data( 'preview' );
		var inputId   = $btn.data( 'input' );

		var $preview = $( '#' + previewId );
		// Both select and remove buttons share the same data-term-id;
		// look up the sibling buttons by that term-id to keep this helper
		// callable from either entry point.
		var $selectBtn = $( '.mbs-author-photo-select[data-term-id="' + termId + '"]' );
		var $removeBtn = $( '.mbs-author-photo-remove[data-term-id="' + termId + '"]' );

		if ( hasPhoto ) {
			if ( imgSrc ) {
				$preview.attr( 'src', imgSrc );
			}
			$preview.prop( 'hidden', false );
			$selectBtn.text( __( 'Change', 'my-book-showroom' ) );
			$removeBtn.prop( 'hidden', false );
		} else {
			$preview.prop( 'hidden', true ).attr( 'src', '' );
			$( '#' + inputId ).val( '' );
			$selectBtn.text( __( 'Add Photo', 'my-book-showroom' ) );
			$removeBtn.prop( 'hidden', true );
		}
	}

	$( document ).on( 'click', '.mbs-author-photo-select', function ( e ) {
		e.preventDefault();

		var $btn    = $( this );
		var inputId = $btn.data( 'input' );

		if ( photoRef.frame ) {
			photoRef.frame.open();
			return;
		}

		photoRef.frame = MBS_AdminUtils.createMediaFrame( {
			title:      __( 'Select Author Photo', 'my-book-showroom' ),
			buttonText: __( 'Use this photo', 'my-book-showroom' ),
			outerRef:   photoRef,
			onSelect: function ( attachment ) {
				var imgSrc = attachment.sizes && attachment.sizes.thumbnail
					? attachment.sizes.thumbnail.url
					: attachment.url;
				$( '#' + inputId ).val( attachment.id );
				syncCardState( $btn, true, imgSrc );
			},
		} );
	} );

	$( document ).on( 'click', '.mbs-author-photo-remove', function ( e ) {
		e.preventDefault();
		syncCardState( $( this ), false );
	} );

} )( jQuery );
