/* global WP_Smush */
/* global ajaxurl */
/* global wp_smushit_data */

import {GlobalStats} from "../common/globalStats";
import SmushProgress from "../common/progressbar";

let perf = 0;

import MixPanel from "../mixpanel";

/**
 * Smush class.
 *
 * @since 2.9.0  Moved from admin.js into a dedicated ES6 class.
 */
class Smush {
	/**
	 * Class constructor.
	 *
	 * @param {Object}  button Button object that made the call.
	 * @param {boolean} bulk   Bulk smush or not.
	 * @param {string}  type   Accepts: 'nextgen', 'media'.
	 */
	constructor( button, bulk, type = 'media' ) {
		this.onStart();

		//If smush attribute is not defined, Need not skip re-Smush IDs.
		this.skip_resmush = ! (
			'undefined' === typeof button.data( 'smush' ) ||
			! button.data( 'smush' )
		);
		this.button = jQuery( button[ 0 ] );
		this.is_bulk = typeof bulk ? bulk : false;
		this.url = ajaxurl;
		this.log = jQuery( '.smush-final-log' );

		this.setIds();

		this.mixPanel = MixPanel.getInstance();

		this.is_bulk_resmush =
			0 < wp_smushit_data.resmush.length && ! this.skip_resmush;
		this.status = this.button.parent().prev( '.smush-status' );

		// Added for NextGen support.
		this.smush_type = type;
		this.single_ajax_suffix =
			'nextgen' === this.smush_type
				? 'smush_manual_nextgen'
				: 'wp_smushit_manual';
		this.bulk_ajax_suffix =
			'nextgen' === this.smush_type
				? 'wp_smushit_nextgen_bulk'
				: 'wp_smushit_bulk';
		this.get_stats_action = 'nextgen' === this.smush_type ? 'nextgen_get_stats' : 'get_stats';
		this.url = this.is_bulk
			? Smush.smushAddParams( this.url, {
				action: this.bulk_ajax_suffix,
			} )
			: Smush.smushAddParams( this.url, {
				action: this.single_ajax_suffix,
			} );

		this.start();
		( ! this.is_bulk ) && this.run();
		this.bindDeferredEvents();

		// Handle cancel ajax.
		// this.cancelAjax();

		return this;
	}

	/**
	 * Add params to the URL.
	 *
	 * @param {string} url  URL to add the params to.
	 * @param {Object} data Object with params.
	 * @return {string}  URL with params.
	 */
	static smushAddParams( url, data ) {
		if ( ! jQuery.isEmptyObject( data ) ) {
			url +=
				( url.indexOf( '?' ) >= 0 ? '&' : '?' ) + jQuery.param( data );
		}

		return url;
	}

	/**
	 * Check membership validity.
	 *
	 * @param {Object} data
	 * @param {number} data.show_warning
	 */
	static membershipValidity( data ) {
		const memberValidityNotice = jQuery( '#wp-smush-invalid-member' );

		// Check for membership warning.
		if (
			'undefined' !== typeof data &&
			'undefined' !== typeof data.show_warning &&
			memberValidityNotice.length > 0
		) {
			if ( data.show_warning ) {
				memberValidityNotice.show();
			} else {
				memberValidityNotice.hide();
			}
		}
	}

	/**
	 * Send Ajax request for compressing the image.
	 *
	 * @param {boolean} isBulkResmush
	 * @param {number}  id
	 * @param {string}  sendUrl
	 * @param {string}  nonce
	 * @param {boolean} newBulkSmushStarted
	 * @return {*|jQuery.promise|void}  Compression results.
	 */
	static ajax( isBulkResmush, id, sendUrl, nonce, newBulkSmushStarted= false ) {
		const param = jQuery.param( {
			is_bulk_resmush: isBulkResmush,
			attachment_id: id,
			_nonce: nonce,
			new_bulk_smush_started: newBulkSmushStarted
		} );

		return jQuery.ajax( {
			type: 'GET',
			data: param,
			url: sendUrl,
			/** @param {Array} wp_smushit_data */
			timeout: wp_smushit_data.timeout,
			dataType: 'json',
		} );
	}

	/**
	 * Sets this.ids.
	 */
	setIds() {
		let ids = [];
		if ( 0 < wp_smushit_data.resmush.length && ! this.skip_resmush ) {
			if ( 0 < wp_smushit_data.unsmushed.length ) {
				ids = wp_smushit_data.resmush.concat( wp_smushit_data.unsmushed );
			} else {
				ids = wp_smushit_data.resmush;
			}
		} else {
			ids = wp_smushit_data.unsmushed;
		}

		if ( 'object' === typeof ids ) {
			// If button has re-Smush class, and we do have ids that needs to re-Smushed, put them in the list.
			this.ids = ids.filter( function( itm, i, a ) {
				return i === a.indexOf( itm );
			} );
		} else {
			this.ids = ids;
		}
	}

