( function () {
	'use strict';

	/**
	 * Page mode plugin
	 *
	 * Prepare the page mode UI with all the required actions
	 * for a translation unit (message).
	 * This is mainly used with the messagetable plugin in page mode,
	 * but it is independent of messagetable.
	 * Example usage:
	 *
	 * $( 'div.pagemode' ).pagemode( {
	 *     message: messageObject, // Mandatory message object
	 *     sourcelangcode: 'en', // Mandatory source language code
	 *     targetlangcode: 'hi' // Mandatory target language code
	 * } );
	 *
	 * @internal
	 * @param {Element} element
	 * @param {Object} options
	 * @param {Object} options.message
	 * @param {string} options.sourcelangcode Language code.
	 * @param {string} options.targetlangcode Language code.
	 */
	function PageMode( element, options ) {
		this.$message = $( element );
		this.options = options;
		this.message = this.options.message;
		this.init();
		this.listen();
	}

	PageMode.prototype = {

		/**
		 * Initialize the plugin
		 *
		 * @private
		 */
		init: function () {
			var that = this;

			this.message.proofreadable = false;

			this.render();

			this.$message.translateeditor( {
				message: this.message,
				beforeSave: function ( translation ) {
					that.$message.find( '.tux-pagemode-translation' )
						.html( mw.translate.formatMessageGently( translation || '', that.message.key ) )
						.addClass( 'highlight' );
				},
				onSave: function ( translation ) {
					that.$message.find( '.tux-pagemode-translation' )
						.removeClass( 'highlight' );
					that.message.translation = translation;

					// `status` class is documented elsewhere
					// eslint-disable-next-line mediawiki/class-doc
					that.$message.find( '.tux-pagemode-status' )
						.removeClass( 'translated fuzzy proofread untranslated' )
						.addClass( that.message.properties.status );
				}
			} );

		},

		/**
		 * @private
		 */
		render: function () {
			var sourceLangDir = $.uls.data.getDir( this.options.sourcelangcode );

			var targetLangAttrib;
			if ( this.options.targetlangcode === mw.config.get( 'wgTranslateDocumentationLanguageCode' ) ) {
				targetLangAttrib = mw.config.get( 'wgContentLanguage' );
			} else {
				targetLangAttrib = this.options.targetlangcode;
			}

			var targetLangDir = $.uls.data.getDir( targetLangAttrib );

			// `status` class is documented elsewhere
			// eslint-disable-next-line mediawiki/class-doc
			this.$message.append(
				// `status` class is documented elsewhere
				// eslint-disable-next-line mediawiki/class-doc
				$( '<div>' )
					.addClass( 'row tux-message-item-compact message ' + this.message.properties.status )
					.append(
						// `status` class is documented elsewhere
						// eslint-disable-next-line mediawiki/class-doc
						$( '<div>' )
							.addClass( 'one column tux-pagemode-status ' + this.message.properties.status ),
						$( '<div>' )
							.addClass( 'five columns tux-pagemode-source' )
							.attr( {
								lang: this.options.sourcelangcode,
								dir: sourceLangDir
							} )
							.html( mw.translate.formatMessageGently( this.message.definition, this.message.key ) ),
						$( '<div>' )
							.addClass( 'five columns tux-pagemode-translation' )
							.attr( {
								lang: targetLangAttrib,
								dir: targetLangDir
							} )
							.html( mw.translate.formatMessageGently( this.message.translation || '', this.message.key ) ),
						$( '<div>' )
							.attr( 'title', mw.msg( 'translate-edit-title', this.message.key ) )
							.addClass( 'tux-pagemode-edit' )
					)
			).addClass( this.message.properties.status );
		},

		/**
		 * Attach event listeners
		 *
		 * @private
		 */
		listen: function () {
			var that = this;

			this.$message.children( '.message' ).on( 'click', function ( e ) {
				that.$message.data( 'translateeditor' ).show();
				e.preventDefault();
			} );
		}
	};

	/**
	 * pagemode PLUGIN DEFINITION
	 *
	 * @internal
	 * @param {Object} options
	 * @returns {jQuery}
	 */
	$.fn.pagemode = function ( options ) {
		return this.each( function () {
			var $this = $( this ),
				data = $this.data( 'pagemode' );

			if ( !data ) {
				$this.data( 'pagemode', new PageMode( this, options ) );
			}
		} );
	};

	$.fn.pagemode.Constructor = PageMode;
}() );