const HighlightColorPickerWidget = require( './HighlightColorPickerWidget.js' );
/**
 * A popup containing a color picker, for setting highlight colors.
 *
 * @class mw.rcfilters.ui.HighlightPopupWidget
 * @ignore
 * @extends OO.ui.PopupWidget
 *
 * @param {mw.rcfilters.Controller} controller RCFilters controller
 * @param {Object} [config] Configuration object
 */
const HighlightPopupWidget = function MwRcfiltersUiHighlightPopupWidget( controller, config ) {
	config = config || {};

	// Parent
	HighlightPopupWidget.super.call( this, Object.assign( {
		autoClose: true,
		anchor: false,
		padded: true,
		align: 'backwards',
		horizontalPosition: 'end',
		width: 290
	}, config ) );

	this.colorPicker = new HighlightColorPickerWidget( controller );

	this.colorPicker.connect( this, { chooseColor: 'onChooseColor' } );

	this.$body.append( this.colorPicker.$element );
};

/* Initialization */

OO.inheritClass( HighlightPopupWidget, OO.ui.PopupWidget );

/* Methods */

/**
 * Set the button (or other widget) that this popup should hang off.
 *
 * @param {OO.ui.Widget} widget Widget the popup should orient itself to
 */
HighlightPopupWidget.prototype.setAssociatedButton = function ( widget ) {
	this.setFloatableContainer( widget.$element );
	this.$autoCloseIgnore = widget.$element;
};

/**
 * Set the filter item that this popup should control the highlight color for.
 *
 * @param {mw.rcfilters.dm.FilterItem} item
 */
HighlightPopupWidget.prototype.setFilterItem = function ( item ) {
	this.colorPicker.setFilterItem( item );
};

/**
 * When the user chooses a color in the color picker, close the popup.
 */
HighlightPopupWidget.prototype.onChooseColor = function () {
	this.toggle( false );
};

module.exports = HighlightPopupWidget;