/** Datei: themes/lcars/assets/js/templates/default.js **/
import '/themes/lcars/assets/js/hooks/menus.js';

ARUNOX.Templates.register( 'default', {
	extends         : 'layout/section',
	hooks           : {
		config          : {
			priority        : 5,
			callback        : function( config, data ) {
				return {
					name        : 'main_section',
					header      : {
						html        : 'h1',
						size        : ARUNOX.Utils.device.isMobile ? 'sm' : 'md',
						after       : config.title,
					},
					aside       : {
						size        : 'xl',
					},
					content     : ARUNOX.Templates.config( 'div', {
						classes     : [ 'frame__content' ],
						datasets    : {
							arx         : {
								node      : 'content',
							},
						},
						content     : config?.content,
					}),
					footer      : {
						after       : config.copyright,
					},
				};
			},
		},
		afterRender     : function( config, data ) {
			this.instance.container.classList.removeRexEx( /template--.*/ );
			this.instance.container.classList.add( 'theme' );

			this.instance.nodes.footer.nodes.before.apply( 'addMenus', 'tools' );

			this.instance.nodes.aside.nodes.before.apply( 'addMenus', 'sidebar' );

			this.instance.render( 'notifications' );
		},
	},
});


/** Datei: themes/lcars/assets/js/templates/dialog.js **/
/**
 * /components/dialog.js
 *
 * Dialog-Component für LCARS - schiebt sich von rechts rein
 *
 * @author         Sparky
 * @copyright      2025 ARUNOX
 * @version        1.0.0
 * @since          1.0.0  File created
 */

ARUNOX.Templates.register('dialog', {
	extends			: 'layout/section',
	hooks			: {
		config			: {
			priority		: 5,
			callback		: function( config, data ) {
				return {
					name		: 'dialog_section',
					color		: 'secondary',
					header		: {
						html		: 'h3',
						size		: 'sm',
						after		: config.title,
						right		: config.close ? {
							content		: [
								ARUNOX.Templates.config('button', {
									icon		: 'bi bi-x-lg',
									color		: 'danger',
									title		: 'Schließen',
									datasets	: {
										arx			: {
											action		: 'close-dialog'
										}
									}
								})
							]
						} : undefined
					},
					aside		: true,
					content		: ARUNOX.Templates.config('div', {
						classes		: ['frame__content'],
						content		: config?.content,
					}),
					// footer		: false,
				};
			},
		},
		afterRender1		: function(config, data) {
			const mainSection = document.querySelector('[data-arx-node="main_section_content"]');

			// Dialog-Wrapper erstellen falls nicht vorhanden
			let dialogWrapper = document.querySelector('.dialog__wrapper');

			if (!dialogWrapper) {
				dialogWrapper = document.createElement('div');
				dialogWrapper.classList.add('dialog__wrapper');

				// Nach der main_section_content einfügen
				if (mainSection) {
					mainSection.parentElement.appendChild(dialogWrapper);
				}
			}

			// Dialog in Wrapper verschieben
			dialogWrapper.appendChild(this.instance.root);

			// Size-Klasse setzen
			const size = config.size || 'md';
			this.instance.root.classList.add('dialog', `dialog--size-${size}`);

			// Animation triggern
			requestAnimationFrame(() => {
				this.instance.root.classList.add('dialog--open');
			});

			// Backdrop hinzufügen wenn gewünscht
			if (config.backdrop) {
				const backdrop = document.createElement('div');
				backdrop.classList.add('dialog__backdrop');
				dialogWrapper.appendChild(backdrop);

				// Backdrop verschieben damit es hinter dem Dialog ist
				dialogWrapper.insertBefore(backdrop, this.instance.root);

				requestAnimationFrame(() => {
					backdrop.classList.add('dialog__backdrop--visible');
				});
			}

			// Content-Section Größe anpassen
			if (mainSection) {
				mainSection.classList.add(`dialog-active--${size}`);
			}

			// Close-Handler
			this.instance.root.addEventListener('click', (event) => {
				const closeBtn = event.target.closest('[data-arx-action="close-dialog"]');

				if (closeBtn || (config.backdrop && event.target.classList.contains('dialog__backdrop'))) {
					this.instance.apply('close');
				}
			});
		},
		close			: function() {
			const mainSection = document.querySelector('[data-arx-node="main_section_content"]');
			const dialogWrapper = this.instance.root.closest('.dialog__wrapper');
			const backdrop = dialogWrapper?.querySelector('.dialog__backdrop');

			// Animation rückwärts
			this.instance.root.classList.remove('dialog--open');
			if (backdrop) backdrop.classList.remove('dialog__backdrop--visible');

			// Content-Section zurücksetzen
			if (mainSection) {
				mainSection.classList.removeRexEx(/dialog-active--.*/);
			}

			// Nach Animation entfernen
			setTimeout(() => {
				if (backdrop) backdrop.remove();
				this.instance.root.remove();

				// Wrapper entfernen wenn leer
				if (dialogWrapper && !dialogWrapper.querySelector('.dialog')) {
					dialogWrapper.remove();
				}
			}, 300);
		}
	},
});