(function( $ ) {
	try {
		// Actions
		var generateOfflineCodesButton        = $( '.js-generate-offline-codes' ),
		    reloadQrCodeForm                  = $( '.js-reload-qr-code' ),
		    reloadQrCodeAndSetModalStatusForm = $( '.js-reload-qr-code-and-set-modal-status' ),
		    sendSmsButton                     = $( '.js-send-sms' ),
		    waitingButton                     = $( '.js-waiting-button' ),
		    waitingLink                       = $( '.js-waiting-link' ),
		    autofocusInput                    = $( '.js-autofocus' );

		// Modals
		var reloadWarningModal = $( '.reload-warning-modal' ),
		    errorModal         = $( '.error-modal' );

		var trustedDevices    = $( '.trusted-device' ),
		    offlineCodesDate  = $( '.offline-codes-date' ),
		    myChart           = $( '#myChart' ),
		    errorModalMessage = $( '#error-modal-message' ),
				qrImg             = $( 'img.qr-code'),
				qrSpinner         = $( '.spinner-container.qr-refresh');

		function getErrorFromResponse( response ) {
			return JSON.parse( response.responseText ).error;
		}

		function handleErrorResponse( response ) {
			var error = getErrorFromResponse( response );

			if ( typeof error === 'undefined' ) {
				error = 'Server error occurred. Please try to refresh this page.';
			}

			errorModalMessage.html( error );
			errorModal.trigger( 'display' );
		}

		function handleReloadQrCodeSuccessfulResponse( response ) {
			var qrCode     = response.qrCode,
			    totpSecret = response.totpSecret;

			$( '.qr-code' ).attr( 'src', qrCode );
			$( '.totp-secret' ).html( totpSecret );
			$( '#totp-secret' ).val( totpSecret );
			$( '.mobile-config' ).attr( 'href', response.qrCodeMessage );

			qrImg.removeClass('hidden');
			qrSpinner.removeClass('visible');
		}

		function prepareList( elements ) {
			var list = '<code><pre>';
			var index;

			for ( index in elements ) {
				if ( elements.hasOwnProperty( index ) ) {
					list += elements[ index ] + '\r\n';
				}
			}

			list += '</pre></code>';

			return list;
		}

		function prepareHiddenInputs( elements ) {
			var inputs = '';
			var index;

			for ( index in elements ) {
				if ( elements.hasOwnProperty( index ) ) {
					inputs += '<input type="hidden" name="code[' + index + ']" value="' + elements[ index ] + '" />';
				}
			}

			return inputs;
		}

		function generateOfflineCodes( event ) {
			event.preventDefault();

			var url    = $( '.generate-offline-codes-form' ).attr( 'action' ),
			    nonce  = $( '.generate-offline-codes-form > input[name="_wpnonce"]' ).val(),
			    button = $( this );

			button.addClass( 'wait' ).attr( 'disabled', true );

			var data = {
				_wpnonce: nonce
			};

			$.ajax( {
				url: url,
				type: 'post',
				data: data,
				success: function( response ) {
					var codes        = response.codes;
					var encodedCodes = encodeURIComponent( codes.join( '\n' ) );
					var list         = prepareList( codes );
					var inputs       = prepareHiddenInputs( codes );

					$( '.offline-stats-generated' ).hide();
					$( '.offline-codes-data' ).html( list );
					$( '.offline-codes-inputs' ).html( inputs );
					$( '.download-codes-link' ).attr( 'href', 'data:text/plain;charset=utf-8,' + encodedCodes );
					$( '.offline-codes-list' ).show();
					$( '.js-backup-codes-tick' )
						.removeClass( 'icon-tick' )
						.addClass( 'icon-tick-enabled' );

					button.removeClass( 'wait' ).attr( 'disabled', false );
				},
				error: function( response ) {
					button.removeClass( 'wait' ).attr( 'disabled', false );
					handleErrorResponse( response );
				}
			} );
		}

		function reloadQrCode() {
			var url   = $( '.reload-qr-code-form' ).attr( 'action' ),
			    nonce = $( '.buttons-bottom > input[name="_wpnonce"]' ).val(),
			    data  = {
				    _wpnonce: nonce
			    };

			qrImg.addClass('hidden');
			qrSpinner.addClass('visible');

			$.ajax( {
				url: url,
				type: 'post',
				data: data,
				success: handleReloadQrCodeSuccessfulResponse,
				error: handleErrorResponse
			} );
		}

		function reloadQrCodeAndSetModalStatus( event ) {
			event.preventDefault();

			if ( $( '#reload-modal-check' ).is( ':checked' ) ) {
				var url   = $( '.js-reload-qr-code-and-set-modal-status' ).attr( 'action' ),
				    nonce = $( '.js-reload-qr-code-and-set-modal-status > input[name="_wpnonce"]' ).val(),
				    data  = {
					    _wpnonce: nonce
				    };

				$.ajax( {
					url: url,
					type: 'post',
					data: data,
					error: handleErrorResponse
				} );

				$( '.reload-qr-code-form' ).removeClass( 'js-open-reload-warning-modal' ).addClass( 'js-reload-qr-code' );
			}

			reloadWarningModal.trigger( 'close' );

			reloadQrCode();
		}

		function sendSms( event ) {
			event.preventDefault();

			var button = $( this );

			button
				.addClass( 'wait' )
				.attr( 'disabled', true );

			var url         = $( '.send-sms-form' ).attr( 'action' ),
			    nonce       = $( '.send-sms-form > input[name="_wpnonce"]' ).val(),
			    phoneNumber = $( '#phone-number' ).val(),
			    data        = {
				    phone_number: phoneNumber,
				    _wpnonce: nonce
			    };

			$.ajax( {
				url: url,
				type: 'post',
				data: data,
				success: function( response ) {
					$( '#verified-phone-number' ).val( phoneNumber );
					$( '#authentication-id' ).val( response.authenticationId );
					$( '.sms-sent-button-text' ).hide();
					$( '.sms-sent-message' ).show();

					button.removeClass( 'wait' );
				},
				error: function( response ) {
					button
						.removeClass( 'wait' )
						.attr( 'disabled', false );

					handleErrorResponse( response );
				}
			} );
		}

		function getCountryByIp( index, element ) {
			$.get( 'https://ipapi.co/' + element.innerText + '/json/', function( data ) {
				var countryCode = data.country;

				element.innerText = countryCode ? countryCode : '';
				element.className += ' visible';
			} );
		}

		function getMonthName( monthNumber ) {
			var monthNames = [
				'January',
				'February',
				'March',
				'April',
				'May',
				'June',
				'July',
				'August',
				'September',
				'October',
				'November',
				'December'
			];

			return monthNames[ monthNumber ];
		}

		function getDate( timestamp ) {
			var date      = new Date( timestamp ),
			    monthName = getMonthName( date.getMonth() ),
			    day       = date.getDate(),
			    year      = date.getFullYear();

			return monthName + ' ' + day + ', ' + year;
		}

		function getTime( timestamp ) {
			var date    = new Date( timestamp ),
			    hours   = date.getHours(),
			    minutes = date.getMinutes(),
			    period  = hours >= 12 ? 'PM' : 'AM';

			if ( hours > 12 ) {
				hours -= 12;
			}

			if ( minutes < 10 ) {
				minutes = '0' + minutes;
			}

			return hours + ':' + minutes + ' ' + period;
		}

		function formatDate( index, element ) {
			var timestamp = element.innerText * 1000;

			if ( !isNaN( timestamp ) ) {
				element.innerText = getDate( timestamp );
			}
		}

		function formatTime( index, element ) {
			var timestamp = element.innerText * 1000;

			if ( !isNaN( timestamp ) ) {
				element.innerText = getTime( timestamp );
				element.className += ' visible';
			}
		}

		function formatOfflineCodesDate() {
			var timestamp = offlineCodesDate[ 0 ].innerText * 1000;

			if ( !isNaN( timestamp ) ) {
				var date      = new Date( timestamp ),
				    monthName = getMonthName( date.getMonth() ),
				    day       = date.getDate(),
				    year      = date.getFullYear();

				offlineCodesDate[ 0 ].innerText = day + ' ' + monthName + ' ' + year;
			}
		}

		function setButtonWaiting( event ) {
			event.preventDefault();
			var form = this;

			$( this )
				.find( '*[type="submit"]' )
				.addClass( 'wait' )
				.attr( "disabled", true );

			setTimeout( function() {
				form.submit();
			}, 1 );

			return true;
		}

		function setLinkWaiting() {
			$( this )
				.addClass( 'wait' )
				.attr( "disabled", true );
		}

		function setFocus() {
			this.value = this.value;
		}

		function setChart() {
			var ctx     = $( '#myChart' )[ 0 ].getContext( '2d' ),
			    data    = {
				    datasets: [ {
					    data: [
						    $( '.js-active-users-count' ).val(),
						    $( '.js-inactive-users-count' ).val()
					    ],
					    backgroundColor: [
						    '#202225',
						    '#eb1c23'
					    ],
					    borderWidth: 0
				    } ],
				    labels: [
					    "Active users",
					    "Inactive users"
				    ]
			    },
			    options = {
				    responsive: true,
				    maintainAspectRatio: false,
				    legend: {
					    display: false
				    },
				    title: {
					    display: false
				    },
				    animation: {
					    animateScale: true,
					    animateRotate: true
				    },
				    tooltips: {
					    enabled: true
				    }
			    };

			var myChart = new Chart( ctx, {
				type: 'doughnut',
				data: data,
				options: options
			} );

			$( '#js-legend' ).html( myChart.generateLegend() );
		}

		if ( trustedDevices.length ) {
			$( '.trusted-device-country' ).each( getCountryByIp );
			$( '.date' ).each( formatDate );
			$( '.hour' ).each( formatTime );
		}

		if ( offlineCodesDate.length ) {
			formatOfflineCodesDate();
		}

		if ( myChart.length ) {
			setChart();
		}

		autofocusInput.focus( setFocus );
		generateOfflineCodesButton.click( generateOfflineCodes );

		reloadQrCodeForm.submit( function( event ) {
			event.preventDefault();
			reloadQrCode();
		} );

		$( document ).on( 'click', '.js-reload-qr-code', function( event ) {
			event.preventDefault();
			reloadQrCode();
		} );

		reloadQrCodeAndSetModalStatusForm.submit( reloadQrCodeAndSetModalStatus );
		sendSmsButton.click( sendSms );
		waitingButton.submit( setButtonWaiting );
		waitingLink.click( setLinkWaiting );

	} catch ( e ) {
		Sentry.captureException( e );
		errorModalMessage.html( 'Server error occurred. Please try to refresh this page.' );
		errorModal.trigger( 'display' );
	}

})( jQuery );