/* global tinyMCE, vpEditorView */
(function( $, wp, vpEditorView ){
	wp.mce = wp.mce || {};
	if ( 'undefined' === typeof wp.mce.views ) {
		return;
	}
	wp.mce.videopress_wp_view_renderer = {
		shortcode_string : 'videopress',
		shortcode_data : {},
		defaults       : {
			w         : '',
			at        : '',
			permalink : true,
			hd        : false,
			loop      : false,
			freedom   : false,
			autoplay  : false,
			flashonly : false
		},
		coerce         : wp.media.coerce,
		template       : wp.template( 'videopress_iframe_vnext' ),
		getContent     : function() {
			var urlargs = 'for=' + encodeURIComponent( vpEditorView.home_url_host ),
				named = this.shortcode.attrs.named,
				options, key, width;

			for ( key in named ) {
				switch ( key ) {
					case 'at' :
						if ( parseInt( named[ key ], 10 ) ) {
							urlargs += '&' + key + '=' + parseInt( named[ key ], 10 );
						} // Else omit, as it's the default.
						break;
					case 'permalink' :
						if ( 'false' === named[ key ] ) {
							urlargs += '&' + key + '=0';
						} // Else omit, as it's the default.
						break;
					case 'hd' :
					case 'loop' :
					case 'autoplay' :
						if ( 'true' === named[ key ] ) {
							urlargs += '&' + key + '=1';
						} // Else omit, as it's the default.
						break;
					default:
						// Unknown parameters?  Ditch it!
						break;
				}
			}

			options = {
				width   : vpEditorView.content_width,
				height  : ( vpEditorView.content_width * 0.5625 ),
				guid    : this.shortcode.attrs.numeric[0],
				urlargs : urlargs
			};

			if ( typeof named.w !== 'undefined' ) {
				width = parseInt( named.w, 10 );
				if ( width >= vpEditorView.min_content_width && width < vpEditorView.content_width ) {
					options.width  = width;
					options.height = parseInt( width * 0.5625, 10 );
				}
			}

			options.ratio = 100 * ( options.height / options.width );

			return this.template( options );
		},
		edit: function( data ) {
			var shortcode_data    = wp.shortcode.next( this.shortcode_string, data),
				named             = shortcode_data.shortcode.attrs.named,
				editor            = tinyMCE.activeEditor,
				renderer          = this,
				oldRenderFormItem = tinyMCE.ui.FormItem.prototype.renderHtml;

			/**
			 * Override TextBox renderHtml to support html5 attrs.
			 * @link https://github.com/tinymce/tinymce/pull/2784
			 *
			 * @returns {string}
			 */
			tinyMCE.ui.TextBox.prototype.renderHtml = function() {
				var self       = this,
					settings   = self.settings,
					element    = document.createElement( settings.multiline ? 'textarea' : 'input' ),
					extraAttrs = [
						'rows',
						'spellcheck',
						'maxLength',
						'size',
						'readonly',
						'min',
						'max',
						'step',
						'list',
						'pattern',
						'placeholder',
						'required',
						'multiple'
					],
					i, key;

				for ( i = 0; i < extraAttrs.length; i++ ) {
					key = extraAttrs[ i ];
					if ( typeof settings[ key ] !== 'undefined' ) {
						element.setAttribute( key, settings[ key ] );
					}
				}

				if ( settings.multiline ) {
					element.innerText = self.state.get( 'value' );
				} else {
					element.setAttribute( 'type', settings.subtype ? settings.subtype : 'text' );
					element.setAttribute( 'value', self.state.get( 'value' ) );
				}

				element.id = self._id;
				element.className = self.classes;
				element.setAttribute( 'hidefocus', 1 );
				if ( self.disabled() ) {
					element.disabled = true;
				}

				return element.outerHTML;
			};

			tinyMCE.ui.FormItem.prototype.renderHtml = function() {
				_.each( vpEditorView.modal_labels, function( value, key ) {
					if ( value === this.settings.items.text ) {
						this.classes.add( 'videopress-field-' + key );
					}
				}, this );

				if ( _.contains( [
						vpEditorView.modal_labels.hd,
						vpEditorView.modal_labels.permalink,
						vpEditorView.modal_labels.autoplay,
						vpEditorView.modal_labels.loop,
						vpEditorView.modal_labels.freedom,
						vpEditorView.modal_labels.flashonly
					], this.settings.items.text ) ) {
					this.classes.add( 'videopress-checkbox' );
				}
				return oldRenderFormItem.call( this );
			};

			/**
			 * Populate the defaults.
			 */
			_.each( this.defaults, function( value, key ) {
				named[ key ] = this.coerce( named, key);
			}, this );

			/**
			 * Declare the fields that will show in the popup when editing the shortcode.
			 */
			editor.windowManager.open( {
				title : vpEditorView.modal_labels.title,
				id    : 'videopress-shortcode-settings-modal',
				width : 520,
				height : 240,
				body  : [
					{
						type     : 'textbox',
						disabled : true,
						name     : 'guid',
						label    : vpEditorView.modal_labels.guid,
						value    : shortcode_data.shortcode.attrs.numeric[0]
					}, {
						type    : 'textbox',
						subtype : 'number',
						min     : vpEditorView.min_content_width,  // The `min` may supported be in the future. https://github.com/tinymce/tinymce/pull/2784
						name    : 'w',
						label   : vpEditorView.modal_labels.w,
						value   : named.w
					}, {
						type    : 'textbox',
						subtype : 'number',
						min     : 0, // The `min` may supported be in the future. https://github.com/tinymce/tinymce/pull/2784
						name    : 'at',
						label   : vpEditorView.modal_labels.at,
						value   : named.at
					}, {
						type    : 'checkbox',
						name    : 'hd',
						label   : vpEditorView.modal_labels.hd,
						checked : named.hd
					}, {
						type    : 'checkbox',
						name    : 'permalink',
						label   : vpEditorView.modal_labels.permalink,
						checked : named.permalink
					}, {
						type    : 'checkbox',
						name    : 'autoplay',
						label   : vpEditorView.modal_labels.autoplay,
						checked : named.autoplay
					}, {
						type    : 'checkbox',
						name    : 'loop',
						label   : vpEditorView.modal_labels.loop,
						checked : named.loop
					}, {
						type    : 'checkbox',
						name    : 'freedom',
						label   : vpEditorView.modal_labels.freedom,
						checked : named.freedom
					}, {
						type    : 'checkbox',
						name    : 'flashonly',
						label   : vpEditorView.modal_labels.flashonly,
						checked : named.flashonly
					}
				],
				onsubmit : function( e ) {
					var args = {
						tag   : renderer.shortcode_string,
						type  : 'single',
						attrs : {
							named   : _.pick( e.data, _.keys( renderer.defaults ) ),
							numeric : [ e.data.guid ]
						}
					};

					if ( '0' === args.attrs.named.at ) {
						args.attrs.named.at = '';
					}

					_.each( renderer.defaults, function( value, key ) {
						args.attrs.named[ key ] = this.coerce( args.attrs.named, key );

						if ( value === args.attrs.named[ key ] ) {
							delete args.attrs.named[ key ];
						}
					}, renderer );

					editor.insertContent( wp.shortcode.string( args ) );
				},
				onopen : function ( e ) {
					var prefix = 'mce-videopress-field-';
					_.each( ['w', 'at'], function( value ) {
						e.target.$el.find( '.' + prefix + value + ' .mce-container-body' ).append( '<span class="' + prefix + 'unit ' + prefix + 'unit-' + value + '">' + vpEditorView.modal_labels[ value + '_unit' ] );
					} );
					$('body').addClass( 'modal-open' );
				},
				onclose: function () {
					$('body').removeClass( 'modal-open' );
				}
			} );

			// Set it back to its original renderer.
			tinyMCE.ui.FormItem.prototype.renderHtml = oldRenderFormItem;
		}
	};
	wp.mce.views.register( 'videopress', wp.mce.videopress_wp_view_renderer );

	// Extend the videopress one to also handle `wpvideo` instances.
	wp.mce.wpvideo_wp_view_renderer = _.extend( {}, wp.mce.videopress_wp_view_renderer, {
		shortcode_string : 'wpvideo'
	});
	wp.mce.views.register( 'wpvideo', wp.mce.wpvideo_wp_view_renderer );
}( jQuery, wp, vpEditorView ));