<?php

/**
 * Shared PeachPay admin notices helper.
 *
 * @package PeachPay
 */

defined( 'PEACHPAY_ABSPATH' ) || exit;
?>
<script>
	(function(window, document) {
		if (window.PeachPayAdminNotices) {
			return;
		}

		var defaultMessages = {
			'saved-changes': <?php echo wp_json_encode( __( 'Changes were saved!', 'peachpay-for-woocommerce' ) ); ?>,
			'saving-changes': <?php echo wp_json_encode( __( 'Your changes are being saved...', 'peachpay-for-woocommerce' ) ); ?>,
			'unsaved-changes': <?php echo wp_json_encode( __( 'Careful - you have unsaved changes!', 'peachpay-for-woocommerce' ) ); ?>,
			'error': <?php echo wp_json_encode( __( 'Something went wrong. Please try again.', 'peachpay-for-woocommerce' ) ); ?>
		};

		function getMessage(key, customMessage) {
			if (typeof customMessage === 'string' && customMessage.trim() !== '') {
				return customMessage;
			}

			return defaultMessages[key] || defaultMessages.error;
		}

		function getContainer(containerSelector) {
			if (typeof containerSelector === 'string' && containerSelector.trim() !== '') {
				return document.querySelector(containerSelector);
			}

			var container = document.querySelector('.peachpay-notices-container');
			if (container) {
				return container;
			}

			container = document.createElement('div');
			container.id = 'peachpay-global-notices-container';
			container.className = 'peachpay-notices-container';
			document.body.appendChild(container);

			return container;
		}

		function removeBanner(selector) {
			if (!selector) {
				return;
			}

			var banner = document.querySelector(selector);
			if (banner) {
				banner.classList.add('removal');
				setTimeout(function() {
					banner.remove();
				}, 200);
			}
		}

		function clearBanners(containerSelector) {
			var container = getContainer(containerSelector);
			if (!container) {
				return;
			}

			Array.prototype.slice.call(container.querySelectorAll('.notice[id*="peachpay_message"]')).forEach(function(banner) {
				removeBanner('#' + banner.id);
			});
		}

		function renderBanner(options) {
			if (!options || !options.type) {
				return null;
			}

			var key = options.key || 'notice';
			var bannerId = options.id || (key + '-peachpay_message');
			var container = getContainer(options.containerSelector);
			if (!container) {
				return null;
			}

			if (options.replaceExisting !== false) {
				clearBanners(options.containerSelector);
			} else {
				removeBanner('#' + bannerId);
			}

			var banner = document.createElement('div');
			banner.id = bannerId;
			banner.className = 'notice notice-' + options.type + ' addition';

			var bannerBody = document.createElement('p');
			var textElement = document.createElement('strong');
			textElement.textContent = getMessage(key, options.message);
			bannerBody.appendChild(textElement);
			banner.appendChild(bannerBody);

			if (options.isDismissible) {
				var buttonWrap = document.createElement('div');
				buttonWrap.className = 'pp-banner-buttons';

				var dismissButton = document.createElement('button');
				dismissButton.type = 'button';
				dismissButton.className = key + '-button pp-notice-dismiss notice-dismiss';
				dismissButton.addEventListener('click', function() {
					removeBanner('#' + bannerId);
				});

				buttonWrap.appendChild(dismissButton);
				banner.appendChild(buttonWrap);
			}

			container.prepend(banner);

			if (options.autoDismissMs && options.autoDismissMs > 0) {
				setTimeout(function() {
					removeBanner('#' + bannerId);
				}, options.autoDismissMs);
			}

			return banner;
		}

		function normalizeBannerOptions(type, key, message, isDismissible, extraOptions) {
			var options = {
				type: type,
				key: key,
				message: message,
				isDismissible: !!isDismissible
			};

			if (extraOptions && typeof extraOptions === 'object') {
				for (var property in extraOptions) {
					if (Object.prototype.hasOwnProperty.call(extraOptions, property)) {
						options[property] = extraOptions[property];
					}
				}
			}

			return options;
		}

		function showBanner(type, key, message, isDismissible, extraOptions) {
			return renderBanner(normalizeBannerOptions(type, key, message, isDismissible, extraOptions));
		}

		function addBanner(type, key, hasAction, isDismissible, extraOptions) {
			var options = {
				type: type,
				key: key,
				hasAction: hasAction,
				isDismissible: isDismissible
			};

			if (typeof extraOptions === 'string') {
				options.message = extraOptions;
			} else if (extraOptions && typeof extraOptions === 'object') {
				for (var property in extraOptions) {
					if (Object.prototype.hasOwnProperty.call(extraOptions, property)) {
						options[property] = extraOptions[property];
					}
				}
			}

			return renderBanner(options);
		}

		window.PeachPayAdminNotices = {
			add: addBanner,
			show: showBanner,
			clear: clearBanners,
			remove: removeBanner,
			getMessage: getMessage
		};
	})(window, document);
</script>
