/* eslint-disable camelcase */

/**
 * TinyMCE Shortcode Plugin
 *
 * Uses shared Alpine.js shortcodeBuilder component.
 *
 * @since 0.5.11
 * @since 0.14.1 Refactored to use Alpine.js shortcodeBuilder component
 */

// Initialize plugin object
window.SportsLeaguesShortcodeButton = window.SportsLeaguesShortcodeButton || {};

// Localization vars
window._sl_shortcodes_l10n = window._sl_shortcodes_l10n || {};

( function( window, document, $, plugin ) {
	'use strict';

	var $c = {};

	plugin.init = function() {
		plugin.cache();
		plugin.bindEvents();

		tinymce.create( 'tinymce.plugins.sports_leagues', {
			init: function( editor ) {
				editor.addButton( 'sports_leagues_button', {
					title: _sl_shortcodes_l10n.sports_leagues,
					icon: 'icon sl-shortcode-button-icon',
					classes: 'anwp-sl-shortcode-modal-bump',
					onclick: function() {
						if ( $.fn.modaal && $c.body.hasClass( 'block-editor-page' ) ) {
							$c.modal.modaal( 'open' );
						}
					}
				} );
			},
			createControl: function() {
				return null;
			}
		} );

		tinymce.PluginManager.add( 'sports_leagues', tinymce.plugins.sports_leagues );
	};

	plugin.cache = function() {
		$c.window = $( window );
		$c.body = $( document.body );
		$c.xhr = null;
	};

	plugin.bindEvents = function() {
		if ( document.readyState === 'complete' ) {
			plugin.onPageReady();
		} else {
			window.onload = plugin.onPageReady;
		}
	};

	plugin.onPageReady = function() {
		if ( ! $.fn.modaal ) {
			return;
		}

		var modalOptions = {};

		if ( $c.body.hasClass( 'block-editor-page' ) ) {
			$c.body.append( '<a href="#anwp-sl-shortcode-modal" id="anwp-sl-shortcode-modal-bump"></a><div id="anwp-sl-shortcode-modal"></div>' );
			$c.modal = $( '#anwp-sl-shortcode-modal-bump' );
			$c.modalWrapper = $( '#anwp-sl-shortcode-modal' );

			modalOptions = {
				custom_class: 'anwp-sl-shortcode-modal',
				hide_close: true,
				animation: 'none',
				after_open: function() {
					plugin.initAlpineComponent();
				},
				after_close: function() {
					tinymce.activeEditor.focus();
					plugin.cleanupAlpineComponent();
				}
			};
		} else {
			$c.body.append( '<div id="anwp-sl-shortcode-modal"></div>' );
			$c.modal = $( '.mce-anwp-sl-shortcode-modal-bump' );
			$c.modalWrapper = $( '#anwp-sl-shortcode-modal' );

			modalOptions = {
				content_source: '#anwp-sl-shortcode-modal',
				custom_class: 'anwp-sl-shortcode-modal',
				hide_close: true,
				animation: 'none',
				after_open: function() {
					plugin.initAlpineComponent();
				},
				after_close: function() {
					tinymce.activeEditor.focus();
					plugin.cleanupAlpineComponent();
				}
			};
		}

		// Init modal
		$c.modal.modaal( modalOptions );

		// Create modal structure with Alpine component
		plugin.createModalContent();
	};

	plugin.createModalContent = function() {
		var shortcodeOptions = plugin.getShortcodeOptionsHtml();

		var modalHtml = `
			<div
				class="anwp-sl-shortcode-modal-content"
				sl-x-data="shortcodeBuilder({ isModal: true })"
				sl-x-on:shortcode-inserted.window="closeShortcodeModal()"
			>
				<div class="anwp-sl-shortcode-modal__header d-flex align-items-center p-3 border-bottom">
					<label for="anwp-sl-shortcode-modal__selector" class="mr-2">${ _sl_shortcodes_l10n.shortcode || 'Shortcode' }</label>
					<select
						id="anwp-sl-shortcode-modal__selector"
						class="flex-grow-1"
						sl-x-model="selectedShortcode"
						sl-x-on:change="loadForm()"
					>
						<option value="">- ${ _sl_shortcodes_l10n.select || 'select' } -</option>
						${ shortcodeOptions }
					</select>
					<span class="spinner ml-2" sl-x-bind:class="{ 'is-active': loading }"></span>
				</div>

				<div
					class="anwp-sl-shortcode-modal__content p-3"
					style="max-height: 400px; overflow-y: auto;"
					sl-x-ref="formWrap"
					sl-x-html="formHtml"
					sl-x-on:input.debounce.150ms="buildShortcode()"
					sl-x-on:change="buildShortcode()"
					sl-x-on:update-x-sl-outer-wrapper.window="buildShortcode()"
				></div>

				<div class="anwp-sl-shortcode-modal__footer p-3 border-top">
					<button
						type="button"
						class="button mr-2"
						onclick="window.closeShortcodeModal()"
					>${ _sl_shortcodes_l10n.cancel || 'Close' }</button>
					<button
						type="button"
						class="button button-primary"
						sl-x-on:click="insertToEditor()"
						sl-x-bind:disabled="!shortcodeString"
					>${ _sl_shortcodes_l10n.insert || 'Insert Shortcode' }</button>
				</div>
			</div>
		`;

		$c.modalWrapper.html( modalHtml );

		// Store localization data for Alpine component
		window._sl_shortcode_builder_l10n = window._sl_shortcode_builder_l10n || {
			nonce: _sl_shortcodes_l10n.nonce,
			copied_to_clipboard: _sl_shortcodes_l10n.copied_to_clipboard || 'Copied to Clipboard'
		};
	};

	plugin.getShortcodeOptionsHtml = function() {
		var html = '';

		// Core options first (already sorted alphabetically from PHP)
		var coreOptions = _sl_shortcodes_l10n.shortcode_options || {};
		var coreKeys = Object.keys( coreOptions ).sort( function( a, b ) {
			return coreOptions[ a ].localeCompare( coreOptions[ b ] );
		} );

		coreKeys.forEach( function( key ) {
			html += '<option value="' + key + '">' + coreOptions[ key ] + '</option>';
		} );

		// Premium options after core (already sorted alphabetically from PHP)
		var premiumOptions = _sl_shortcodes_l10n.shortcode_options_premium || {};
		var premiumKeys = Object.keys( premiumOptions ).sort( function( a, b ) {
			return premiumOptions[ a ].localeCompare( premiumOptions[ b ] );
		} );

		premiumKeys.forEach( function( key ) {
			html += '<option value="' + key + '">' + premiumOptions[ key ] + '</option>';
		} );

		return html;
	};

	plugin.initAlpineComponent = function() {
		// Initialize Alpine on modal content if Alpine is available
		if ( typeof Alpine !== 'undefined' && $c.modalWrapper.length ) {
			var el = $c.modalWrapper.find( '.anwp-sl-shortcode-modal-content' )[ 0 ];
			if ( el && ! el._x_dataStack ) {
				Alpine.initTree( el );
			}
		}
	};

	plugin.cleanupAlpineComponent = function() {
		// Reset the component state
		if ( typeof Alpine !== 'undefined' && $c.modalWrapper.length ) {
			var el = $c.modalWrapper.find( '.anwp-sl-shortcode-modal-content' )[ 0 ];
			if ( el && el._x_dataStack ) {
				// Get the component data and reset it
				var data = Alpine.$data( el );
				if ( data ) {
					data.destroy();
					data.selectedShortcode = '';
					data.formHtml = '';
					data.shortcodeString = '';
				}
			}
		}
	};

	// Global close function
	window.closeShortcodeModal = function() {
		if ( $c.modal && $.fn.modaal ) {
			$c.modal.modaal( 'close' );
		}
	};

	plugin.init();
}( window, document, jQuery, window.SportsLeaguesShortcodeButton ) );
