michaelschiemer/resources/js/modules/ui/UIManager.js

// modules/ui/UIManager.js
import { Modal } from './components/Modal.js';
import { Lightbox } from './components/Lightbox.js';
import { Logger } from '../../core/logger.js';

/**
 * @typedef {Object} UIComponentProps
 * @property {string} [content] - HTML content for the component
 * @property {Function} [onClose] - Callback when component closes
 */

/**
 * Available UI components
 * @type {Object<string, Function>}
 */
const components = {
    modal: Modal,
    lightbox: Lightbox,
};

/**
 * Active component instances (singletons)
 * @type {Object<string, Object>}
 */
const activeInstances = {};

/**
 * UI Manager for creating and managing UI components
 * @namespace UIManager
 */
export const UIManager = {
    /**
     * Open a UI component (reuses existing instance for singletons)
     * @param {string} type - Component type (e.g., 'modal', 'lightbox')
     * @param {UIComponentProps} [props={}] - Component properties
     * @returns {Object|null} Component instance or null if type unknown
     */
    open(type, props = {}) {
        const Component = components[type];
        if (!Component) {
            Logger.warn(`[UIManager] Unknown type: ${type}`);
            return null;
        }
        
        // For lightbox, reuse existing instance for efficiency
        if (type === 'lightbox') {
            if (activeInstances.lightbox) {
                Logger.info('[UIManager] Reusing existing lightbox instance');
                
                // Update content and reopen
                activeInstances.lightbox.updateContent(props.content || '');
                
                // Always call open() to ensure it's shown, regardless of current state
                activeInstances.lightbox.open();
                
                return activeInstances.lightbox;
            } else {
                Logger.info('[UIManager] Creating new lightbox instance');
                
                // Create new instance and store it
                const instance = new Component({
                    ...props,
                    onClose: () => {
                        // Don't delete the instance, just close it for reuse
                        Logger.info('[UIManager] Lightbox closed, instance kept for reuse');
                        if (props.onClose) props.onClose();
                    }
                });
                activeInstances.lightbox = instance;
                instance.open();
                return instance;
            }
        }
        
        // For other components, create new instances
        const instance = new Component(props);
        instance.open();
        return instance;
    },

    /**
     * Close a UI component instance
     * @param {Object} instance - Component instance to close
     */
    close(instance) {
        if (instance?.close) instance.close();
    },

    /**
     * Close a component by type
     * @param {string} type - Component type to close
     */
    closeByType(type) {
        if (activeInstances[type]) {
            this.close(activeInstances[type]);
        }
    },

    /**
     * Check if a component is currently open
     * @param {string} type - Component type to check
     * @returns {boolean}
     */
    isOpen(type) {
        return activeInstances[type]?.isOpen() || false;
    },

    /**
     * Destroy all active instances (cleanup)
     */
    destroyAll() {
        Object.values(activeInstances).forEach(instance => {
            if (instance?.destroy) {
                instance.destroy();
            }
        });
        Object.keys(activeInstances).forEach(key => {
            delete activeInstances[key];
        });
    }
};