	/**
	 * Show loader in button for single and bulk Smush.
	 */
	start() {
		this.button.prop( 'disabled', true );
		this.button.addClass( 'wp-smush-started' );

		this.bulkStart();
		this.singleStart();
	}

	/**
	 * Start bulk Smush.
	 */
	bulkStart() {
		if ( ! this.is_bulk ) {
			return;
		}

		// Hide the bulk div.
		jQuery( '.wp-smush-bulk-wrapper' ).addClass( 'sui-hidden' );

		// Hide the bulk limit message.
		jQuery(
			'.wp-smush-bulk-progress-bar-wrapper .sui-notice-warning:first-of-type'
		).hide();

		// Hide parent wrapper, if there are no other messages.
		if (
			0 >= jQuery( 'div.smush-final-log .smush-bulk-error-row' ).length
		) {
			jQuery( 'div.smush-final-log' ).addClass('sui-hidden');
		}

		// Show the progress bar.
		jQuery(
			'.bulk-smush-wrapper .wp-smush-bulk-progress-bar-wrapper, #wp-smush-running-notice'
		).removeClass( 'sui-hidden' );
	}

	/**
	 * Start single image Smush.
	 */
	singleStart() {
		if ( this.is_bulk ) {
			return;
		}

		this.button.html(
			'<span class="spinner wp-smush-progress">' +
				window.wp_smush_msgs.smushing +
				'</span>'
		);
		this.status.removeClass( 'error' );
	}

	/**
	 * Enable button.
	 */
	enableButton() {
		this.button.prop( 'disabled', false );
		jQuery('.wp-smush-all').prop('disabled', false);
		jQuery('.wp-smush-restore').prop('disabled', false);
		// For bulk process, enable other buttons.
		jQuery(
			'a.wp-smush-lossy-enable, button.wp-smush-resize-enable, button#save-settings-button'
		).prop('disabled', false);
	}

	/**
	 * Finish single image Smush.
	 */
	singleDone() {
		if ( this.is_bulk ) {
			return;
		}

		const self = this;

		this.request
			.done( function( response ) {
				if ( 'undefined' !== typeof response.data ) {
					// Check if stats div exists.
					const parent = self.status.parent();

					// Check whether to show membership validity notice or not.
					Smush.membershipValidity( response.data );

					if ( ! response.success ) {
						if ( response.data.html_stats ) {
							parent.html( response.data.html_stats );
						} else {
							self.status.addClass( 'smush-warning' );
							/** @param {string} response.data.error_msg */
							self.status.html( response.data.error_msg );
							self.button.html(
								window.smush_vars.strings.stats_label
							);
						}
					} else {
						// If we've updated status, replace the content.
						parent.html( response.data );
						self.button.html( window.wp_smush_msgs.all_done );
					}

					/**
					 * Update image size in attachment info panel.
					 *
					 * @param {string|number} response.data.new_size
					 */
					Smush.updateImageStats( response.data.new_size );
				}
			} )
			.fail( function( response ) {
				self.status.html( response.data );
				self.status.addClass( 'smush-warning' );
				self.enableButton();
			} );
	}

	/**
	 * Get total images left to optimize.
	 *
	 * @see get_total_images_to_smush() in Abstract_Summary_Page class.
	 *
	 * @since 3.10.0
	 */
	static getTotalImagesToSmush() {
		const imagesToResmush = wp_smushit_data.resmush.length;

		const unsmushedCount = wp_smushit_data.count_total - wp_smushit_data.count_smushed;

		if ( unsmushedCount > 0 ) {
			return imagesToResmush + unsmushedCount;
		}

		return imagesToResmush;
	}

	/**
	 * Update the "optimized images" score on the summary meta box.
	 *
	 * @see get_grade_data() in Abstract_Summary_Page class.
	 *
	 * @since 3.10.0
	 */
	static updateScoreProgress() {
		let grade = 'sui-grade-dismissed';
		let percentOptimized = 0;
		let percentMetric = 0;

		const totalImagesToSmush = Smush.getTotalImagesToSmush();
		const totalImages = parseInt( wp_smushit_data.count_total );

		if ( totalImages === totalImagesToSmush ) {
			if ( totalImages > 0 ) {
				grade = 'sui-grade-f';
			}
			percentMetric = 100;
		} else if ( 0 < totalImages ) {
			percentOptimized = Math.floor( ( totalImages - totalImagesToSmush ) * 100 / totalImages );
			percentMetric = percentOptimized;
			grade = 'sui-grade-f';

			if ( percentOptimized >= 60 && percentOptimized < 90 ) {
				grade = 'sui-grade-c';
			} else if ( percentOptimized >= 90 ) {
				grade = 'sui-grade-a';
			}
		}

		const imageScore = jQuery( '#smush-image-score' );

		imageScore
			.removeClass(
				function( index, className ) {
					const matchedClasses = className.match( /(^|\s)sui-grade-\S+/g );
					return ( matchedClasses || [] ).join( ' ' );
				}
			)
			.addClass( grade )
			.attr( 'data-score', percentOptimized )
			.find( '.sui-circle-score-label' ).html( percentOptimized );

		imageScore
			.find( 'circle:last-child' )
			.attr( 'style', '--metric-array:' + ( 2.63893782902 * percentMetric ) + ' ' + ( 263.893782902 - percentMetric ) );
	}

