/* global jQuery */
/**
 * Perspective Image: image + video lightbox (Magnific Popup).
 *
 * Image URL: `data-mfp-src` or `href` on `a.dsm-image-lightbox`.
 */
(function ( $ ) {
	'use strict';

	/**
	 * @param {JQuery} $module
	 * @return {string}
	 */
	function findPerspectiveOrderClass( $module ) {
		var classes = ( $module.attr( 'class' ) || '' ).split( /\s+/ );
		var i;
		for ( i = 0; i < classes.length; i++ ) {
			if (
				classes[ i ].indexOf( 'et_pb_dsm_perspective_image' ) === 0
			) {
				return classes[ i ];
			}
		}
		return '';
	}

	$( function () {
		if ( typeof $.magnificPopup === 'undefined' ) {
			return;
		}

		$( '.dsm-perspective-image-wrapper' ).each( function () {
			var $wrap = $( this );
			var $imgLink = $wrap.find( 'a.dsm-image-lightbox' );
			if ( ! $imgLink.length ) {
				return;
			}

			if (
				! $imgLink.attr( 'href' ) &&
				! $imgLink.attr( 'data-mfp-src' )
			) {
				return;
			}

			var $module = $wrap.closest( '.et_pb_module' );
			var orderClass = findPerspectiveOrderClass( $module );

			if ( $imgLink.data( 'magnificPopup' ) ) {
				$imgLink.magnificPopup( 'destroy' );
			}

			// Bind on the anchor without `items: { src }` so Magnific keeps a real
			// jQuery `currItem.el` — Divi's FE zoom opener calls .find('img') on it.
			// Alternate lightbox URL comes from `data-mfp-src` (see elementParse).
			$imgLink.magnificPopup( {
				type: 'image',
				removalDelay: 500,
				mainClass: 'mfp-fade',
				callbacks: {
					elementParse: function ( item ) {
						var altSrc = item.el.attr( 'data-mfp-src' );
						if ( altSrc ) {
							item.src = altSrc;
						}
					},
					open: function () {
						if ( orderClass ) {
							this.container.addClass(
								orderClass + ' dsm-lightbox-custom'
							);
						} else {
							this.container.addClass( 'dsm-lightbox-custom' );
						}
					},
				},
				zoom: {
					enabled:
						typeof window.et_pb_custom !== 'undefined' &&
						window.et_pb_custom &&
						! window.et_pb_custom.is_builder_plugin_used,
					duration: 500,
					opener: function ( itemEl ) {
						var $el =
							itemEl && itemEl.find
								? itemEl
								: $( itemEl );
						return $el.find( 'img' );
					},
				},
				autoFocusLast: false,
			} );
		} );

		$( '.dsm-perspective-image-wrapper' ).each( function () {
			var $wrap = $( this );
			var $vid = $wrap.find( 'a.dsm-video-lightbox' );
			if ( ! $vid.length ) {
				return;
			}

			var orderClass = findPerspectiveOrderClass(
				$wrap.closest( '.et_pb_module' )
			);

			$vid.magnificPopup( {
				type: 'iframe',
				removalDelay: 500,
				iframe: {
					markup:
						'<div class="mfp-iframe-scaler dsm-video-popup">' +
						'<div class="mfp-close"></div>' +
						'<iframe class="mfp-iframe" frameborder="0" allowfullscreen allow="autoplay"></iframe>' +
						'</div>',
					patterns: {
						youtube: {
							index: 'youtube.com/',
							id: 'v=',
							src: '//www.youtube.com/embed/%id%?autoplay=1&rel=0',
						},
						youtu_be: {
							index: 'youtu.be',
							id: '/',
							src: '//www.youtube.com/embed/%id%?autoplay=1&rel=0',
						},
						vimeo: {
							index: 'vimeo.com/',
							id: '/',
							src: '//player.vimeo.com/video/%id%?autoplay=1',
						},
						dailymotion: {
							index: 'dailymotion.com',
							id: function ( url ) {
								var m = url.match(
									/^.+dailymotion.com\/(video|hub)\/([^_]+)[^#]*(#video=([^_&]+))?/
								);
								if ( m !== null ) {
									if ( m[ 4 ] !== undefined ) {
										return m[ 4 ];
									}
									return m[ 2 ];
								}
								return null;
							},
							src: 'https://www.dailymotion.com/embed/video/%id%',
						},
					},
					srcAction: 'iframe_src',
				},
				mainClass: 'dsm-video-popup-wrap mfp-fade',
				callbacks: {
					open: function () {
						if ( orderClass ) {
							this.container.addClass(
								orderClass + ' dsm-lightbox-custom'
							);
						} else {
							this.container.addClass( 'dsm-lightbox-custom' );
						}
					},
				},
			} );
		} );
	} );
})( jQuery );
