/* eslint consistent-this: [ "error", "control" ] */

(function( component ) {

	'use strict';

	var GalleryWidgetModel, GalleryWidgetControl, GalleryDetailsMediaFrame;

	/**

	 * Custom gallery details frame.

	 *

	 * @since 4.9.0

	 * @class GalleryDetailsMediaFrame

	 * @constructor

	 */

	GalleryDetailsMediaFrame = wp.media.view.MediaFrame.Post.extend( {

		/**

		 * Create the default states.

		 *

		 * @since 4.9.0

		 * @returns {void}

		 */

		createStates: function createStates() {

			this.states.add([

				new wp.media.controller.Library({

					id:         'gallery',

					title:      wp.media.view.l10n.createGalleryTitle,

					priority:   40,

					toolbar:    'main-gallery',

					filterable: 'uploaded',

					multiple:   'add',

					editable:   true,

					library:  wp.media.query( _.defaults({

						type: 'image'

					}, this.options.library ) )

				}),

				// Gallery states.

				new wp.media.controller.GalleryEdit({

					library: this.options.selection,

					editing: this.options.editing,

					menu:    'gallery'

				}),

				new wp.media.controller.GalleryAdd()

			]);

		}

	} );

	/**

	 * Gallery widget model.

	 *

	 * See WP_Widget_Gallery::enqueue_admin_scripts() for amending prototype from PHP exports.

	 *

	 * @since 4.9.0

	 * @class GalleryWidgetModel

	 * @constructor

	 */

	GalleryWidgetModel = component.MediaWidgetModel.extend( {} );

	/**

	 * Gallery widget control.

	 *

	 * See WP_Widget_Gallery::enqueue_admin_scripts() for amending prototype from PHP exports.

	 *

	 * @since 4.9.0

	 * @class GalleryWidgetControl

	 * @constructor

	 */

	GalleryWidgetControl = component.MediaWidgetControl.extend( {

		/**

		 * View events.

		 *

		 * @since 4.9.0

		 * @type {object}

		 */

		events: _.extend( {}, component.MediaWidgetControl.prototype.events, {

			'click .media-widget-gallery-preview': 'editMedia'

		} ),

		/**

		 * Initialize.

		 *

		 * @since 4.9.0

		 * @param {Object}         options - Options.

		 * @param {Backbone.Model} options.model - Model.

		 * @param {jQuery}         options.el - Control field container element.

		 * @param {jQuery}         options.syncContainer - Container element where fields are synced for the server.

		 * @returns {void}

		 */

		initialize: function initialize( options ) {

			var control = this;

			component.MediaWidgetControl.prototype.initialize.call( control, options );

			_.bindAll( control, 'updateSelectedAttachments', 'handleAttachmentDestroy' );

			control.selectedAttachments = new wp.media.model.Attachments();

			control.model.on( 'change:ids', control.updateSelectedAttachments );

			control.selectedAttachments.on( 'change', control.renderPreview );

			control.selectedAttachments.on( 'reset', control.renderPreview );

			control.updateSelectedAttachments();

			/*

			 * Refresh a Gallery widget partial when the user modifies one of the selected attachments.

			 * This ensures that when an attachment's caption is updated in the media modal the Gallery

			 * widget in the preview will then be refreshed to show the change. Normally doing this

			 * would not be necessary because all of the state should be contained inside the changeset,

			 * as everything done in the Customizer should not make a change to the site unless the

			 * changeset itself is published. Attachments are a current exception to this rule.

			 * For a proposal to include attachments in the customized state, see #37887.

			 */

			if ( wp.customize && wp.customize.previewer ) {

				control.selectedAttachments.on( 'change', function() {

					wp.customize.previewer.send( 'refresh-widget-partial', control.model.get( 'widget_id' ) );

				} );

			}

		},

		/**

		 * Update the selected attachments if necessary.

		 *

		 * @since 4.9.0

		 * @returns {void}

		 */

		updateSelectedAttachments: function updateSelectedAttachments() {

			var control = this, newIds, oldIds, removedIds, addedIds, addedQuery;

			newIds = control.model.get( 'ids' );

			oldIds = _.pluck( control.selectedAttachments.models, 'id' );

			removedIds = _.difference( oldIds, newIds );

			_.each( removedIds, function( removedId ) {

				control.selectedAttachments.remove( control.selectedAttachments.get( removedId ) );

			});

			addedIds = _.difference( newIds, oldIds );

			if ( addedIds.length ) {

				addedQuery = wp.media.query({

					order: 'ASC',

					orderby: 'post__in',

					perPage: -1,

					post__in: newIds,

					query: true,

					type: 'image'

				});

				addedQuery.more().done( function() {

					control.selectedAttachments.reset( addedQuery.models );

				});

			}

		},

		/**

		 * Render preview.

		 *

		 * @since 4.9.0

		 * @returns {void}

		 */

		renderPreview: function renderPreview() {

			var control = this, previewContainer, previewTemplate, data;

			previewContainer = control.$el.find( '.media-widget-preview' );

			previewTemplate = wp.template( 'wp-media-widget-gallery-preview' );

			data = control.previewTemplateProps.toJSON();

			data.attachments = {};

			control.selectedAttachments.each( function( attachment ) {

				data.attachments[ attachment.id ] = attachment.toJSON();

			} );

			previewContainer.html( previewTemplate( data ) );

		},

		/**

		 * Determine whether there are selected attachments.

		 *

		 * @since 4.9.0

		 * @returns {boolean} Selected.

		 */

		isSelected: function isSelected() {

			var control = this;

			if ( control.model.get( 'error' ) ) {

				return false;

			}

			return control.model.get( 'ids' ).length > 0;

		},

		/**

		 * Open the media select frame to edit images.

		 *

		 * @since 4.9.0

		 * @returns {void}

		 */

		editMedia: function editMedia() {

			var control = this, selection, mediaFrame, mediaFrameProps;

			selection = new wp.media.model.Selection( control.selectedAttachments.models, {

				multiple: true

			});

			mediaFrameProps = control.mapModelToMediaFrameProps( control.model.toJSON() );

			selection.gallery = new Backbone.Model( mediaFrameProps );

			if ( mediaFrameProps.size ) {

				control.displaySettings.set( 'size', mediaFrameProps.size );

			}

			mediaFrame = new GalleryDetailsMediaFrame({

				frame: 'manage',

				text: control.l10n.add_to_widget,

				selection: selection,

				mimeType: control.mime_type,

				selectedDisplaySettings: control.displaySettings,

				showDisplaySettings: control.showDisplaySettings,

				metadata: mediaFrameProps,

				editing:   true,

				multiple:  true,

				state: 'gallery-edit'

			});

			wp.media.frame = mediaFrame; // See wp.media().

			// Handle selection of a media item.

			mediaFrame.on( 'update', function onUpdate( newSelection ) {

				var state = mediaFrame.state(), resultSelection;

				resultSelection = newSelection || state.get( 'selection' );

				if ( ! resultSelection ) {

					return;

				}

				// Copy orderby_random from gallery state.

				if ( resultSelection.gallery ) {

					control.model.set( control.mapMediaToModelProps( resultSelection.gallery.toJSON() ) );

				}

				// Directly update selectedAttachments to prevent needing to do additional request.

				control.selectedAttachments.reset( resultSelection.models );

				// Update models in the widget instance.

				control.model.set( {

					ids: _.pluck( resultSelection.models, 'id' )

				} );

			} );

			mediaFrame.$el.addClass( 'media-widget' );

			mediaFrame.open();

			if ( selection ) {

				selection.on( 'destroy', control.handleAttachmentDestroy );

			}

		},

		/**

		 * Open the media select frame to chose an item.

		 *

		 * @since 4.9.0

		 * @returns {void}

		 */

		selectMedia: function selectMedia() {

			var control = this, selection, mediaFrame, mediaFrameProps;

			selection = new wp.media.model.Selection( control.selectedAttachments.models, {

				multiple: true

			});

			mediaFrameProps = control.mapModelToMediaFrameProps( control.model.toJSON() );

			if ( mediaFrameProps.size ) {

				control.displaySettings.set( 'size', mediaFrameProps.size );

			}

			mediaFrame = new GalleryDetailsMediaFrame({

				frame: 'select',

				text: control.l10n.add_to_widget,

				selection: selection,

				mimeType: control.mime_type,

				selectedDisplaySettings: control.displaySettings,

				showDisplaySettings: control.showDisplaySettings,

				metadata: mediaFrameProps,

				state: 'gallery'

			});

			wp.media.frame = mediaFrame; // See wp.media().

			// Handle selection of a media item.

			mediaFrame.on( 'update', function onUpdate( newSelection ) {

				var state = mediaFrame.state(), resultSelection;

				resultSelection = newSelection || state.get( 'selection' );

				if ( ! resultSelection ) {

					return;

				}

				// Copy orderby_random from gallery state.

				if ( resultSelection.gallery ) {

					control.model.set( control.mapMediaToModelProps( resultSelection.gallery.toJSON() ) );

				}

				// Directly update selectedAttachments to prevent needing to do additional request.

				control.selectedAttachments.reset( resultSelection.models );

				// Update widget instance.

				control.model.set( {

					ids: _.pluck( resultSelection.models, 'id' )

				} );

			} );

			mediaFrame.$el.addClass( 'media-widget' );

			mediaFrame.open();

			if ( selection ) {

				selection.on( 'destroy', control.handleAttachmentDestroy );

			}

			/*

			 * Make sure focus is set inside of modal so that hitting Esc will close

			 * the modal and not inadvertently cause the widget to collapse in the customizer.

			 */

			mediaFrame.$el.find( ':focusable:first' ).focus();

		},

		/**

		 * Clear the selected attachment when it is deleted in the media select frame.

		 *

		 * @since 4.9.0

		 * @param {wp.media.models.Attachment} attachment - Attachment.

		 * @returns {void}

		 */

		handleAttachmentDestroy: function handleAttachmentDestroy( attachment ) {

			var control = this;

			control.model.set( {

				ids: _.difference(

					control.model.get( 'ids' ),

					[ attachment.id ]

				)

			} );

		}

	} );

	// Exports.

	component.controlConstructors.media_gallery = GalleryWidgetControl;

	component.modelConstructors.media_gallery = GalleryWidgetModel;

})( wp.mediaWidgets );