/** Datei: themes/lcars/assets/js/layouts/section/navbar.js **/
/**
 * /lcars/components/section/navbar.js
 *
 * Some Javascript codes without further description
 *
 * @author         Sparky
 * @copyright      2025 ARUNOX
 * @version        2.0.0
 * @since          2.0.0  Adaptation to new ctx method
 * @since          1.0.0  File is created
 */

ARUNOX.Templates.register( 'layout/section/navbar', {
	htmlTag         : 'nav',
	hooks           : {
		config          : function( config ) {
			config.datasets.arx.node = this.instance.htmlTag;
			config.classes.push( 'frame__navbar', `frame__navbar--${this.instance.htmlTag}` );

			return config;
		},
		corner          : function( config, position ) {
			return Object.assign( {
				id              : `${this.instance.parent.config.name}_${position}`,
				classes         : [ 'frame__wrapper', 'frame__element', `frame__navbar--${position}` ],
				keepOnReplace   : {
					classes		    : [ 'frame__*' ],
				},
				content         : [
					ARUNOX.Templates.config( 'div', {
						classes         : [ 'frame__wrapper__inner' ],
					}),
				],
			}, config || {} );
		},
		toolbar         : function( config, position ) {
			return Object.assign( {
				id              : `${this.instance.parent.config.name}_${position}`,
				classes         : [ 'frame__wrapper', `frame__navbar--${position}` ],
				keepOnReplace   : {
					classes		    : [ 'frame__*' ],
				},
				content         : [
					ARUNOX.Templates.config( 'div', {
						nodeName        : 'inner',
						classes         : [ 'frame__wrapper__inner' ],
						content         : typeof config.textNode === 'string'
							? [ ARUNOX.Templates.config( this.instance.config.html || 'div', {
								classes             : [ 'frame__title' ],
								content             : config.textNode,
							}) ]
							: config.content,
					}),
				],
			}, config || {} );
		},
		nodeRight       : function( config ) {
			return this.instance.filter( 'corner', config || {}, 'right' );
		},
		nodeBefore      : function( config ) {
			return this.instance.filter( 'toolbar', config || {}, 'before' );
		},
		nodeCenter      : function( config ) {
			return this.instance.filter( 'toolbar', config || {}, 'center' );
		},
		nodeAfter       : function( config ) {
			return this.instance.filter( 'toolbar', config || {}, 'after' );
		},
		nodeLeft        : function( config ) {
			if( this.instance.parent.config.aside.visibility ) {
				config = Object.assignRecursive( {}, config || {}, {
					classes         : [ 'frame__element', 'frame__element--corner' ],
					datasets        : {
						arx             : {
							node        : 'corner',
						},
					},
				});
			}

			return this.instance.filter( 'corner', config || {}, 'left' );
		},
	},
	builder         : function( config, data ) {
		const fillBefore= this.render( 'div', {
			classes     : [ 'frame__element', 'frame__element--fill' ],
			datasets    : {
				arx         : {
					node      : 'fillBefore',
				},
			}
		});
		const fillAfter = this.render( 'div', {
			classes     : [ 'frame__element', 'frame__element--fill' ],
			datasets    : {
				arx         : {
					node      : 'fillAfter',
				},
			}
		});

		this.parent.root.classList.add( `frame--${this.htmlTag}-${config.size}` );

		this.node( 'left', config.left || {}, 'prepend' ).render();
		this.node( 'before', config.before,  'before',   fillBefore );
		this.node( 'center', config.center,  'before',   fillAfter );
		this.node( 'after',  config.after,   'after',    fillAfter );
		this.node( 'right', config.right || {}, 'append' ).render();

		if( config.before ) this.nodes.before.render();
		if( config.center ) this.nodes.center.render();
		if( config.after )  this.nodes.after.render();
	},
});

ARUNOX.Templates.register( 'layout/section/header', {
	htmlTag         : 'header',
	extends         : 'layout/section/navbar',
});

ARUNOX.Templates.register( 'layout/section/footer', {
	htmlTag         : 'footer',
	extends         : 'layout/section/navbar',
});

/** Datei: themes/lcars/assets/js/layouts/section/sidebar.js **/
/**
 * /lcars/components/section/sidebar.js
 *
 * Some Javascript codes without further description
 *
 * @author         Sparky
 * @copyright      2025 ARUNOX
 * @version        1.0.0
 * @since          1.0.0  File is created
 */

ARUNOX.Templates.register( 'layout/section/sidebar', {
	htmlTag         : 'aside',
	hooks           : {
		config          : function( config ) {
			config.datasets.arx.node = this.instance.htmlTag;
			config.classes.push( 'frame__sidebar' );

			return config;
		},
		toolbar         : function( config, position ) {
			return Object.assign( {
				id              : `${this.instance.parent.config.name}_${position}`,
				classes         : [ 'frame__wrapper', `frame__sidebar--${position}` ],
				keepOnReplace   : {
					classes		    : [ 'frame__*' ],
				},
				content         : [
					ARUNOX.Templates.config( 'div', {
						nodeName        : 'inner',
						classes         : [ 'frame__wrapper__inner' ],
						content         : config.content,
					}),
				],
			}, config || {} );
		},
		nodeBefore      : function( config ) {
			return this.instance.filter( 'toolbar', config || {}, 'before' );
		},
		nodeCenter      : function( config ) {
			return this.instance.filter( 'toolbar', config || {}, 'center' );
		},
		nodeAfter       : function( config ) {
			return this.instance.filter( 'toolbar', config || {}, 'after' );
		},
		shouldRender    : function( render, config, data ) {
			return this.instance.parent.config.aside.visibility;
		},
	},
	builder         : function( config, data ) {
		const fillBefore= this.render( 'div', {
			classes     : [ 'frame__element', 'frame__element--fill' ],
			datasets    : {
				arx         : {
					node      : 'fillBefore',
				},
			}
		});
		const fillAfter = this.render( 'div', {
			classes     : [ 'frame__element', 'frame__element--fill' ],
			datasets    : {
				arx         : {
					node      : 'fillAfter',
				},
			}
		});

		this.parent.root.classList.add( `frame--sidebar-${config.size}`, `frame--sidebar-${config.side}` );

		this.node( 'before', config.before,  'before',   fillBefore );
		this.node( 'center', config.center,  'before',   fillAfter );
		this.node( 'after',  config.after,   'after',    fillAfter );

		if( config.before ) this.nodes.before.render();
		if( config.center ) this.nodes.center.render();
		if( config.after )  this.nodes.after.render();
	},
});