import AppState from "./state.js";
import { traverseOntology } from "./ontology.js";

/**
 * @module UI
 */
/**
 * 
 * @param {String} triggerSelector - Usually, the close modal trigger element(s) selector
 */
export function pauseAudio(triggerSelector) {
    // What if more than one audio element is playing?
    const audio = document.querySelector('audio');

    if (audio) {
        document.querySelectorAll(triggerSelector).forEach(el => {
            el.addEventListener('click', () => audio.pause());
        });
        document.querySelector('.modal').addEventListener('blur', () => {
            audio.pause();
        });
    }
}
/**
 * @see traverseOntology
 * @param {Object} ontology The traversed ontology object (temp)
 * @param {HTMLElement} sidePanel ATON's side panel element
 */
function buildOntologyMenu(ontology, sidePanel) {
    const list = document.createElement('ul');
    list.className = 'list-group';
    const mainNode = document.createElement('li');
    mainNode.className = 'list-group-item';
    mainNode.textContent = ontology.ontology;
    
    const domainList = document.createElement('ul');
    domainList.className = 'list-group';

    for(let domain of ontology.domains) {
        const domainItem = document.createElement('li');
        domainItem.textContent = domain.label;
        domainItem.className = 'list-group-item';
        domainList.appendChild(domainItem);
    }

    mainNode.appendChild(domainList);
    list.appendChild(mainNode);
    sidePanel.appendChild(list);
}