	/**
	 * Update all stats sections based on the response.
	 *
	 * @param {string} scanType Current scan type.
	 */
	static updateStats( scanType ) {
		const isNextgen = 'undefined' !== typeof scanType && 'nextgen' === scanType;

		// Calculate updated savings in bytes.
		wp_smushit_data.savings_bytes = parseInt( wp_smushit_data.size_before ) - parseInt( wp_smushit_data.size_after );

		const formattedSize = WP_Smush.helpers.formatBytes( wp_smushit_data.savings_bytes, 0 );
		const statsHuman = jQuery( '.wp-smush-savings .wp-smush-stats-human' );

		if ( isNextgen ) {
			statsHuman.html( formattedSize );
		} else {
			statsHuman.html( WP_Smush.helpers.getFormatFromString( formattedSize ) );
			jQuery( '.sui-summary-large.wp-smush-stats-human' )
				.html( WP_Smush.helpers.getSizeFromString( formattedSize ) );
		}

		// Update the savings percent.
		wp_smushit_data.savings_percent = WP_Smush.helpers.precise_round(
			( parseInt( wp_smushit_data.savings_bytes ) /
				parseInt( wp_smushit_data.size_before ) ) *
				100,
			1
		);
		if ( ! isNaN( wp_smushit_data.savings_percent ) ) {
			jQuery( '.wp-smush-savings .wp-smush-stats-percent' )
				.html( wp_smushit_data.savings_percent );
		}

		// Update image count.
		if ( isNextgen ) {
			jQuery( '.sui-summary-details span.wp-smush-total-optimised' )
				.html( wp_smushit_data.count_images );
		} else {
			jQuery( 'span.smushed-items-count span.wp-smush-count-total span.wp-smush-total-optimised' )
				.html( wp_smushit_data.count_images );
		}

		// Update resize image count.
		if ( wp_smushit_data.count_resize > 0 ) {
			jQuery( 'span.smushed-items-count span.wp-smush-count-resize-total' ).removeClass( 'sui-hidden' );
			jQuery( 'span.smushed-items-count span.wp-smush-count-resize-total span.wp-smush-total-optimised' )
				.html( wp_smushit_data.count_resize );
		}

		// Update super-Smushed image count.
		const smushedCountDiv = jQuery( 'li.super-smush-attachments .smushed-count' );
		if ( smushedCountDiv.length && 'undefined' !== typeof wp_smushit_data.count_supersmushed ) {
			smushedCountDiv.html( wp_smushit_data.count_supersmushed );
		}

		// Update conversion savings.
		const smushConversionSavings = jQuery( '.smush-conversion-savings' );
		if (
			smushConversionSavings.length > 0 &&
			'undefined' !== typeof wp_smushit_data.savings_conversion &&
			wp_smushit_data.savings_conversion !== ''
		) {
			const conversionSavings = smushConversionSavings.find( '.wp-smush-stats' );
			if ( conversionSavings.length > 0 ) {
				conversionSavings.html(
					WP_Smush.helpers.formatBytes( wp_smushit_data.savings_conversion, 1 )
				);
			}
		}
	}

	/**
	 * Update image size in attachment info panel.
	 *
	 * @since 2.8
	 *
	 * @param {number} newSize
	 */
	static updateImageStats( newSize ) {
		if ( 0 === newSize ) {
			return;
		}

		const attachmentSize = jQuery( '.attachment-info .file-size' );
		const currentSize = attachmentSize
			.contents()
			.filter( function() {
				return this.nodeType === 3;
			} )
			.text();

		// There is a space before the size.
		if ( currentSize !== ' ' + newSize ) {
			const sizeStrongEl = attachmentSize
				.contents()
				.filter( function() {
					return this.nodeType === 1;
				} )
				.text();
			attachmentSize.html(
				'<strong>' + sizeStrongEl + '</strong> ' + newSize
			);
		}
	}

	/**
	 * Sync stats.
	 */
	syncStats() {
		const messageHolder = jQuery(
			'div.wp-smush-bulk-progress-bar-wrapper div.wp-smush-count.tc'
		);
		// Store the existing content in a variable.
		const progressMessage = messageHolder.html();
		/** @param {string} wp_smush_msgs.sync_stats */
		messageHolder.html( window.wp_smush_msgs.sync_stats );

		const self = this;

		// Send ajax.
		return jQuery
			.ajax( {
				type: 'GET',
				url: ajaxurl,
				data: {
					action: this.get_stats_action,
					_ajax_nonce: window.wp_smush_msgs.nonce,
				},
				success( response ) {
					if ( ! response?.success ) {
						WP_Smush.helpers.showNotice( response, {
							showdismiss: true,
							autoclose: false,
						} );
						return;
					}
					GlobalStats.updateGlobalStatsFromSmushScriptData( response.data );
					GlobalStats.renderStats();
					SmushProgress.update( 0, response.data.remaining_count );

					jQuery('.wp-smush-scan').prop('disabled', false);
					self.hideBulkFreeLimitReachedNotice();
				},
			} )
			.always( () => messageHolder.html( progressMessage ) );
	}

