/* global tinymce */

/*

 * The TinyMCE view API.

 *

 * Note: this API is "experimental" meaning that it will probably change

 * in the next few releases based on feedback from 3.9.0.

 * If you decide to use it, please follow the development closely.

 *

 * Diagram

 *

 * |- registered view constructor (type)

 * |  |- view instance (unique text)

 * |  |  |- editor 1

 * |  |  |  |- view node

 * |  |  |  |- view node

 * |  |  |  |- ...

 * |  |  |- editor 2

 * |  |  |  |- ...

 * |  |- view instance

 * |  |  |- ...

 * |- registered view

 * |  |- ...

 */

	'use strict';

	var views = {},

		instances = {};

	wp.mce = wp.mce || {};

	/**

	 * wp.mce.views

	 *

	 * A set of utilities that simplifies adding custom UI within a TinyMCE editor.

	 * At its core, it serves as a series of converters, transforming text to a

	 * custom UI, and back again.

	 */

	wp.mce.views = {

		/**

		 * Registers a new view type.

		 *

		 * @param {String} type   The view type.

		 * @param {Object} extend An object to extend wp.mce.View.prototype with.

		 */

		register: function( type, extend ) {

			views[ type ] = wp.mce.View.extend( _.extend( extend, { type: type } ) );

		},

		/**

		 * Unregisters a view type.

		 *

		 * @param {String} type The view type.

		 */

		unregister: function( type ) {

			delete views[ type ];

		},

		/**

		 * Returns the settings of a view type.

		 *

		 * @param {String} type The view type.

		 *

		 * @return {Function} The view constructor.

		 */

		get: function( type ) {

			return views[ type ];

		},

		/**

		 * Unbinds all view nodes.

		 * Runs before removing all view nodes from the DOM.

		 */

		unbind: function() {

			_.each( instances, function( instance ) {

				instance.unbind();

			} );

		},

		/**

		 * Scans a given string for each view's pattern,

		 * replacing any matches with markers,

		 * and creates a new instance for every match.

		 *

		 * @param {String} content The string to scan.

		 *

		 * @return {String} The string with markers.

		 */

			var pieces = [ { content: content } ],

				self = this,

			_.each( views, function( view, type ) {

				current = pieces.slice();

				pieces  = [];

				_.each( current, function( piece ) {

					var remaining = piece.content,

					// Ignore processed pieces, but retain their location.

					if ( piece.processed ) {

						pieces.push( piece );

						return;

					}

					// Iterate through the string progressively matching views

					// and slicing the string as we go.

					while ( remaining && ( result = view.prototype.match( remaining ) ) ) {

						// Any text before the match becomes an unprocessed piece.

						if ( result.index ) {

							pieces.push( { content: remaining.substring( 0, result.index ) } );

						}

						instance = self.createInstance( type, result.content, result.options );

						// Add the processed piece for the match.

						pieces.push( {

							processed: true

						} );

						// Update the remaining content.

						remaining = remaining.slice( result.index + result.content.length );

					}

					// There are no additional matches.

					// If any content remains, add it as an unprocessed piece.

					if ( remaining ) {

						pieces.push( { content: remaining } );

					}

				} );

			} );

		},

		/**

		 * Create a view instance.

		 *

		 *

		 * @return {wp.mce.View} The view instance.

		 */

			var View = this.get( type ),

				encodedText,

				instance;

			}

			options = _.extend( options || {}, {

				text: text,

				encodedText: encodedText

			} );

			return instances[ encodedText ] = new View( options );

		},

		/**

		 * Get a view instance.

		 *

		 * @param {(String|HTMLElement)} object The textual representation of the view or the view node.

		 *

		 * @return {wp.mce.View} The view instance or undefined.

		 */

		getInstance: function( object ) {

			if ( typeof object === 'string' ) {

				return instances[ encodeURIComponent( object ) ];

			}

			return instances[ $( object ).attr( 'data-wpview-text' ) ];

		},

		/**

		 * Given a view node, get the view's text.

		 *

		 * @param {HTMLElement} node The view node.

		 *

		 * @return {String} The textual representation of the view.

		 */

		getText: function( node ) {

			return decodeURIComponent( $( node ).attr( 'data-wpview-text' ) || '' );

		},

		/**

		 * Renders all view nodes that are not yet rendered.

		 *

		 * @param {Boolean} force Rerender all view nodes.

		 */

		render: function( force ) {

			_.each( instances, function( instance ) {

			} );

		},

		/**

		 * Update the text of a given view node.

		 *

		 * @param {String}         text   The new text.

		 * @param {tinymce.Editor} editor The TinyMCE editor instance the view node is in.

		 * @param {HTMLElement}    node   The view node to update.

		 */

			var instance = this.getInstance( node );

			if ( instance ) {

			}

		},

		/**

		 * Renders any editing interface based on the view type.

		 *

		 * @param {tinymce.Editor} editor The TinyMCE editor instance the view node is in.

		 * @param {HTMLElement}    node   The view node to edit.

		 */

		edit: function( editor, node ) {

			var instance = this.getInstance( node );

			if ( instance && instance.edit ) {

				} );

			}

		},

		/**

		 * Remove a given view node from the DOM.

		 *

		 * @param {tinymce.Editor} editor The TinyMCE editor instance the view node is in.

		 * @param {HTMLElement}    node   The view node to remove.

		 */

		remove: function( editor, node ) {

			var instance = this.getInstance( node );

			if ( instance ) {

				instance.remove( editor, node );

			}

		}

	};

	/**

	 * A Backbone-like View constructor intended for use when rendering a TinyMCE View.

	 * The main difference is that the TinyMCE View is not tied to a particular DOM node.

	 *

	 * @param {Object} options Options.

	 */

	wp.mce.View = function( options ) {

		_.extend( this, options );

		this.initialize();

	};

	wp.mce.View.extend = Backbone.View.extend;

		/**

		 * The content.

		 *

		 * @type {*}

		 */

		content: null,

		/**

		 * Whether or not to display a loader.

		 *

		 * @type {Boolean}

		 */

		loader: true,

		/**

		 * Runs after the view instance is created.

		 */

		initialize: function() {},

		/**

		 *

		 * @return {*}

		 */

		getContent: function() {

			return this.content;

		},

		/**

		 * Renders all view nodes tied to this view instance that are not yet rendered.

		 *

		 */

		render: function( content, force ) {

			if ( content != null ) {

				this.content = content;

			}

			content = this.getContent();

			// If there's nothing to render an no loader needs to be shown, stop.

			if ( ! this.loader && ! content ) {

				return;

			}

			// We're about to rerender all views of this instance, so unbind rendered views.

			force && this.unbind();

			// Replace any left over markers.

			this.replaceMarkers();

			if ( content ) {

					$( node ).data( 'rendered', true );

				}, force ? null : false );

			} else {

				this.setLoader();

			}

		},

		/**

		 * Binds a given node after its content is added to the DOM.

		 */

		bindNode: function() {},

		/**

		 * Unbinds a given node before its content is removed from the DOM.

		 */

		unbindNode: function() {},

		/**

		 * Unbinds all view nodes tied to this view instance.

		 * Runs before their content is removed from the DOM.

		 */

		unbind: function() {

			}, true );

		},

		/**

		 * Gets all the TinyMCE editor instances that support views.

		 *

		 * @param {Function} callback A callback.

		 */

		getEditors: function( callback ) {

			_.each( tinymce.editors, function( editor ) {

				if ( editor.plugins.wpview ) {

					callback.call( this, editor );

				}

			}, this );

		},