/**
 * @class HelpButtonView
 * Module containing presentation logic for the helper button
 */
const HelpButtonView = {

	/**
	 * Renders the help button and renders and adds the popup for it.
	 *
	 * @return {jQuery} the help button object
	 */
	render: function () {
		const helpButton = new OO.ui.ButtonWidget( {
			icon: 'helpNotice',
			framed: false,
			classes: [ 'mw-revslider-show-help' ]
		} );
		const helpPopup = new OO.ui.PopupWidget( {
			$content: $( '<p>' ).text( mw.msg( 'revisionslider-show-help-tooltip' ) ),
			$floatableContainer: helpButton.$element,
			width: 200,
			classes: [ 'mw-revslider-tooltip', 'mw-revslider-help-tooltip' ]
		} );
		helpButton.connect( this, {
			click: 'showDialog'
		} );
		helpButton.$element
			.on( 'mouseover', () => {
				helpPopup.toggle( true );
			} )
			.on( 'mouseout', () => {
				helpPopup.toggle( false );
			} )
			.children().attr( {
				'aria-haspopup': 'true',
				'aria-label': mw.msg( 'revisionslider-show-help-tooltip' )
			} );

		$( document.body ).append( helpPopup.$element );

		return helpButton.$element;
	},

	showDialog: function () {
		require( './ext.RevisionSlider.HelpDialog.js' ).show();
	}
};

module.exports = HelpButtonView;