/*!
 * Echo Special:Notifications page initialization
 */
$( () => {
	const limitNotifications = 50,
		links = mw.config.get( 'wgNotificationsSpecialPageLinks' ),
		// FIXME: Use CSS transition
		// eslint-disable-next-line no-jquery/no-global-selector
		$content = $( '#mw-content-text' ),
		echoApi = new mw.echo.api.EchoApi( { limit: limitNotifications } ),
		unreadCounter = new mw.echo.dm.UnreadNotificationCounter( echoApi, [ 'message', 'alert' ], limitNotifications ),
		modelManager = new mw.echo.dm.ModelManager( unreadCounter, {
			type: [ 'message', 'alert' ],
			itemsPerPage: limitNotifications,
			readState: mw.config.get( 'wgEchoReadState' ),
			localCounter: new mw.echo.dm.UnreadNotificationCounter(
				echoApi,
				[ 'message', 'alert' ],
				limitNotifications,
				{
					localOnly: true,
					source: 'local',
				},
			),
		} ),
		controller = new mw.echo.Controller( echoApi, modelManager );

	// Set default max prioritized action links per item.
	// For general purpose we have 2, for mobile only 1
	mw.echo.config.maxPrioritizedActions = mw.config.get( 'skin' ) === 'minerva' ? 1 : 2;

	const specialPageContainer = new mw.echo.ui.NotificationsInboxWidget(
		controller,
		modelManager,
		{
			limit: limitNotifications,
			$overlay: mw.echo.ui.$overlay,
			prefLink: links.preferences,
		},
	);

	// Overlay
	$( document.body ).append( mw.echo.ui.$overlay );

	// Notifications
	$content.empty().append( specialPageContainer.$element );
} );
