// 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 by resetting subwidgets array
        this.subwidgets = [];
        
        // Create new item containers and add to subwidgets
        this.subwidgets = this.items.map((item, index) => {
            return {
                widgettype: "VBox",
                options: {
                    width: "100%",
                    height: this.itemHeight + "px"
                },
                _listItemData: item,
                _listItemIndex: index,
                binds: [{
                    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"
                }]
            };
        });
        
        // In bricks framework, updating subwidgets should automatically trigger re-render
        // No need for explicit refresh or invalidate calls
    }
    
    // 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');