Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.
// <nowiki>
$( function () {

RemindMe = {
	config: {
		name: 'RemindMe',
		version: '1.0'
	},
	init: function () {
		mw.util.addCSS(`
			#RemindMe-window {
				position: fixed;
				z-index: 1;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				overflow: hidden;
				background-color: rgba(0,0,0,0.4);
			}
			#RemindMe-dialog {
				background-color: #d6d6d6;
				margin: 10% auto;
				padding: 2px 20px;
				border: 1px solid #888;
				width: 80%;
				max-width: 60em;
				font-size: 90%;
			}
		`);
		
		var $window = $('<div>');
		$window.attr( 'id', 'RemindMe-window' );
		
		var $dialog = $('<div>');
		$dialog.attr( 'id', 'RemindMe-dialog' );
		
		$window.append( $dialog );
		
		var today = ( new Date() ).toISOString().split('T')[0];
		var dateInput = new mw.widgets.DateInputWidget( {
			name: 'date',
			mustBeAfter: today,
			precision: 'day',
			required: true
		} );
		
		var mwConfig = mw.config.get( [ 'wgTitle', 'wgCanonicalNamespace' ] );
		var currentPage = mwConfig.wgCanonicalNamespace + ':' + mwConfig.wgTitle;
		
		$dialog.append(
			$('<div>')
				.attr( 'id', 'RemindMe-title' )
				.append(
					$('<b>')
						.text( 'Schedule a reminder using RemindMe' )
					),
			$('<hr>'),
			$('<div>')
				.attr( 'id', 'RemindMe-schedule' )
				.append(
					$('<p>')
						.text( 'Note that reminders are scheduled in UTC; today is: ' + today ),
					$('<label>')
						.text( 'Remind me on...')
				)
				.append( dateInput.$element ),
			$('<hr>'),
			$('<div>')
				.attr( 'id', 'RemindMe-message' )
				.append(
					$('<label>')
						.text( 'Reminder content' ),
					$('<textarea>')
						.attr( 'id', 'RemindMe-message-content' )
						.attr( 'rows', 18 )
						.attr( 'cols', 15 )
						.text( '[[' + currentPage + ']]: ' )
				),
			$('<hr>'),
			$('<button>')
				.attr( 'id', 'RemindMe-submit' )
				.text( 'Schedule' ),
			$('<button>')
				.attr( 'id', 'RemindMe-close' )
				.text( 'Cancel' )
		);
		
		$( 'body' ).prepend( $window );
		
		$('#RemindMe-submit').on( 'click', function( e ) {
			console.log( 'Clicked' );
			dateInput.getValidity().done( RemindMe.process );
		} );
		$('#RemindMe-close').on( 'click', function( e ) {
			console.log( 'Closing' );
			$('#RemindMe-window').remove();
		} );
	},
	process: function () {
		console.log( 'Processing' );
		var date = $( '#RemindMe-schedule input.oo-ui-inputWidget-input' )[0].value;
		var text = $( '#RemindMe-message-content' ).val();
		console.log( 'Date: ' + date );
		console.log( 'Test: ' + text );
		RemindMe.getCurrent().then( function( info ) {
			console.log( info );
			var localTitle = info[0];
			var reminders = info[1];
			reminders.push( [ date, text ] );
			console.log( reminders );
			RemindMe.saveNew( localTitle, reminders );
		} );
	},
	getCurrent: function () {
		return new Promise( ( resolve ) => {
			var user = mw.config.get( 'wgUserName' );
			var reminderTitle = 'User:' + user + '/RemindMe.json';
			new mw.Api().get( {
				action: 'query',
				prop: 'revisions',
				titles: reminderTitle,
				rvslots: 'main',
				rvprop: 'content',
				formatversion: 2
			} ).then( function( currentInfo ) {
				console.log( currentInfo );
				var pageInfo = currentInfo.query.pages[0];
				var localTitle = pageInfo.title; // Normalized
				var currentlyScheduled = [];
				if ( !pageInfo.missing ) {
					var rawJSON = pageInfo.revisions[0].slots.main.content;
					currentlyScheduled = JSON.parse( rawJSON );
				}
				
				resolve( [ localTitle, currentlyScheduled ] );
			} );
		} );
	},
	saveNew: function ( localTitle, reminders ) {
		var newJSON = JSON.stringify( reminders, null, 2 );
		console.log( newJSON );
		new mw.Api().postWithEditToken( {
			action: 'edit',
			title: localTitle,
			text: newJSON,
			summary: 'Saving new reminders - ' + RemindMe.config.name + ' v.' + RemindMe.config.version + ')'
		}).done( function () {
			alert( 'Reminder saved!' );
			$('#RemindMe-window').remove();
		});
	}
};

$.when(
	mw.loader.using( 'mediawiki.util' ),
	$.ready
).then( function () {
	mw.util.addPortletLink( 'p-cactions', '', 'RemindMe', 'ca-RemindMe', 'Schedule a reminder');
	$( '#ca-RemindMe' ).on( 'click', function ( e ) {
		e.preventDefault();
		mw.loader.using( [ 'mediawiki.widgets.DateInputWidget', 'mediawiki.api' ] ).then( RemindMe.init );
	} );
} );

} );