/**

 * Contains the postboxes logic, opening and closing postboxes, reordering and saving

 * the state and ordering to the database.

 *

 * @since 2.5.0

 * @requires jQuery

 * @output wp-admin/js/postbox.js

 */

/* global ajaxurl, postboxes */

(function($) {

	var $document = $( document ),

		__ = wp.i18n.__;

	/**

	 * This object contains all function to handle the behavior of the post boxes. The post boxes are the boxes you see

	 * around the content on the edit page.

	 *

	 * @since 2.7.0

	 *

	 * @namespace postboxes

	 *

	 * @type {Object}

	 */

	window.postboxes = {

		/**

		 * Handles a click on either the postbox heading or the postbox open/close icon.

		 *

		 * Opens or closes the postbox. Expects `this` to equal the clicked element.

		 * Calls postboxes.pbshow if the postbox has been opened, calls postboxes.pbhide

		 * if the postbox has been closed.

		 *

		 * @since 4.4.0

		 *

		 * @memberof postboxes

		 *

		 * @fires postboxes#postbox-toggled

		 *

		 * @return {void}

		 */

		handle_click : function () {

			var $el = $( this ),

				p = $el.closest( '.postbox' ),

				id = p.attr( 'id' ),

				ariaExpandedValue;

			if ( 'dashboard_browser_nag' === id ) {

				return;

			}

			p.toggleClass( 'closed' );

			ariaExpandedValue = ! p.hasClass( 'closed' );

			if ( $el.hasClass( 'handlediv' ) ) {

				// The handle button was clicked.

				$el.attr( 'aria-expanded', ariaExpandedValue );

			} else {

				// The handle heading was clicked.

				$el.closest( '.postbox' ).find( 'button.handlediv' )

					.attr( 'aria-expanded', ariaExpandedValue );

			}

			if ( postboxes.page !== 'press-this' ) {

				postboxes.save_state( postboxes.page );

			}

			if ( id ) {

				if ( !p.hasClass('closed') && typeof postboxes.pbshow === 'function' ) {

					postboxes.pbshow( id );

				} else if ( p.hasClass('closed') && typeof postboxes.pbhide === 'function' ) {

					postboxes.pbhide( id );

				}

			}

			/**

			 * Fires when a postbox has been opened or closed.

			 *

			 * Contains a jQuery object with the relevant postbox element.

			 *

			 * @since 4.0.0

			 * @ignore

			 *

			 * @event postboxes#postbox-toggled

			 * @type {Object}

			 */

			$document.trigger( 'postbox-toggled', p );

		},

		/**

		 * Handles clicks on the move up/down buttons.

		 *

		 * @since 5.5.0

		 *

		 * @return {void}

		 */

		handleOrder: function() {

			var button = $( this ),

				postbox = button.closest( '.postbox' ),

				postboxId = postbox.attr( 'id' ),

				postboxesWithinSortables = postbox.closest( '.meta-box-sortables' ).find( '.postbox:visible' ),

				postboxesWithinSortablesCount = postboxesWithinSortables.length,

				postboxWithinSortablesIndex = postboxesWithinSortables.index( postbox ),

				firstOrLastPositionMessage;

			if ( 'dashboard_browser_nag' === postboxId ) {

				return;

			}

			// If on the first or last position, do nothing and send an audible message to screen reader users.

			if ( 'true' === button.attr( 'aria-disabled' ) ) {

				firstOrLastPositionMessage = button.hasClass( 'handle-order-higher' ) ?

					__( 'The box is on the first position' ) :

					__( 'The box is on the last position' );

				wp.a11y.speak( firstOrLastPositionMessage );

				return;

			}

			// Move a postbox up.

			if ( button.hasClass( 'handle-order-higher' ) ) {

				// If the box is first within a sortable area, move it to the previous sortable area.

				if ( 0 === postboxWithinSortablesIndex ) {

					postboxes.handleOrderBetweenSortables( 'previous', button, postbox );

					return;

				}

				postbox.prevAll( '.postbox:visible' ).eq( 0 ).before( postbox );

				button.trigger( 'focus' );

				postboxes.updateOrderButtonsProperties();

				postboxes.save_order( postboxes.page );

			}

			// Move a postbox down.

			if ( button.hasClass( 'handle-order-lower' ) ) {

				// If the box is last within a sortable area, move it to the next sortable area.

				if ( postboxWithinSortablesIndex + 1 === postboxesWithinSortablesCount ) {

					postboxes.handleOrderBetweenSortables( 'next', button, postbox );

					return;

				}

				postbox.nextAll( '.postbox:visible' ).eq( 0 ).after( postbox );

				button.trigger( 'focus' );

				postboxes.updateOrderButtonsProperties();

				postboxes.save_order( postboxes.page );

			}

		},

		/**

		 * Moves postboxes between the sortables areas.

		 *

		 * @since 5.5.0

		 *

		 * @param {string} position The "previous" or "next" sortables area.

		 * @param {Object} button   The jQuery object representing the button that was clicked.

		 * @param {Object} postbox  The jQuery object representing the postbox to be moved.

		 *

		 * @return {void}

		 */

		handleOrderBetweenSortables: function( position, button, postbox ) {

			var closestSortablesId = button.closest( '.meta-box-sortables' ).attr( 'id' ),

				sortablesIds = [],

				sortablesIndex,

				detachedPostbox;

			// Get the list of sortables within the page.

			$( '.meta-box-sortables:visible' ).each( function() {

				sortablesIds.push( $( this ).attr( 'id' ) );

			});

			// Return if there's only one visible sortables area, e.g. in the block editor page.

			if ( 1 === sortablesIds.length ) {

				return;

			}

			// Find the index of the current sortables area within all the sortable areas.

			sortablesIndex = $.inArray( closestSortablesId, sortablesIds );

			// Detach the postbox to be moved.

			detachedPostbox = postbox.detach();

			// Move the detached postbox to its new position.

			if ( 'previous' === position ) {

				$( detachedPostbox ).appendTo( '#' + sortablesIds[ sortablesIndex - 1 ] );

			}

			if ( 'next' === position ) {

				$( detachedPostbox ).prependTo( '#' + sortablesIds[ sortablesIndex + 1 ] );

			}

			postboxes._mark_area();

			button.focus();

			postboxes.updateOrderButtonsProperties();

			postboxes.save_order( postboxes.page );

		},

		/**

		 * Update the move buttons properties depending on the postbox position.

		 *

		 * @since 5.5.0

		 *

		 * @return {void}

		 */

		updateOrderButtonsProperties: function() {

			var firstSortablesId = $( '.meta-box-sortables:visible:first' ).attr( 'id' ),

				lastSortablesId = $( '.meta-box-sortables:visible:last' ).attr( 'id' ),

				firstPostbox = $( '.postbox:visible:first' ),

				lastPostbox = $( '.postbox:visible:last' ),

				firstPostboxId = firstPostbox.attr( 'id' ),

				lastPostboxId = lastPostbox.attr( 'id' ),

				firstPostboxSortablesId = firstPostbox.closest( '.meta-box-sortables' ).attr( 'id' ),

				lastPostboxSortablesId = lastPostbox.closest( '.meta-box-sortables' ).attr( 'id' ),

				moveUpButtons = $( '.handle-order-higher' ),

				moveDownButtons = $( '.handle-order-lower' );

			// Enable all buttons as a reset first.

			moveUpButtons

				.attr( 'aria-disabled', 'false' )

				.removeClass( 'hidden' );

			moveDownButtons

				.attr( 'aria-disabled', 'false' )

				.removeClass( 'hidden' );

			// When there's only one "sortables" area (e.g. in the block editor) and only one visible postbox, hide the buttons.

			if ( firstSortablesId === lastSortablesId && firstPostboxId === lastPostboxId ) {

				moveUpButtons.addClass( 'hidden' );

				moveDownButtons.addClass( 'hidden' );

			}

			// Set an aria-disabled=true attribute on the first visible "move" buttons.

			if ( firstSortablesId === firstPostboxSortablesId ) {

				$( firstPostbox ).find( '.handle-order-higher' ).attr( 'aria-disabled', 'true' );

			}

			// Set an aria-disabled=true attribute on the last visible "move" buttons.

			if ( lastSortablesId === lastPostboxSortablesId ) {

				$( '.postbox:visible .handle-order-lower' ).last().attr( 'aria-disabled', 'true' );

			}

		},

		/**

		 * Adds event handlers to all postboxes and screen option on the current page.

		 *

		 * @since 2.7.0

		 *

		 * @memberof postboxes

		 *

		 * @param {string} page The page we are currently on.

		 * @param {Object} [args]

		 * @param {Function} args.pbshow A callback that is called when a postbox opens.

		 * @param {Function} args.pbhide A callback that is called when a postbox closes.

		 * @return {void}

		 */

		add_postbox_toggles : function (page, args) {

			var $handles = $( '.postbox .hndle, .postbox .handlediv' ),

				$orderButtons = $( '.postbox .handle-order-higher, .postbox .handle-order-lower' );

			this.page = page;

			this.init( page, args );

			$handles.on( 'click.postboxes', this.handle_click );

			// Handle the order of the postboxes.

			$orderButtons.on( 'click.postboxes', this.handleOrder );

			/**

			 * @since 2.7.0

			 */

			$('.postbox .hndle a').on( 'click', function(e) {

				e.stopPropagation();

			});

			/**

			 * Hides a postbox.

			 *

			 * Event handler for the postbox dismiss button. After clicking the button

			 * the postbox will be hidden.

			 *

			 * As of WordPress 5.5, this is only used for the browser update nag.

			 *

			 * @since 3.2.0

			 *

			 * @return {void}

			 */

			$( '.postbox a.dismiss' ).on( 'click.postboxes', function( e ) {

				var hide_id = $(this).parents('.postbox').attr('id') + '-hide';

				e.preventDefault();

				$( '#' + hide_id ).prop('checked', false).triggerHandler('click');

			});

			/**

			 * Hides the postbox element

			 *

			 * Event handler for the screen options checkboxes. When a checkbox is

			 * clicked this function will hide or show the relevant postboxes.

			 *

			 * @since 2.7.0

			 * @ignore

			 *

			 * @fires postboxes#postbox-toggled

			 *

			 * @return {void}

			 */

			$('.hide-postbox-tog').on('click.postboxes', function() {

				var $el = $(this),

					boxId = $el.val(),

					$postbox = $( '#' + boxId );

				if ( $el.prop( 'checked' ) ) {

					$postbox.show();

					if ( typeof postboxes.pbshow === 'function' ) {

						postboxes.pbshow( boxId );

					}

				} else {

					$postbox.hide();

					if ( typeof postboxes.pbhide === 'function' ) {

						postboxes.pbhide( boxId );

					}

				}

				postboxes.save_state( page );

				postboxes._mark_area();

				/**

				 * @since 4.0.0

				 * @see postboxes.handle_click

				 */

				$document.trigger( 'postbox-toggled', $postbox );

			});

			/**

			 * Changes the amount of columns based on the layout preferences.

			 *

			 * @since 2.8.0

			 *

			 * @return {void}

			 */

			$('.columns-prefs input[type="radio"]').on('click.postboxes', function(){

				var n = parseInt($(this).val(), 10);

				if ( n ) {

					postboxes._pb_edit(n);

					postboxes.save_order( page );

				}

			});

		},

		/**

		 * Initializes all the postboxes, mainly their sortable behavior.

		 *

		 * @since 2.7.0

		 *

		 * @memberof postboxes

		 *

		 * @param {string} page The page we are currently on.

		 * @param {Object} [args={}] The arguments for the postbox initializer.

		 * @param {Function} args.pbshow A callback that is called when a postbox opens.

		 * @param {Function} args.pbhide A callback that is called when a postbox

		 *                               closes.

		 *

		 * @return {void}

		 */

		init : function(page, args) {

			var isMobile = $( document.body ).hasClass( 'mobile' ),

				$handleButtons = $( '.postbox .handlediv' );

			$.extend( this, args || {} );

			$('.meta-box-sortables').sortable({

				placeholder: 'sortable-placeholder',