/*!
 * MediaWiki Widgets - StashedFileWidget class.
 *
 * @copyright 2011-2016 MediaWiki Widgets Team and others; see mediawiki.widgets/AUTHORS.txt
 * @license The MIT License (MIT); see mediawiki.widgets/LICENSE.txt
 */
( function () {

	/**
	 * @classdesc Accepts a stashed file and displays the information for purposes of
	 * publishing the file at the behest of the user.
	 *
	 * Note that this widget will not finish an upload for you. Use {@link mw.Upload}
	 * and {@link mw.Upload#setFilekey}, then {@link mw.Upload#finishStashUpload} to accomplish
	 * that.
	 *
	 * @example
	 * const widget = new mw.widgets.StashedFileWidget( {
	 *   filekey: '12r9e4rugeec.ddtmmp.1.jpg',
	 * } );
	 *
	 * widget.getValue(); // '12r9e4rugeec.ddtmmp.1.jpg'
	 * widget.setValue( '12r9epfbnskk.knfiy7.1.jpg' );
	 * widget.getValue(); // '12r9epfbnskk.knfiy7.1.jpg'
	 *
	 * @class mw.widgets.StashedFileWidget
	 * @extends OO.ui.Widget
	 * @constructor
	 * @param {Object} config Configuration options
	 * @param {string} [config.filekey] The filekey of the stashed file.
	 * @param {Object} [config.api] API to use for thumbnails.
	 */
	mw.widgets.StashedFileWidget = function MWWStashedFileWidget( config ) {
		if ( !config.api ) {
			config.api = new mw.Api();
		}

		// Parent constructor
		mw.widgets.StashedFileWidget.super.call( this, config );

		// Mixin constructors
		OO.ui.mixin.IconElement.call( this, config );
		OO.ui.mixin.LabelElement.call( this, config );
		OO.ui.mixin.PendingElement.call( this, config );

		// Properties
		this.api = config.api;
		this.$info = $( '<span>' );
		this.setValue( config.filekey );
		this.$label.addClass( 'mw-widgets-stashedFileWidget-label' );
		this.$info
			.addClass( 'mw-widgets-stashedFileWidget-info' )
			.append( this.$icon, this.$label );

		this.$thumbnail = $( '<div>' ).addClass( 'mw-widgets-stashedFileWidget-thumbnail' );
		this.setPendingElement( this.$thumbnail );

		this.$thumbContain = $( '<div>' )
			.addClass( 'mw-widgets-stashedFileWidget-thumbnail-container' )
			.append( this.$thumbnail, this.$info );

		this.$element
			.addClass( 'mw-widgets-stashedFileWidget' )
			.append( this.$thumbContain );

		this.updateUI();
	};

	OO.inheritClass( mw.widgets.StashedFileWidget, OO.ui.Widget );
	OO.mixinClass( mw.widgets.StashedFileWidget, OO.ui.mixin.IconElement );
	OO.mixinClass( mw.widgets.StashedFileWidget, OO.ui.mixin.LabelElement );
	OO.mixinClass( mw.widgets.StashedFileWidget, OO.ui.mixin.PendingElement );

	/**
	 * Get the current filekey.
	 *
	 * @return {string|null}
	 */
	mw.widgets.StashedFileWidget.prototype.getValue = function () {
		return this.filekey;
	};

	/**
	 * Set the filekey.
	 *
	 * @param {string|null} filekey
	 */
	mw.widgets.StashedFileWidget.prototype.setValue = function ( filekey ) {
		if ( filekey !== this.filekey ) {
			this.filekey = filekey;
			this.updateUI();
			this.emit( 'change', this.filekey );
		}
	};

	mw.widgets.StashedFileWidget.prototype.updateUI = function () {
		let $label, $filetype;

		if ( this.filekey ) {
			this.$element.removeClass( 'mw-widgets-stashedFileWidget-empty' );
			$label = $( [] );
			$filetype = $( '<span>' )
				.addClass( 'mw-widgets-stashedFileWidget-fileType' );

			$label = $label.add(
				$( '<span>' )
					.addClass( 'mw-widgets-stashedFileWidget-filekey' )
					.text( this.filekey )
			).add( $filetype );

			this.setLabel( $label );

			this.pushPending();
			this.loadAndGetImageUrl().done( ( url, mime ) => {
				this.$thumbnail.css( 'background-image', 'url( ' + url + ' )' );
				if ( mime ) {
					$filetype.text( mime );
					this.setLabel( $label );
				}
			} ).fail( () => {
				this.$thumbnail.append(
					new OO.ui.IconWidget( {
						icon: 'attachment',
						classes: [ 'mw-widgets-stashedFileWidget-noThumbnail-icon' ]
					} ).$element
				);
			} ).always( () => {
				this.popPending();
			} );
		} else {
			this.$element.addClass( 'mw-widgets-stashedFileWidget-empty' );
			this.setLabel( '' );
		}
	};

	mw.widgets.StashedFileWidget.prototype.loadAndGetImageUrl = function () {
		const filekey = this.filekey;

		if ( filekey ) {
			return this.api.get( {
				action: 'query',
				prop: 'stashimageinfo',
				siifilekey: filekey,
				siiprop: [ 'size', 'url', 'mime' ],
				siiurlwidth: 220
			} ).then( ( data ) => {
				const sii = data.query.stashimageinfo[ 0 ];

				return $.Deferred().resolve( sii.thumburl, sii.mime );
			} );
		}

		return $.Deferred().reject( 'No filekey' );
	};
}() );