	/**
	 * After the bulk optimization has been finished.
	 */
	bulkDone() {
		if ( ! this.is_bulk ) {
			return;
		}

		// Enable the button.
		this.enableButton();

		// Show notice.
		if ( 0 === this.ids.length ) {
			jQuery('.bulk-smush-wrapper .wp-smush-all-done').removeClass( 'sui-hidden' );
			jQuery( '.wp-smush-bulk-wrapper' ).addClass( 'sui-hidden' );
			// Hide the progress bar if scan is finished.
			jQuery( '.wp-smush-bulk-progress-bar-wrapper' ).addClass( 'sui-hidden' );

			// Reset the progress when we finish so the next smushing starts from zero.
			this._updateProgress(0, 0);
		} else {
			// TODO: REMOVE "re-smush-notice" since no longer used. And maybe for "wp-smush-remaining" too.
			const notice = jQuery(
				'.bulk-smush-wrapper .wp-smush-resmush-notice'
			);

			if ( notice.length > 0 ) {
				notice.show();
			} else {
				jQuery( '.bulk-smush-wrapper .wp-smush-remaining' ).removeClass( 'sui-hidden' );
			}
		}

		// Enable re-Smush and scan button.
		jQuery( '.wp-resmush.wp-smush-action' ).removeProp(
			'disabled'
		);
	}
	
	showAnimatedUpsellNotice() {
		if ( ! this.errors.length  ) {
			return;
		}
		// Only show animated upsell if exists an animated error in first 5 errors.
		// Note, this.errors will be reset each we resume so let detect animated error from elements.
		const bulkErrors = document.querySelector('.smush-bulk-errors');
		if ( ! bulkErrors ) {
			return;
		}
		const firstAnimatedError = bulkErrors.querySelector( '[data-error-code="animated"]' );
		if ( ! firstAnimatedError ) {
			return;
		}
		const first5Errors = Array.prototype.slice.call(bulkErrors.childNodes, 0, 5 );
		return first5Errors.includes( firstAnimatedError );
	}

	maybeShowCDNActivationNotice() {
		// Only for pro users.
		if ( ! wp_smush_msgs.smush_cdn_activation_notice || ! this.showAnimatedUpsellNotice() ) {
			return;
		}
		WP_Smush.helpers.renderActivationCDNNotice( wp_smush_msgs.smush_cdn_activation_notice );
	}

	maybeShowUnlimitedUpsellNotice() {
		const unlimitedUpsellNotice = document.querySelector('.wp-smush-global-upsell');
		if ( ! unlimitedUpsellNotice ) {
			return;
		}
		unlimitedUpsellNotice.classList.remove( 'sui-hidden' );
	}

	maybeShowBulkErrorActions() {
		if ( ! this.errors.length ) {
			return;
		}
		const bulkErrorActionsElement = document.querySelector('.smush-bulk-errors-actions');
		if ( ! bulkErrorActionsElement ) {
			return;
		}

		bulkErrorActionsElement.classList.remove('sui-hidden');
	}

	/**
	 * Free Smush limit exceeded.
	 */
	freeExceeded() {
		const progress = jQuery( '.wp-smush-bulk-progress-bar-wrapper' );
		progress.addClass( 'wp-smush-exceed-limit' ).removeClass('sui-hidden');
		progress
			.find( '.sui-progress-block .wp-smush-cancel-bulk' )
			.removeClass( 'sui-hidden' );
		progress
			.find( '.sui-progress-block .wp-smush-all' )
			.addClass( 'sui-hidden' );

		progress
			.find( 'i.sui-icon-loader' )
			.addClass( 'sui-icon-info' )
			.removeClass( 'sui-icon-loader' )
			.removeClass( 'sui-loading' );

		document
			.getElementById( 'bulk-smush-resume-button' )
			.classList.remove( 'sui-hidden' );

		this.showBulkFreeLimitReachedNotice();
	}

	showBulkFreeLimitReachedNotice() {
		const bulkFreeLimitReachedNotice = document.getElementById( 'smush-limit-reached-notice' );
		if ( bulkFreeLimitReachedNotice ) {
			bulkFreeLimitReachedNotice.classList.remove( 'sui-hidden' );
		}
	}

	hideBulkFreeLimitReachedNotice() {
		const bulkFreeLimitReachedNotice = document.getElementById( 'smush-limit-reached-notice' );
		if ( bulkFreeLimitReachedNotice ) {
			bulkFreeLimitReachedNotice.classList.add( 'sui-hidden' );
		}
	}

