// Global ATON
import { Controller } from "@hotwired/stimulus"
import AppState from "../state.js";
import { traverseOntology } from "../ontology.js";

const html = String.raw;
const domParser = new DOMParser;
// TODO: hard-coded, but follows a convention...
const ontologyJsonPath = location.pathname + 'ontology.json';

export default class extends Controller {
    static targets = ['trigger', 'layers', 'ontology'];

    connect() {
        console.log('#menu controller connected');
    }
    /**
     * Open settings panel
     * @param {Event} event 
     */
    async toggleMenu() {
        ATON.UI.setSidePanelRight();
        ATON.UI.showSidePanel({header: 'Menu'});
        this.#buildMenuPanel(ATON.UI.elSidePanel);
        this.#buildLayersMenu(AppState.normalizedNodes, this.layersTarget);
        this.#buildOntologyMenu(await traverseOntology(ontologyJsonPath), this.ontologyTarget);
    }
    /**
     * @param {Event} event 
     */
    toggleNode(event) {
        /**
         * The node's id
         * @type {string}
         */
        const id = event.params.node;
        const status = event.target.checked;
        ATON.getSceneNode(id).toggle(status);
        AppState.normalizedNodes.find(n => n.id === id).active = status;
    }
    /**
     * Clone a <template> by id
     * @param {String} id
     * @returns {DocumentFragment}
     */
    #cloneTemplate(id) {
        return document.getElementById(id).content.cloneNode(true);
    }
    /**
     * Create the left-side settings panel
     * content
     * @param {Element} panel 
     */
    #buildMenuPanel(panel) {
        const fragment = this.#cloneTemplate('tmpl-menu-tabs');

        panel.appendChild(fragment);
    }
    /**
     * @todo Don't rebuild it every time, use caching, return a container with checkboxes
     * @param {Array} nodes The normalized scene nodes (IDs and status)
     * @param {HTMLElement} tab Tab content element
     */
    #buildLayersMenu(nodes, tab) {
        for(let node of nodes) {
            const menuItem = html`
                <div class="form-check form-switch ms-${node.depth} ps-${node.depth} mt-2">
                    <input class="form-check-input" type="checkbox" ${node.active ? 'checked' : ''} role="switch"
                        title="Mostra / nascondi layer"
                        data-menu-node-param="${node.id}"
                        data-action="change->menu#toggleNode">
                    <label class="form-check-label">${node.id}</label>
                </div>
            `;

            // Awful?
            tab.appendChild(
                domParser.parseFromString(menuItem, 'text/html').querySelector('div')
            );
        }
    }
    /**
     * Temporary implementation to show domains only
     * @todo Don't rebuild it every time, use caching, return a container
     * @param {Object} ontology The traversed ontology object (temp)
     * @param {HTMLElement} tab Tab content element
     */
    #buildOntologyMenu(ontology, tab) {
        console.debug(ontology);

        const mainNode = tab.querySelector('#ontology-list');
        mainNode.textContent = ontology.ontology;

        let domainList = html`
            <ul class="list-group mt-2" id="domains-list"></ul>
        `;

        // Very fragile and ugly!!
        mainNode.innerHTML += domainList;
        domainList = tab.querySelector('#domains-list');
        
        for(let domain of ontology.domains) {
            const domainItem = html`
                <li class="list-group-item">${domain.label}</li>
            `;
            domainList.innerHTML += domainItem;
        }
    }
}