/** Datei: plugins/rest/assets.OLD/js/arunox/_OLD/wrapper/dialog.js **/
/**
 * rest/arunox/generators/wrapper/dialog.js
 *
 * Some Javascript codes without further description
 *
 * @author         Sparky
 * @copyright      2025 ARUNOX
 * @version        1.0.0
 * @since          1.0.0  File is created
 */

ARUNOX.Registry.wrapper.register( 'dialog', class extends ARUNOX.Theme.Component {
	static htmlTag      = 'div';
	static rootName     = 'dialog';
	static hooks        = {
		config( config, type, name, data, storage ) {
			config.classes.push( 'dialog' );
			config.classes.push( `dialog--${config.size || 'md'}` );
			config.classes.push( `dialog--${config.width || 'md'}` );

			return config;
		},
	};

	create( config, data ) {
		const wrapper	= this.render( 'div', {
			classes     : [ 'dialog__wrapper' ],
			arx         : { component: 'wrapper' },
		});
		const header    = wrapper.render( 'div', {
			classes     : [ 'dialog__header' ],
			arx         : { component: 'header' },
		});
		const content   = wrapper.render( 'div', {
			classes     : [ 'dialog__content' ],
			arx         : { component: 'content' },
		});

		this.elements.dialog    = this;

		if( config.id ) this.element.dataset.id = config.id;

		if( config.title ) {
			header.render( 'components/headline', {
				size	: 2,
				block	: 'template',
				title	: config.title,
				icon	: config?.icon,
				color	: config?.color,
			});
		}

		if( config.close ) {
			const closeButton = header.render( 'button', {
				icon        : 'bi-x-lg',
				classes     : [ 'dialog__close' ],
				elements    : this.elements,
				onClick     : ( event ) => this.onClose( event ),
				arx         : { component: 'close' },
			});

			if( config.backdrop ) {
				this.element.addEventListener( 'click', ( event ) => {
					if( event.target === this.element ) {
						this.onClose( event );
					}
				});
			}

			const cancelButtons = wrapper.element.querySelectorAll( '[type=cancel]' );

			if( cancelButtons ) {
				cancelButtons.forEach( button => button.addEventListener('click', this.close ) );
			}
		}


		this.element.addEventListener( 'close', this.onClose );
		this.element.addEventListener( 'cancel', this._onCancel );

		// this.element.show();

		queueMicrotask( () => this.calcHeight( this, content ) );
	}

	calcHeight( dialog, content ) {
		dialog.element.classList.add( 'is-open' );

		let height = 0;

		content.element.querySelectorAll('.tabs__content__item').forEach( element => {
			const hidden = element.style.display === 'none';

			if( hidden ) element.style.display = '';
			if( height < element.clientHeight ) height = element.clientHeight;
			if( hidden ) element.style.display = 'none';

		});

		height += 10;

		const buttons   = content.element.querySelector( '.form__buttons' );
		const viewport  = content.element.querySelector( '.scroll__viewport' );

		if( viewport ) {
			const maxHeight =
				      viewport.offsetTop
				      + ( buttons ? buttons.clientHeight + 15 : 0 );

			dialog.element.style.setProperty('--height', height + 'px' );
			dialog.element.style.setProperty('--maxHeight', maxHeight + 'px' );
		}
	}

	onClose( event ) {
		if( event ) event.preventDefault();
console.log( event.target );
		event.target.ARX.elements.dialog.element.classList.add('is-closing');
		// event.target.ARX.elements.backdrop.element.style.opacity = '0';

		setTimeout(() => {
			event.target.ARX.elements.dialog.remove();
			// event.target.ARX.elements.backdrop.remove();
		}, 300 );
	}

	_onCancel( event ) {
		if( !event.target.ARX.storage.config.close
			|| !event.target.ARX.storage.config.backdrop
		) {
			event.preventDefault();
		}
		else event.target.ARX.onClose( event );
	}
});