	/**
	 * Adds the stats for the current image to existing stats.
	 *
	 * @param {Array}   imageStats
	 * @param {string}  imageStats.count
	 * @param {boolean} imageStats.is_lossy
	 * @param {Array}   imageStats.savings_resize
	 * @param {Array}   imageStats.savings_conversion
	 * @param {string}  imageStats.size_before
	 * @param {string}  imageStats.size_after
	 * @param {string}  type
	 */
	static updateLocalizedStats( imageStats, type ) {
		// Increase the Smush count.
		if ( 'undefined' === typeof window.wp_smushit_data ) {
			return;
		}

		// No need to increase attachment count, resize, conversion savings for directory Smush.
		if ( 'media' === type ) {
			wp_smushit_data.count_smushed = parseInt( wp_smushit_data.count_smushed ) + 1;

			// Increase Smushed image count.
			wp_smushit_data.count_images = parseInt( wp_smushit_data.count_images ) + parseInt( imageStats.count );

			// Increase super Smush count, if applicable.
			if ( imageStats.is_lossy ) {
				wp_smushit_data.count_supersmushed = parseInt( wp_smushit_data.count_supersmushed ) + 1;
			}

			// Add to resize savings.
			wp_smushit_data.savings_resize =
				'undefined' !== typeof imageStats.savings_resize.bytes
					? parseInt( wp_smushit_data.savings_resize ) + parseInt( imageStats.savings_resize.bytes )
					: parseInt( wp_smushit_data.savings_resize );

			// Update resize count.
			wp_smushit_data.count_resize =
				'undefined' !== typeof imageStats.savings_resize.bytes
					? parseInt( wp_smushit_data.count_resize ) + 1
					: wp_smushit_data.count_resize;

			// Add to conversion savings.
			wp_smushit_data.savings_conversion =
				'undefined' !== typeof imageStats.savings_conversion &&
				'undefined' !== typeof imageStats.savings_conversion.bytes
					? parseInt( wp_smushit_data.savings_conversion ) + parseInt( imageStats.savings_conversion.bytes )
					: parseInt( wp_smushit_data.savings_conversion );
		} else if ( 'directory_smush' === type ) {
			//Increase smushed image count
			wp_smushit_data.count_images = parseInt( wp_smushit_data.count_images ) + 1;
		} else if ( 'nextgen' === type ) {
			wp_smushit_data.count_smushed = parseInt( wp_smushit_data.count_smushed ) + 1;
			wp_smushit_data.count_supersmushed = parseInt( wp_smushit_data.count_supersmushed ) + 1;

			// Increase Smushed image count.
			wp_smushit_data.count_images = parseInt( wp_smushit_data.count_images ) + parseInt( imageStats.count );
		}

		// If we have savings. Update savings.
		if ( imageStats.size_before > imageStats.size_after ) {
			wp_smushit_data.size_before =
				'undefined' !== typeof imageStats.size_before
					? parseInt( wp_smushit_data.size_before ) + parseInt( imageStats.size_before )
					: parseInt( wp_smushit_data.size_before );
			wp_smushit_data.size_after =
				'undefined' !== typeof imageStats.size_after
					? parseInt( wp_smushit_data.size_after ) + parseInt( imageStats.size_after )
					: parseInt( wp_smushit_data.size_after );
		}

		// Add stats for resizing. Update savings.
		if ( 'undefined' !== typeof imageStats.savings_resize ) {
			wp_smushit_data.size_before =
				'undefined' !== typeof imageStats.savings_resize.size_before
					? parseInt( wp_smushit_data.size_before ) + parseInt( imageStats.savings_resize.size_before )
					: parseInt( wp_smushit_data.size_before );
			wp_smushit_data.size_after =
				'undefined' !== typeof imageStats.savings_resize.size_after
					? parseInt( wp_smushit_data.size_after ) + parseInt( imageStats.savings_resize.size_after )
					: parseInt( wp_smushit_data.size_after );
		}

		// Add stats for conversion. Update savings.
		if ( 'undefined' !== typeof imageStats.savings_conversion ) {
			wp_smushit_data.size_before =
				'undefined' !== typeof imageStats.savings_conversion.size_before
					? parseInt( wp_smushit_data.size_before ) + parseInt( imageStats.savings_conversion.size_before )
					: parseInt( wp_smushit_data.size_before );
			wp_smushit_data.size_after =
				'undefined' !== typeof imageStats.savings_conversion.size_after
					? parseInt( wp_smushit_data.size_after ) + parseInt( imageStats.savings_conversion.size_after )
					: parseInt( wp_smushit_data.size_after );
		}
	}

