// WARNING: This file is distributed verbatim in Jetpack. There should be nothing WordPress.com specific in this file @hide-in-jetpack
/**
 * This PaypalExpressCheckout global is included by wp_enqueue_script( 'jetpack-paypal-express-checkout' );
 * It handles communication with Paypal Express checkout and public-api.wordpress.com for the purposes
 * of simple-payments module.
 */

/* global paypal, jQuery */
/* exported PaypalExpressCheckout */
var PaypalExpressCheckout = {
	primaryCssClassName: 'jetpack-simple-payments',
	messageCssClassName: 'jetpack-simple-payments-purchase-message',

	wpRestAPIHost: 'https://public-api.wordpress.com',
	wpRestAPIVersion: '/wpcom/v2',

	getEnvironment: function () {
		if (
			localStorage &&
			localStorage.getItem &&
			localStorage.getItem( 'simple-payments-env' ) === 'sandbox'
		) {
			return 'sandbox';
		}
		return 'production';
	},

	getCreatePaymentEndpoint: function ( blogId ) {
		return (
			PaypalExpressCheckout.wpRestAPIHost +
			PaypalExpressCheckout.wpRestAPIVersion +
			'/sites/' +
			blogId +
			'/simple-payments/paypal/payment'
		);
	},

	getExecutePaymentEndpoint: function ( blogId, paymentId ) {
		return (
			PaypalExpressCheckout.wpRestAPIHost +
			PaypalExpressCheckout.wpRestAPIVersion +
			'/sites/' +
			blogId +
			'/simple-payments/paypal/' +
			paymentId +
			'/execute'
		);
	},

	getNumberOfItems: function ( field, enableMultiple ) {
		if ( enableMultiple !== '1' ) {
			return 1;
		}

		var numberField = document.getElementById( field );

		if ( ! numberField ) {
			return 1;
		}

		var number = Number( numberField.value );

		if ( isNaN( number ) ) {
			return 1;
		}
		return number;
	},

	/**
	 * Get the DOM element-placeholder used to show message
	 * about the transaction. If it doesn't exist then the function will create a new one.
	 *
	 * @param  string domId id of the payment button placeholder
	 * @return Element the dom element to print the message
	 */
	getMessageContainer: function ( domId ) {
		return document.getElementById( domId + '-message-container' );
	},

	/**
	 * Show a messange close to the Paypal button.
	 * Use this function to give feedback to the user according
	 * to the transaction result.
	 *
	 * @param  {String} message message to show
	 * @param  {String} domId paypal-button element dom identifier
	 * @param  {Boolean} [error] defines if it's a message error. Not TRUE as default.
	 */
	showMessage: function ( message, domId, isError ) {
		var domEl = PaypalExpressCheckout.getMessageContainer( domId );

		// set css classes
		var cssClasses = PaypalExpressCheckout.messageCssClassName + ' show ';
		cssClasses += isError ? 'error' : 'success';

		// show message 1s after PayPal popup is closed
		setTimeout( function () {
			domEl.innerHTML = message;
			domEl.setAttribute( 'class', cssClasses );
		}, 1000 );
	},

	showError: function ( message, domId ) {
		PaypalExpressCheckout.showMessage( message, domId, true );
	},

	processErrorMessage: function ( errorResponse ) {
		var error = errorResponse ? errorResponse.responseJSON : null;
		var defaultMessage = 'There was an issue processing your payment.';

		if ( ! error ) {
			return '<p>' + defaultMessage + '</p>';
		}

		if ( error.additional_errors ) {
			var messages = [];
			error.additional_errors.forEach( function ( additionalError ) {
				if ( additionalError.message ) {
					messages.push( '<p>' + additionalError.message.toString() + '</p>' );
				}
			} );
			return messages.join( '' );
		}

		return '<p>' + ( error.message || defaultMessage ) + '</p>';
	},

	processSuccessMessage: function ( successResponse ) {
		var message = successResponse.message;
		var defaultMessage = 'Thank you. Your purchase was successful!';

		if ( ! message ) {
			return '<p>' + defaultMessage + '</p>';
		}

		return '<p>' + message + '</p>';
	},

	cleanAndHideMessage: function ( domId ) {
		var domEl = PaypalExpressCheckout.getMessageContainer( domId );
		domEl.setAttribute( 'class', PaypalExpressCheckout.messageCssClassName );
		domEl.innerHTML = '';
	},

	renderButton: function ( blogId, buttonId, domId, enableMultiple ) {
		var env = PaypalExpressCheckout.getEnvironment();

		if ( ! paypal ) {
			throw new Error( 'PayPal module is required by PaypalExpressCheckout' );
		}

		var buttonDomId = domId + '_button';

		paypal.Button.render(
			{
				env: env,
				commit: true,

				style: {
					label: 'pay',
					shape: 'rect',
					color: 'silver',
					size: 'responsive',
					fundingicons: true,
				},
			// @start-hide-in-jetpack

			validate: function( actions ) {
				// disable button if it's iframed into calypso.
				var iframed = document.location.href.indexOf('calypso_token') >= 0;
				if ( iframed ) {
					console.log( 'disable button for ' + document.location.host + ' host.' );
					actions.disable();
				} else {
					actions.enable();
				}
			},
			// @end-hide-in-jetpack

				payment: function () {
					PaypalExpressCheckout.cleanAndHideMessage( domId );

					var payload = {
						number: PaypalExpressCheckout.getNumberOfItems( domId + '_number', enableMultiple ),
						buttonId: buttonId,
						env: env,
					};

					return new paypal.Promise( function ( resolve, reject ) {
						jQuery
							.post( PaypalExpressCheckout.getCreatePaymentEndpoint( blogId ), payload )
							.done( function ( paymentResponse ) {
								if ( ! paymentResponse ) {
									PaypalExpressCheckout.showError(
										PaypalExpressCheckout.processErrorMessage(),
										domId
									);
									return reject( new Error( 'server_error' ) );
								}

								resolve( paymentResponse.id );
							} )
							.fail( function ( paymentError ) {
								var paymentErrorMessage = PaypalExpressCheckout.processErrorMessage( paymentError );
								PaypalExpressCheckout.showError( paymentErrorMessage, domId );

								var code =
									paymentError.responseJSON && paymentError.responseJSON.code
										? paymentError.responseJSON.code
										: 'server_error';

								reject( new Error( code ) );
							} );
					} );
				},

				onAuthorize: function ( onAuthData ) {
					var payload = {
						buttonId: buttonId,
						payerId: onAuthData.payerID,
						env: env,
					};
					return new paypal.Promise( function ( resolve, reject ) {
						jQuery
							.post(
								PaypalExpressCheckout.getExecutePaymentEndpoint( blogId, onAuthData.paymentID ),
								payload
							)
							.done( function ( authResponse ) {
								if ( ! authResponse ) {
									PaypalExpressCheckout.showError(
										PaypalExpressCheckout.processErrorMessage(),
										domId
									);
									return reject( new Error( 'server_error' ) );
								}

								PaypalExpressCheckout.showMessage(
									PaypalExpressCheckout.processSuccessMessage( authResponse ),
									domId
								);
								resolve();
							} )
							.fail( function ( authError ) {
								var authErrorMessage = PaypalExpressCheckout.processErrorMessage( authError );
								PaypalExpressCheckout.showError( authErrorMessage, domId );

								var code =
									authError.responseJSON && authError.responseJSON.code
										? authError.responseJSON.code
										: 'server_error';

								reject( new Error( code ) );
							} );
					} );
				},
			},
			buttonDomId
		);
	},
};
;
( function () {
	'use strict';

	if ( typeof window.wpcom === 'undefined' ) {
		window.wpcom = {};
	}

	if ( window.wpcom.carousel ) {
		return;
	}

	var prebuilt_widths = jetpackCarouselStrings.widths;
	var pageviews_stats_args = jetpackCarouselStrings.stats_query_args;

	var findFirstLargeEnoughWidth = function ( original_w, original_h, dest_w, dest_h ) {
		var inverse_ratio = original_h / original_w;

		for ( var i = 0; i < prebuilt_widths.length; ++i ) {
			if ( prebuilt_widths[ i ] >= dest_w || prebuilt_widths[ i ] * inverse_ratio >= dest_h ) {
				return prebuilt_widths[ i ];
			}
		}

		return original_w;
	};

	var removeResizeFromImageURL = function ( url ) {
		return removeArgFromURL( url, 'resize' );
	};

	var removeArgFromURL = function ( url, arg ) {
		var re = new RegExp( '[\\?&]' + arg + '(=[^?&]+)?' );
		if ( url.match( re ) ) {
			return url.replace( re, '' );
		}
		return url;
	};

	var addWidthToImageURL = function ( url, width ) {
		width = parseInt( width, 10 );
		// Give devices with a higher devicePixelRatio higher-res images (Retina display = 2, Android phones = 1.5, etc)
		if ( 'undefined' !== typeof window.devicePixelRatio && window.devicePixelRatio > 1 ) {
			width = Math.round( width * window.devicePixelRatio );
		}
		url = addArgToURL( url, 'w', width );
		url = addArgToURL( url, 'h', '' );
		return url;
	};

	var addArgToURL = function ( url, arg, value ) {
		var re = new RegExp( arg + '=[^?&]+' );
		if ( url.match( re ) ) {
			return url.replace( re, arg + '=' + value );
		} else {
			var divider = url.indexOf( '?' ) !== -1 ? '&' : '?';
			return url + divider + arg + '=' + value;
		}
	};

	var stat = function ( names ) {
		if ( typeof names !== 'string' ) {
			names = names.join( ',' );
		}

		new Image().src = window.location.protocol +
			'//pixel.wp.com/g.gif?v=wpcom-no-pv' +
			'&x_carousel=' + names +
			'&baba=' + Math.random();
	};

	var pageview = function ( post_id ) {
		new Image().src = window.location.protocol +
			'//pixel.wp.com/g.gif?host=' + encodeURIComponent( window.location.host ) +
			'&ref=' + encodeURIComponent( document.referrer ) +
			'&rand=' + Math.random() +
			'&' + pageviews_stats_args +
			'&post=' + encodeURIComponent( post_id );
	};

	var generateImgSrc = function ( srcItem, max ) {
		var origSize = srcItem.getAttribute( 'data-orig-size' ) || '';

		var src = srcItem.getAttribute( 'src' ) || srcItem.getAttribute( 'original' ) || srcItem.getAttribute( 'data-original' ) || srcItem.getAttribute( 'data-lazy-src' );
		if ( src.indexOf( 'imgpress' ) !== -1 ) {
			src = srcItem.getAttribute( 'data-orig-file' );
		}
		// Square/Circle galleries use a resize param that needs to be removed.
		src = removeResizeFromImageURL( src );
		src = addWidthToImageURL(
			src,
			findFirstLargeEnoughWidth( origSize.width, origSize.height, max.width, max.height )
		);

		return src;
	};

	window.wpcom.carousel = {
		findFirstLargeEnoughWidth: findFirstLargeEnoughWidth,
		removeResizeFromImageURL: removeResizeFromImageURL,
		addWidthToImageURL: addWidthToImageURL,
		stat: stat,
		pageview: pageview,
		generateImgSrc: generateImgSrc
	};

} )();
;