"use strict";

import Emel from 'emel';

import tabledefs from '../tabledefs/index.mjs';
import forkawesome_emel from './forkawesome_emel.mjs';


class GlobalUI {
	constructor() {
		this.emel = new Emel().emel;
	}
	
	async init() {
		const status = await globalThis.sysquery.status();
		
		const el_version = document.querySelector(".version");
		
		// 1: Update version display
		el_version.replaceChildren(
			document.createTextNode(status.version)
		);
		
		// 2: Update navigation bar
		const el_navitems = document.querySelector(".nav-items"); // <ul>
		const el_afterme = el_navitems.querySelector(".dynamic-afterme");
		
		// Strip all non-static navigation items
		for(let item of el_navitems.children) {
			if(item.classList.contains("static")) continue;
			el_navitems.removeChild(item);
		}
		
		// Generate new dynamic navigation items
		const result = document.createDocumentFragment();
		for(const table_name of status.tables) {
			console.log(`[nav] new dynamic item ${table_name}, def`, tabledefs[table_name]);
			let icondef = `question-circle`;
			let display_name = table_name;
			if(typeof tabledefs[table_name] !== "undefined") {
				icondef = tabledefs[table_name].icon;
				display_name = tabledefs[table_name].name;
			}
			
			const emel_icon = forkawesome_emel(icondef);
			result.append(this.emel(`li>a[href="?"]>${emel_icon}+span{?}`, {
				placeholders: [
					`#table/${table_name}`,
					display_name
				]
			}));
		}
		
		
		el_afterme.after(result);
	}
}

export default GlobalUI;