/* global tinymce */

/**

 * WordPress View plugin.

 */

tinymce.PluginManager.add( 'wpview', function( editor ) {

	var $ = editor.$,

		selected,

		Env = tinymce.Env,

		VK = tinymce.util.VK,

		TreeWalker = tinymce.dom.TreeWalker,

		toRemove = false,

		firstFocus = true,

		_noop = function() { return false; },

		isios = /iPad|iPod|iPhone/.test( navigator.userAgent ),

		cursorInterval,

		lastKeyDownNode,

		setViewCursorTries,

		focus,

		execCommandView,

		execCommandBefore,

		toolbar;

	function getView( node ) {

		return getParent( node, 'wpview-wrap' );

	}

	/**

	 * Returns the node or a parent of the node that has the passed className.

	 * Doing this directly is about 40% faster

	 */

	function getParent( node, className ) {

		while ( node && node.parentNode ) {

			if ( node.className && ( ' ' + node.className + ' ' ).indexOf( ' ' + className + ' ' ) !== -1 ) {

				return node;

			}

			node = node.parentNode;

		}

		return false;

	}

	function _stop( event ) {

		event.stopPropagation();

	}

	function setViewCursor( before, view ) {

		var location = before ? 'before' : 'after',

			offset = before ? 0 : 1;

		deselect();

		editor.selection.setCursorLocation( editor.dom.select( '.wpview-selection-' + location, view )[0], offset );

		editor.nodeChanged();

	}

	function handleEnter( view, before, key ) {

		var dom = editor.dom,

			padNode = dom.create( 'p' );

		if ( ! ( Env.ie && Env.ie < 11 ) ) {

			padNode.innerHTML = '<br data-mce-bogus="1">';

		}

		if ( before ) {

			view.parentNode.insertBefore( padNode, view );

		} else {

			dom.insertAfter( padNode, view );

		}

		deselect();

		if ( before && key === VK.ENTER ) {

			setViewCursor( before, view );

		} else {

			editor.selection.setCursorLocation( padNode, 0 );

		}

		editor.nodeChanged();

	}

	function removeView( view ) {

		editor.undoManager.transact( function() {

			handleEnter( view );

			wp.mce.views.remove( editor, view );

		});

	}

	function select( viewNode ) {

		var clipboard,

			dom = editor.dom;

		if ( ! viewNode ) {

			return;

		}

		if ( viewNode !== selected ) {

			// Make sure that the editor is focused.

			// It is possible that the editor is not focused when the mouse event fires

			// without focus, the selection will not work properly.

			editor.getBody().focus();

			deselect();

			selected = viewNode;

			dom.setAttrib( viewNode, 'data-mce-selected', 1 );

			clipboard = dom.create( 'div', {

				'class': 'wpview-clipboard',

				'contenteditable': 'true'

			}, wp.mce.views.getText( viewNode ) );

			editor.dom.select( '.wpview-body', viewNode )[0].appendChild( clipboard );

			// Both of the following are necessary to prevent manipulating the selection/focus

			dom.bind( clipboard, 'beforedeactivate focusin focusout', _stop );

			dom.bind( selected, 'beforedeactivate focusin focusout', _stop );

			// select the hidden div

			if ( isios ) {

				editor.selection.select( clipboard );

			} else {

				editor.selection.select( clipboard, true );

			}

		}

		editor.nodeChanged();

		editor.fire( 'wpview-selected', viewNode );

	}

	/**

	 * Deselect a selected view and remove clipboard

	 */

	function deselect() {

		var clipboard,

			dom = editor.dom;

		if ( selected ) {

			clipboard = editor.dom.select( '.wpview-clipboard', selected )[0];

			dom.unbind( clipboard );

			dom.remove( clipboard );

			dom.unbind( selected, 'beforedeactivate focusin focusout click mouseup', _stop );

			dom.setAttrib( selected, 'data-mce-selected', null );

		}

		selected = null;

	}

	// Check if the `wp.mce` API exists.

	if ( typeof wp === 'undefined' || ! wp.mce ) {

		return {

			getView: _noop

		};

	}

	// Remove the content of view wrappers from HTML string

	function emptyViews( content ) {

		content = content.replace( /<div[^>]+data-wpview-text="([^"]+)"[^>]*>[\s\S]+?wpview-selection-after[^>]+>[^<>]*<\/p>\s*<\/div>/g, function( all, match ) {

			return '<p>' + window.decodeURIComponent( match ) + '</p>';

		});

		return content.replace( / data-wpview-marker="[^"]+"/g, '' );

	}

	// Prevent adding undo levels on changes inside a view wrapper

	editor.on( 'BeforeAddUndo', function( event ) {

		if ( event.level.content ) {

			event.level.content = emptyViews( event.level.content );

		}

	});

	// When the editor's content changes, scan the new content for

	// matching view patterns, and transform the matches into

	// view wrappers.

	editor.on( 'BeforeSetContent', function( event ) {

		var node;

		if ( ! event.selection ) {

			wp.mce.views.unbind();

		}

		if ( ! event.content ) {

			return;

		}

		if ( ! event.load ) {

			if ( selected ) {

				removeView( selected );

			}

			node = editor.selection.getNode();

			if ( node && node !== editor.getBody() && /^\s*https?:\/\/\S+\s*$/i.test( event.content ) ) {

				// When a url is pasted or inserted, only try to embed it when it is in an empty paragrapgh.

				node = editor.dom.getParent( node, 'p' );

				if ( node && /^[\s\uFEFF\u00A0]*$/.test( $( node ).text() || '' ) ) {

					// Make sure there are no empty inline elements in the <p>

					node.innerHTML = '';

				} else {

					return;

				}

			}

		}

		event.content = wp.mce.views.setMarkers( event.content );

	});

	// When pasting strip all tags and check if the string is an URL.

	// Then replace the pasted content with the cleaned URL.

	editor.on( 'pastePreProcess', function( event ) {

		var pastedStr = event.content;

		if ( pastedStr ) {

			pastedStr = tinymce.trim( pastedStr.replace( /<[^>]+>/g, '' ) );

			if ( /^https?:\/\/\S+$/i.test( pastedStr ) ) {

				event.content = pastedStr;

			}

		}

	});

	// When the editor's content has been updated and the DOM has been

	// processed, render the views in the document.

	editor.on( 'SetContent', function() {

		wp.mce.views.render();

	});

	// Set the cursor before or after a view when clicking next to it.

	editor.on( 'click', function( event ) {

		var x = event.clientX,

			y = event.clientY,

			body = editor.getBody(),

			bodyRect = body.getBoundingClientRect(),

			first = body.firstChild,

			last = body.lastChild,

			firstRect, lastRect, view;

		if ( ! first || ! last ) {

			return;

		}

		firstRect = first.getBoundingClientRect();

		lastRect = last.getBoundingClientRect();

		if ( y < firstRect.top && ( view = getView( first ) ) ) {

			setViewCursor( true, view );

			event.preventDefault();

		} else if ( y > lastRect.bottom && ( view = getView( last ) ) ) {

			setViewCursor( false, view );

			event.preventDefault();

		} else if ( x < bodyRect.left || x > bodyRect.right ) {

			tinymce.each( editor.dom.select( '.wpview-wrap' ), function( view ) {

				var rect = view.getBoundingClientRect();

				if ( y < rect.top ) {

					return false;

				}

				if ( y >= rect.top && y <= rect.bottom ) {

					if ( x < bodyRect.left ) {

						setViewCursor( true, view );

						event.preventDefault();

					} else if ( x > bodyRect.right ) {

						setViewCursor( false, view );

						event.preventDefault();

					}

					return false;

				}

			});

		}

	});

	editor.on( 'init', function() {

		var scrolled = false,

			selection = editor.selection,

			MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

		// When a view is selected, ensure content that is being pasted

		// or inserted is added to a text node (instead of the view).

		editor.on( 'BeforeSetContent', function() {

			var walker, target,

				view = getView( selection.getNode() );

			// If the selection is not within a view, bail.

			if ( ! view ) {

				return;

			}

			if ( ! view.nextSibling || getView( view.nextSibling ) ) {

				// If there are no additional nodes or the next node is a

				// view, create a text node after the current view.

				target = editor.getDoc().createTextNode('');

				editor.dom.insertAfter( target, view );

			} else {

				// Otherwise, find the next text node.

				walker = new TreeWalker( view.nextSibling, view.nextSibling );

				target = walker.next();

			}

			// Select the `target` text node.

			selection.select( target );

			selection.collapse( true );

		});

		editor.dom.bind( editor.getDoc(), 'touchmove', function() {

			scrolled = true;

		});

		editor.on( 'mousedown mouseup click touchend', function( event ) {

			var view = getView( event.target );

			firstFocus = false;

			// Contain clicks inside the view wrapper

			if ( view ) {

				event.stopImmediatePropagation();

				event.preventDefault();

				if ( event.type === 'touchend' && scrolled ) {

					scrolled = false;

				} else {

					select( view );

				}

				// Returning false stops the ugly bars from appearing in IE11 and stops the view being selected as a range in FF.

				// Unfortunately, it also inhibits the dragging of views to a new location.

				return false;

			} else {

				if ( event.type === 'touchend' || event.type === 'mousedown' ) {

					deselect();

				}

			}

			if ( event.type === 'touchend' && scrolled ) {

				scrolled = false;

			}

		}, true );

		if ( MutationObserver ) {

			new MutationObserver( function() {

				editor.fire( 'wp-body-class-change' );

			} )

			.observe( editor.getBody(), {

				attributes: true,

				attributeFilter: ['class']

			} );

		}

	});

	function resetViews( rootNode ) {

		// Replace view nodes

		$( 'div[data-wpview-text]', rootNode ).each( function( i, node ) {

			var $node = $( node ),

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

			if ( text && node.parentNode ) {

				$node.replaceWith( $( editor.dom.create('p') ).text( text ) );