/** Datei: themes/lcars/assets.OLD/js/arunox/components/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', {
						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', {}, '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', {}, '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.OLD/js/arunox/components/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', {
						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();
	},
});

/** Datei: themes/lcars/assets.OLD/js/arunox/components/dynamic.js **/
/**
 * /lcars/components/dynamic.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( 'dynamic', {
	extends         : 'layout/section',
	hooks           : {
		config          : {
			priority        : 5,
			callback        : function( config, data ) {
				return {
					name        : 'main_section_content',
					color       : 'primary',
					header      : {
						html        : 'h2',
						after       : config.title,
					},
					aside       : 'right',
					content     : ARUNOX.Templates.config( 'div', {
						classes     : [ 'frame__content' ],
						content     : config?.content,
					}),
					footer      : {
						after       : config.copyright,
					},
				};
			},
		},
	},
});

/** Datei: themes/lcars/assets.OLD/js/arunox/components/section.js **/
/**
 * /lcars/components/section.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', {
	htmlTag         : 'section',
	hooks           : {
		config          : function( config, data ) {
			// console.log( 'SECTION', config );

			config.size     ??= 'sm';
			config.aside    ??= false;
			config.header   ??= {};
			config.footer   ??= {};
			config.content  ??= true;
			config.color    ??= 'default';

			if( typeof config.aside !== 'undefined' ) {
				if( typeof config.aside === 'string' )      config.aside    = { side        : config.aside };
				if( typeof config.aside === 'boolean' )     config.aside    = { visibility  : config.aside };

				config.aside.visibility   ??= true;
				config.aside.side         ??= config.side || 'left';
				config.aside.size         ??= config?.size;
			}

			if( config.header ) {
				if( typeof config.header === 'string' )     config.header   = { after       : config.header };
				if( typeof config.header === 'boolean' )    config.header   = { visibility  : config.header };

				config.header.visibility  ??= true;
				config.header.size        ??= config?.size;
			}

			if( config.footer ) {
				if( typeof config.footer === 'string' )     config.footer   = { after       : config.footer };
				if( typeof config.footer === 'boolean' )    config.footer   = { visibility  : config.footer };

				config.footer.visibility  ??= true;
				config.footer.size        ??= config?.size;
			}

			// if( config.content ) {
			// 	if( typeof config.content === 'string' )    config.content  = { textNode  : config.content };
			//
			// 	config.content.visibility   = true;
			// }

			return config;
		},
		content         : function( content ) {
			if( content.length > 1 ) {
				return ARUNOX.Templates.config( 'div', {
					classes     : [ 'frame__content' ],
					content     : content,
				});
			}

			if( content.length == 1 ) {
				content[0].config.classes ??= [];
				content[0].config.classes.push( 'frame__content' );
			}

			return content;
		},
	},
	builder         : function( config, data ) {
		config.name     = config.name || 'section';
		this.root.id    = config.name;

		this.root.classList.add( 'frame__section' );

		this.render( 'layout/section/header',   config.header, data )
		this.render( 'layout/section/sidebar',  config.aside, data )
		this.render( 'layout/section/footer',   config.footer, data )
	}
});