(function(mw) {
	if (!['Commons:Sound_Logo_Vote', 'Commons:Sound_Logo_Vote/de'].includes(mw.config.get('wgPageName'))) {
		return;
	}

	const i18n = {
		'en': {
			"non-eligibile-error": 'You are not eligibile to vote yet. You can become eligibile by making at least five edits in any Wikimedia project.',
			"your-vote-is-recorded": 'Your vote has been recorded. Thank you! You will be redirected soon.',
			"edit-could-not-save": 'Edit could not be saved.',
			"your-vote": 'Your vote:',
			"your-top-choice": 'Your top choice is:',
			"submit-your-vote": 'Submit your vote',
			"you-already-voted": 'You have already voted, only your last vote will be counted.',
			"reorder-please": 'Please reorder the logos below in order of preference:',
			"login-first": 'Please login or create an account first.'
		}
	};

	const lang = mw.config.get('wgContentLanguage');
	$.i18n().load( i18n );
	$.i18n({ locale: lang });
	
	/**
	 * Shuffles array in place.
	 * @param {Array} a items An array containing the items.
	 * From https://stackoverflow.com/a/6274381/2596051
	 */
	function shuffle(a) {
	    var j, x, i;
	    for (i = a.length - 1; i > 0; i--) {
	        j = Math.floor(Math.random() * (i + 1));
	        x = a[i];
	        a[i] = a[j];
	        a[j] = x;
	    }
	    return a;
	}

    function checkForEligibility() {
        var api = new mw.Api();
        var promise = api.get({
            'action': 'query',
            'meta': 'globaluserinfo',
            'guiprop': 'editcount'
        }).then( function (data) {
            if ( data.query.globaluserinfo.editcount > 10 || data.query.globaluserinfo.registration < "2022-11-00T00:00:00Z" ) {
                return;
            }
            OO.ui.alert($.i18n('non-eligibile-error'));
        })
        return promise;
    }

	function escapeRegExp(string) {
		return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
	}

	function escapeReplacement(string) {
		return string.replace(/\$/g, '$$$$');
	}
	

    function saveVote( draggableGroupWidget ) {
        var api = new mw.Api();
        api.edit('Commons:Sound Logo Vote/Votes', function(revision) {
			var newText = revision.content,
				votes = draggableGroupWidget.getItems().map(function(i) {
                    return i.getData().replace('\n', '')
                }).join(" - "),
				usernameText = '*[[User:' + mw.config.get('wgUserName') + ']]';
			if ( revision.content.indexOf(usernameText) !== -1 ) {
				newText = newText.replace(
					new RegExp(escapeRegExp(usernameText) + '.+(\n|$)', 'g'),
					escapeReplacement(usernameText + ': ' + votes)
				)
			} else {
				newText += '\n' + usernameText + ': ' + votes;
			}
            return {
                text: newText,
                summary: 'Voting using the vote gadget'
            }
        }).done(function() {
            var messageText = $.i18n('your-vote-is-recorded');
            if (mw.config.get('wgUserName') === 'TK-999') {
                messageText += ' <3';
            }
            OO.ui.alert(messageText);
            setTimeout(function() {
                window.location.href = 'https://commons.wikimedia.org/wiki/Commons:Sound_Logo_Vote/Thank_You'
            }, 5000);
        }).fail(function() {
            OO.ui.alert($.i18n('edit-could-not-save'));
        });
    }

	function main() {
		var DraggableGroupWidget = function DraggableGroupWidget(config) {
			config = config || {};
			DraggableGroupWidget.super.call(this, config);
			OO.ui.mixin.DraggableGroupElement.call(this, $.extend({
				$group: this.$element
			}, config));
		};
		OO.inheritClass(DraggableGroupWidget, OO.ui.Widget);
		OO.mixinClass(DraggableGroupWidget, OO.ui.mixin.DraggableGroupElement);

		var DraggableItemWidget = function DraggableItemWidget(config) {
			config = config || {};
			DraggableItemWidget.super.call(this, config);
			OO.ui.mixin.DraggableElement.call(this, config);
		};
		OO.inheritClass(DraggableItemWidget, OO.ui.Widget);
		OO.mixinClass(DraggableItemWidget, OO.ui.mixin.DraggableElement);
		var items = [];
		$('.wikitable tr').each(function(i) {
			if (i == 0) {
				return;
			}
			var element = new DraggableItemWidget({
				content: [new OO.ui.HtmlSnippet('<br>'), new OO.ui.HtmlSnippet($(this).find('td:eq(2) img').clone())],
				data: $(this).find('td:first').text(),
				text: $(this).find('td:first').text()
			});
			element.$element
				.css('border', '1px solid #a2a9b1')
				.css('background-color', '#f8f9fa')
				.css('padding', '5px')
				.css('border-radius', '2px')
				.css('margin', '5px');
			items.push(element);
		})
		shuffle(items);
		var draggableGroupWidget = new DraggableGroupWidget({
			orientation: 'horizontal',
            id: 'votes-draggable-box',
			items: items
		});
		var noticeText = '<strong>' + $.i18n('your-vote') + '</strong><br>';
		draggableGroupWidget.$element
			.css('border', '1px solid #a2a9b1')
			.css('padding', '5px')
			.css('border-radius', '2px')
			.css('margin', '5px')
            .css('margin-bottom', '16px');
		var topChoice = '<br><strong style="line-height: 200%;">' + $.i18n('your-top-choice') + '</strong> ';
		var massege = new OO.ui.MessageWidget({
			type: 'notice',
			label: new OO.ui.HtmlSnippet(noticeText + draggableGroupWidget.getItems().map(function(i) {
				return i.getData()
			}).join(" - ") + topChoice + draggableGroupWidget.getItems()[0].getData())
		});
		draggableGroupWidget.on('reorder', function(item) {
			massege.setLabel(new OO.ui.HtmlSnippet(noticeText + draggableGroupWidget.getItems().map(function(i) {
				return i.getData()
			}).join(" - ") + topChoice + draggableGroupWidget.getItems()[0].getData()));
		});
		var saveButton = new OO.ui.ButtonInputWidget({
			type: 'submit',
			label: $.i18n('submit-your-vote'),
			flags: [
				'primary',
				'progressive'
			]
		});
		saveButton.on('click', function() {
			var api = new mw.Api();
            api.get( {
                'action': 'query',
                'prop': 'revisions',
                'titles': 'Commons:Sound Logo Vote/Votes',
                'rvslots': '*',
                'rvprop': 'content'
            }).then( function(data) {
                if ( data.query.pages['125944070'].revisions[0].slots.main['*'].indexOf('*[[User:' + mw.config.get('wgUserName') + ']]') !== -1 ) {
                    OO.ui.confirm( $.i18n('you-already-voted') ).done( function ( confirmed ) {
                        if ( confirmed ) {
                            saveVote( draggableGroupWidget );
                        }
                    } );
                } else {
                    saveVote( draggableGroupWidget );
                }
                
            })
	
		})
        $('#mw-content-text').append('<br><strong style="padding: 5px;">' + $.i18n('reorder-please') + '</strong><br>');
		$('#mw-content-text').append(draggableGroupWidget.$element);
        saveButton.$element.css('margin-top', '8px');
		massege.$element.append(saveButton.$element);
		$('#mw-content-text').append(massege.$element);
	}

	$('.mw-ui-button.mw-ui-progressive').on('click', function() {
		mw.loader.using(['oojs', 'oojs-ui', 'oojs-ui-core', 'oojs-ui-widgets']).then(function() {
			if ( !mw.config.get('wgUserName') ) {
				OO.ui.alert($.i18n('login-first'));
				return;
			}
            $('.mw-ui-button.mw-ui-progressive').css('display', 'none');
            var progressBar = new OO.ui.ProgressBarWidget( {
                progress: false,
                id: 'progressBar'
            } );
            $('#mw-content-text').css('margin', '16px').append( progressBar.$element );
            checkForEligibility().then( function () {
                $('#progressBar').remove();
                main();
            })
		})
	});

})(mediaWiki);