/**
 * RSM Image — click-to-expand lightbox (uses shared rsmspark-cw-modal).
 *
 * @package Rsmspark_Content_Widgets
 */
(function (window, document, $) {
	'use strict';

	function fillLightboxBody(state, src, alt, caption) {
		if (!state.body) {
			return;
		}
		state.body.innerHTML = '';
		var img = document.createElement('img');
		img.className = 'rsmspark-cw-image__lightbox-img';
		img.src = src;
		img.alt = alt;
		img.decoding = 'async';
		state.body.appendChild(img);
		if (caption) {
			var p = document.createElement('p');
			p.className = 'rsmspark-cw-image__lightbox-caption';
			p.textContent = caption;
			state.body.appendChild(p);
		}
	}

	function getModalState($root) {
		var existing = $root.data('ri-lightbox-state');
		if (existing) {
			return existing;
		}

		var $modal = $root.find('.rsmspark-cw-image__lightbox');
		var state = {
			modal: $modal.get(0),
			dialog: $modal.find('.rsmspark-cw-image__lightbox-dialog').get(0),
			body: $modal.find('.rsmspark-cw-image__lightbox-body').get(0),
			closeButton: $modal.find('.rsmspark-cw-image__lightbox-close').get(0),
			bodyClass: 'rsmspark-cw-image-lightbox-open',
			trigger: null,
		};

		$root.data('ri-lightbox-state', state);
		return state;
	}

	function openLightbox($root, $trigger) {
		if (!window.RsmCwModal) {
			return;
		}

		var $t = $trigger && $trigger.length ? $trigger : null;
		var src = ($t && $t.attr('data-lightbox-src')) || $root.attr('data-lightbox-src') || '';
		if (!src) {
			return;
		}

		var state = getModalState($root);
		state.trigger = $t ? $t.get(0) : null;
		state.labeledBy = '';
		fillLightboxBody(
			state,
			src,
			($t && $t.attr('data-lightbox-alt')) || $root.attr('data-lightbox-alt') || '',
			($t && $t.attr('data-lightbox-caption')) || $root.attr('data-lightbox-caption') || ''
		);

		window.RsmCwModal.open(state);
	}

	function closeLightbox($root) {
		var state = $root.data('ri-lightbox-state');
		if (!state || !window.RsmCwModal) {
			return;
		}
		window.RsmCwModal.close(state);
	}

	function initImageLightbox(root) {
		var $root = $(root);

		if (!$root.is('[data-rsmspark-cw-image-lightbox="1"]')) {
			return;
		}

		$root.off('.riLightbox');

		$root.on('click.riLightbox', '.rsmspark-cw-image__lightbox-trigger', function (event) {
			event.preventDefault();
			openLightbox($root, $(this));
		});

		$root.on('keydown.riLightbox', '.rsmspark-cw-image__lightbox-trigger', function (event) {
			if (event.key !== 'Enter' && event.key !== ' ') {
				return;
			}
			event.preventDefault();
			openLightbox($root, $(this));
		});

		$root.on('click.riLightbox', '.rsmspark-cw-image__lightbox-backdrop, .rsmspark-cw-image__lightbox-close', function () {
			closeLightbox($root);
		});

		$root.on('click.riLightbox', '.rsmspark-cw-image__lightbox-dialog', function (event) {
			event.stopPropagation();
		});
	}

	function boot(scope) {
		var $scope = scope && scope !== document ? $(scope) : $(document);
		$scope.find('[data-rsmspark-cw-image-lightbox="1"]').addBack('[data-rsmspark-cw-image-lightbox="1"]').each(function () {
			initImageLightbox(this);
		});
	}

	$(function () {
		boot(document);
	});

	window.rsmCwImageLightboxInit = boot;
})(window, document, jQuery);