	/**
	 * Update progress.
	 *
	 * @param {Object} _res
	 */
	updateProgress( _res ) {
		if ( ! this.is_bulk_resmush && ! this.is_bulk ) {
			return;
		}

		let progress = 0;

		// Update localized stats.
		if (
			_res &&
			'undefined' !== typeof _res.data &&
			'undefined' !== typeof _res.data.stats
		) {
			Smush.updateLocalizedStats( _res.data.stats, this.smush_type );
		}

		if ( ! this.is_bulk_resmush ) {
			// Handle progress for normal bulk smush.
			progress =
				( ( this.smushed + this.errors.length ) / this.total ) * 100;
		} else {
			// If the request was successful, update the progress bar.
			if ( _res.success ) {
				// Handle progress for super Smush progress bar.
				if ( wp_smushit_data.resmush.length > 0 ) {
					// Update the count.
					jQuery( '.wp-smush-images-remaining' ).html(
						wp_smushit_data.resmush.length
					);
				} else if (
					0 === wp_smushit_data.resmush.length &&
					0 === this.ids.length
				) {
					// If all images are re-Smushed, show the All Smushed message.
					jQuery('.bulk-resmush-wrapper .wp-smush-all-done').removeClass( 'sui-hidden' );

					// Hide everything else.
					jQuery(
						'.wp-smush-resmush-wrap, .wp-smush-bulk-progress-bar-wrapper'
					).addClass( 'sui-hidden' );
				}
			}

			// Handle progress for normal bulk Smush. Set progress bar width.
			if (
				'undefined' !== typeof this.ids &&
				'undefined' !== typeof this.total &&
				this.total > 0
			) {
				progress =
					( ( this.smushed + this.errors.length ) / this.total ) *
					100;
			}
		}

		// Reset the lossless images count in case of pending images for resmush ( Nextgen only ).
		if (
			'nextgen' === this.smush_type  &&
			wp_smushit_data.resmush.length > 0 && 
			(this.smushed + this.errors.length <= 1)
		) {
			wp_smushit_data.count_images -= (wp_smushit_data.resmush.length + 1);
		}

		// No more images left. Show bulk wrapper and Smush notice.
		if ( 0 === this.ids.length ) {
			// TODO: Check it with BO and maybe move these into progress bar module for reusing.
			jQuery('.bulk-smush-wrapper .wp-smush-all-done').removeClass( 'sui-hidden' );
			jQuery( '.wp-smush-bulk-wrapper' ).addClass( 'sui-hidden' );
		}

		// Increase the progress bar and counter.
		this._updateProgress(
			this.smushed + this.errors.length,
			WP_Smush.helpers.precise_round( progress, 1 )
		);

		// Avoid updating the stats twice when the bulk smush ends on Smush's page.
		if (0 !== this.ids.length || 'nextgen' === this.smush_type) {
			// Update stats and counts.
			Smush.updateStats(this.smush_type);
		}
	}

	/**
	 * Update progress.
	 *
	 * @param {number} count  Number of images optimized.
	 * @param {string} width  Percentage complete.
	 * @private
	 */
	_updateProgress( count, width ) {
		if ( ! this.is_bulk && ! this.is_bulk_resmush ) {
			return;
		}

		// Progress bar label.
		jQuery( 'span.wp-smush-images-percent' ).html( width + '%' );
		// Progress bar.
		jQuery( '.bulk-smush-wrapper .wp-smush-progress-inner' ).css(
			'width',
			width + '%'
		);

		// Progress bar status.
		jQuery( '.bulk-smush-wrapper .sui-progress-state-text' )
			.find( 'span:first-child' )
			.html( count )
			.find( 'span:last-child' )
			.html( this.total );
	}

	/**
	 * Whether to send the ajax requests further or not.
	 *
	 * @return {*|boolean}  Should continue or not.
	 */
	continue() {
		return this.continueSmush && this.ids.length > 0 && this.is_bulk;
		let continueSmush = this.button.attr( 'continue_smush' );

		if ( 'undefined' === typeof continueSmush ) {
			continueSmush = true;
		}

		if ( 'false' === continueSmush || ! continueSmush ) {
			continueSmush = false;
		}

		return continueSmush && this.ids.length > 0 && this.is_bulk;
	}

	onStart() {
		this.deferred = jQuery.Deferred();
		this.deferred.errors = [];
		this.continueSmush = true;
		// TODO: errors will reset after bulk smush limit is reached and user clicks continue.
		this.errors = [];
		// Smushed and total we take from the progress bar... I don't like this :-(
		const progressBar = jQuery(
			'.bulk-smush-wrapper .sui-progress-state-text'
		);
		this.smushed = parseInt(
			progressBar.find( 'span:first-child' ).html()
		);
		this.total = parseInt( progressBar.find( 'span:last-child' ).html() );

		jQuery('.wp-smush-restore').prop('disabled', true);
	}

