// Simplified List component using urlwidget pattern
// This approach follows the bricks-framework best practices by delegating item rendering to separate .ui files

bricks.List = class extends bricks.VBox {
    constructor(opts) {
        // Ensure opts has options property
        if (!opts) opts = {};
        if (!opts.options) opts.options = {};
        
        // Set default dimensions if not provided
        if (!opts.options.width) opts.options.width = '100%';
        if (!opts.options.height) opts.options.height = '100%';
        
        super(opts);
        
        this.data_url = opts.data_url || null;
        this.items = opts.items || [];
        this.item_template_url = opts.item_template_url || null; // URL to the item template .ui file
        this.itemHeight = opts.itemHeight || 50;
        this._loading = false;
        
        // Load data if provided
        if (this.data_url) {
            this.loadData();
        } else if (this.items.length > 0 && this.item_template_url) {
            this.renderItems();
        }
    }
    
    async loadData() {
        if (this._loading || !this.data_url) return;
        this._loading = true;
        
        try {
            const response = await fetch(this.data_url);
            if (response.ok) {
                const data = await response.json();
                this.items = Array.isArray(data) ? data : (data.items || []);
                this.renderItems();
            } else {
                console.error('Failed to load list data:', response.status);
            }
        } catch (error) {
            console.error('Error loading list data:', error);
        } finally {
            this._loading = false;
        }
    }
    
    renderItems() {
        // Clear existing children
        this.subwidgets = [];
        this.children.forEach(child => child.remove());
        this.children = [];
        
        // Render each item using urlwidget to load the item template
        this.items.forEach((item, index) => {
            const itemContainer = new bricks.VBox({
                width: '100%',
                height: this.itemHeight + 'px'
            });
            
            // Store item data on the container for reference
            itemContainer._listItemData = item;
            itemContainer._listItemIndex = index;
            
            // Create urlwidget binding to load the item template
            if (!itemContainer.binds) {
                itemContainer.binds = [];
            }
            
            itemContainer.binds.push({
                wid: 'self',
                event: 'on_parent',
                actiontype: 'urlwidget',
                target: 'self',
                options: {
                    url: this.item_template_url,
                    params: {
                        item: item,
                        index: index,
                        id: 'item_' + index
                    }
                },
                mode: 'replace'
            });
            
            this.appendChild(itemContainer);
        });
        
        this.refresh();
    }
    
    // Public method to reload data
    reload() {
        if (this.data_url) {
            this.loadData();
        }
    }
    
    // Public method to set items directly
    setItems(items) {
        this.items = items || [];
        this.renderItems();
    }
};

// Register the List component
bricks.Factory.register('List', bricks.List);

console.log('List component registered - uses urlwidget pattern for item rendering');