const View = require( '../View' ),
	Icon = require( '../Icon' ),
	Anchor = require( '../Anchor' ),
	icons = require( '../icons' ),
	$spinner = icons.spinner().$el,
	util = require( '../util' );

/**
 * Render search results.
 *
 * @extends module:mobile.startup/View
 * @param {Object} options
 * @param {string} options.searchContentLabel actionable label to tell the user they can "search
 *  within pages rather than doing a full text search
 * @param {string} options.noResultsMsg shows when no results displayed
 * @param {string} options.searchContentNoResultsMsg alternative to options.searchContentLabel that
 * shows when no search results have been displayed.
 */
class SearchResultsView extends View {
	/** @inheritdoc */
	get isTemplateMode() {
		return true;
	}

	/** @inheritdoc */
	get template() {
		return util.template( `
<div class="search-results-view">
	<div class="search-content">
		<div class="caption">
			<p class="with-results">{{searchContentLabel}}</p>
			<p class="without-results">{{noResultsMsg}}</p>
			<p class="without-results">{{{searchContentNoResultsMsg}}}</p>
		</div>
	</div>
	<div class="spinner-container position-fixed"></div>
	<div class="results">
		<div class="results-list-container"></div>
		{{#feedback}}
			<div class="search-feedback">
				{{prompt}}
			</div>
		{{/feedback}}
	</div>
</div>`
		);
	}

	/** @inheritdoc */
	preRender() {
		const feedbackLink = mw.config.get( 'wgCirrusSearchFeedbackLink' );
		if ( feedbackLink ) {
			this.options.feedback = {
				prompt: mw.msg( 'mobile-frontend-search-feedback-prompt' ) };
		}
	}

	/** @inheritdoc */
	postRender( options ) {
		const feedbackLink = mw.config.get( 'wgCirrusSearchFeedbackLink' );
		super.postRender( options );
		this.$el.find( '.search-content' ).prepend(
			new Icon( { icon: 'articlesSearch' } ).$el
		);
		this.$el.find( '.spinner-container' ).append( $spinner );
		if ( feedbackLink ) {
			this.$el.find( '.search-feedback' ).append(
				new Anchor( {
					label: mw.msg( 'mobile-frontend-search-feedback-link-text' ),
					href: feedbackLink
				} ).$el
			);
		}
	}
}

module.exports = SearchResultsView;