	/**
	 * Send ajax request for optimizing single and bulk, call update_progress on ajax response.
	 *
	 * @return {*}  Ajax call response.
	 */
	callAjax(newBulkSmushStarted = false) {
		/**
		 * This here little piece of code allows to track auto continue clicks and halts bulk Smush until the page
		 * is reloaded.
		 *
		 * @since 3.5.0
		 * @see https://wordpress.org/plugins/wp-nonstop-smushit/
		 */
		if (
			0 !== perf &&
			'undefined' !== typeof perf &&
			10 > performance.now() - perf
		) {
			this.freeExceeded();
			return this.deferred;
		}

		let nonceValue = window.wp_smush_msgs.nonce;
		// Remove from array while processing so we can continue where left off.
		this.current_id = this.is_bulk
			? this.ids.shift()
			: this.button.data( 'id' );

		// Remove the ID from respective variable as well.
		Smush.updateSmushIds( this.current_id );

		const nonceField = this.button.parent().find( '#_wp_smush_nonce' );
		if ( nonceField.length > 0 ) {
			nonceValue = nonceField.val();
		}

		const self = this;

		this.request = Smush.ajax(
			this.is_bulk_resmush,
			this.current_id,
			this.url,
			nonceValue,
			newBulkSmushStarted
		)
			.done( function( res ) {
				// If no response or success is false, do not process further. Increase the error count except if bulk request limit exceeded.
				if (
					'undefined' === typeof res.success ||
					( 'undefined' !== typeof res.success &&
						false === res.success &&
						'undefined' !== typeof res.data &&
						'limit_exceeded' !== res.data.error )
				) {
					self.errors.push( self.current_id );
					const error = res.data.error;

					/** @param {string} res.data.file_name */
					const errorMsg = WP_Smush.helpers.prepareBulkSmushErrorRow(
						error.error_message,
						error.file_name,
						error.thumbnail,
						self.current_id,
						self.smush_type,
						error.error_code
					);

					self.log.removeClass('sui-hidden');

					// Print the error on screen.
					self.log.find( '.smush-bulk-errors' ).append( errorMsg );
					if ( self.errors.length > 4 ) {
						self.log.find( '.smush-bulk-errors' ).addClass('overflow-box');
						jQuery( '.smush-bulk-errors-actions' ).removeClass( 'sui-hidden' );
					}
				} else if (
					'undefined' !== typeof res.success &&
					res.success
				) {
					// Increment the smushed count if image smushed without errors.
					self.smushed++;
				}

				// Check whether to show the warning notice or not.
				Smush.membershipValidity( res.data );

				/**
				 * Bulk Smush limit exceeded: Stop ajax requests, remove progress bar, append the last image ID
				 * back to Smush variable, and reset variables to allow the user to continue bulk Smush.
				 */
				if (
					'undefined' !== typeof res.data &&
					'limit_exceeded' === res.data.error &&
					'resolved' !== self.deferred.state()
				) {
					// Hide bulk running message.
					const bulkRunning = document.getElementById(
						'wp-smush-running-notice'
					);
					bulkRunning.classList.add( 'sui-hidden' );

					// Add a data attribute to the Smush button, to stop sending ajax.
					// self.button.attr( 'continue_smush', false );
					self.continueSmush = false;

					// Reinsert the current ID.
					wp_smushit_data.unsmushed.unshift( self.current_id );
					self.ids.unshift( self.current_id );

					perf = performance.now();
					self.freeExceeded();
				} else if ( self.is_bulk ) {
					self.updateProgress( res );
					Smush.updateScoreProgress();
				}

				if (0 === self.ids.length && self.is_bulk ) {
					self.onBulkSmushCompleted();
				}

				self.singleDone();
			} )
			.always( function() {
				if ( ! self.continue() || ! self.is_bulk ) {
					// Calls deferred.done()
					self.deferred.resolve();
				} else {
					self.callAjax(false);
				}
			} );

		this.deferred.errors = this.errors;

		return this.deferred;
	}
	
	maybeShowCDNUpsellForPreSiteOnCompleted() {
		// Show upsell cdn.
		const upsellCdn = document.querySelector('.wp-smush-upsell-cdn');
		if ( upsellCdn ) {
			upsellCdn.querySelector('p').innerHTML = wp_smush_msgs.processed_cdn_for_free;
			upsellCdn.classList.remove('sui-hidden');
		}
	}
	
	onBulkSmushCompleted() {
		// Show upsell unlimited on completed.
		this.maybeShowUnlimitedUpsellNotice();
		// Show CDN activation notice for pro users.
		this.maybeShowCDNActivationNotice();
		// Show CDN upsell for old users.
		this.maybeShowCDNUpsellForPreSiteOnCompleted();
		
		this.maybeShowBulkErrorActions();
		
		const callback = this.is_bulk
			? () => this.trackBulkSmushCompleted()
			: () => false;

		this.syncStats().done(callback);
	}

	getPercentOptimized(totalImages, totalImagesToSmush) {
		if (totalImages === totalImagesToSmush || totalImages <= 0) {
			return 100;
		} else {
			return Math.floor((totalImages - totalImagesToSmush) * 100 / totalImages);
		}
	}

	/**
	 * Prepare error row. Will only allow to hide errors for WP media attachments (not nextgen).
	 *
	 * @since 1.9.0
	 *
	 * @param {string} errorMsg   Error message.
	 * @param {string} fileName   File name.
	 * @param {string} thumbnail  Thumbnail for image (if available).
	 * @param {number} id         Image ID.
	 * @param {string} type       Smush type: media or netxgen.
	 *
	 * @return {string}  Row with error.
	 */
	static prepareErrorRow( errorMsg, fileName, thumbnail, id, type ) {
		const thumbDiv =
			'undefined' === typeof thumbnail
				? '<i class="sui-icon-photo-picture" aria-hidden="true"></i>'
				: thumbnail;
		const fileLink =
			'undefined' === fileName || 'undefined' === typeof fileName
				? 'undefined'
				: fileName;

		let tableDiv =
			'<div class="smush-bulk-error-row">' +
			'<div class="smush-bulk-image-data">' +
			thumbDiv +
			'<span class="smush-image-name">' +
			fileLink +
			'</span>' +
			'<span class="smush-image-error">' +
			errorMsg +
			'</span>' +
			'</div>';

		if ( 'media' === type ) {
			tableDiv =
				tableDiv +
				'<div class="smush-bulk-image-actions">' +
				'<button type="button" class="sui-button-icon sui-tooltip sui-tooltip-constrained sui-tooltip-left smush-ignore-image" data-tooltip="' +
				window.wp_smush_msgs.error_ignore +
				'" data-id="' +
				id +
				'">' +
				'<i class="sui-icon-eye-hide" aria-hidden="true"></i>' +
				'</button>' +
				'</div>';
		}

		tableDiv = tableDiv + '</div>';

		return tableDiv;
	}

	trackBulkSmushCompleted() {
		this.mixPanel.trackBulkSmushCompleted( GlobalStats.getGlobalStats() );
	}

	/**
	 * Send ajax request for single and bulk Smushing.
	 */
	run() {
		// If bulk and we have a definite number of IDs.
		if ( this.is_bulk && this.ids.length > 0 ) {
			this.callAjax(true);
		}

		if ( ! this.is_bulk ) {
			this.callAjax();
		}
	}

	/**
	 * Show bulk Smush errors, and disable bulk Smush button on completion.
	 */
	bindDeferredEvents() {
		const self = this;

		this.deferred.done( function() {
			// self.button.removeAttr( 'continue_smush' );
			self.continueSmush = true;

			if ( self.errors.length ) {
				/** @param {string} wp_smush_msgs.error_in_bulk */
				const msg = self.errors.length === self.total ?
								window.wp_smush_msgs.all_failed :
								window.wp_smush_msgs.error_in_bulk
								.replace( '{{errors}}', self.errors.length )
								.replace( '{{total}}', self.total )
								.replace( '{{smushed}}', self.smushed );

				jQuery( '.wp-smush-all-done' )
					.addClass( 'sui-notice-warning' )
					.removeClass( 'sui-notice-success' )
					.find( 'p' )
					.html( msg );
			}

			self.bulkDone();

			// Re-enable the buttons.
			jQuery(
				'.wp-smush-all:not(.wp-smush-finished)'
			).prop('disabled', false);
		} );
	}

	/**
	 * Handles the cancel button click.
	 * Update the UI, and enable the bulk Smush button.
	 */
	cancelAjax() {
			// Add a data attribute to the Smush button, to stop sending ajax.
		// this.button.attr( 'continue_smush', false );
		this.continueSmush = false;
			// Sync and update stats.
		this.syncStats();

		this.request.abort();
		this.enableButton();
		this.button.removeClass( 'wp-smush-started' );
		wp_smushit_data.unsmushed.unshift( this.current_id );
			jQuery( '.wp-smush-bulk-wrapper' ).removeClass( 'sui-hidden' );

			// Hide the progress bar.
			jQuery( '.wp-smush-bulk-progress-bar-wrapper' ).addClass( 'sui-hidden' );

		this.mixPanel.trackBulkSmushCancel();
		this.hideBulkFreeLimitReachedNotice();
	}

	/**
	 * Remove the current ID from the unSmushed/re-Smush variable.
	 *
	 * @param {number} currentId
	 */
	static updateSmushIds( currentId ) {
		if (
			'undefined' !== typeof wp_smushit_data.unsmushed &&
			wp_smushit_data.unsmushed.length > 0
		) {
			const uIndex = wp_smushit_data.unsmushed.indexOf( currentId );
			if ( uIndex > -1 ) {
				wp_smushit_data.unsmushed.splice( uIndex, 1 );
			}
		}

		// Remove from the re-Smush list.
		if (
			'undefined' !== typeof wp_smushit_data.resmush &&
			wp_smushit_data.resmush.length > 0
		) {
			const index = wp_smushit_data.resmush.indexOf( currentId );
			if ( index > -1 ) {
				wp_smushit_data.resmush.splice( index, 1 );
			}
		}
	}
}

export default Smush;