"""
BadGUI Context Manager Usage Guide
==================================

This guide explains the correct way to use BadGUI components, especially 
layout containers like row(), column(), card(), etc.

PROBLEM:
--------
BadGUI components that act as containers (row, column, card, etc.) are 
implemented as context managers. You cannot call .classes() directly on 
the context manager - you need to capture the yielded component first.

WRONG WAY:
----------
```python
# This will cause AttributeError: '_GeneratorContextManager' object has no attribute 'classes'
with bg.column().classes("q-pa-lg"):
    # content here
```

CORRECT WAY:
------------
```python
# Capture the component with 'as' keyword, then call .classes()
with bg.column() as main_col:
    main_col.classes("q-pa-lg")
    # content here
```

COMPREHENSIVE EXAMPLES:
----------------------
"""

import badgui as bg
from contextlib import contextmanager

def demonstrate_correct_usage():
    """Show all the correct patterns for using BadGUI components."""
    
    # 1. Basic layout containers
    with bg.column() as main_container:
        main_container.classes("q-pa-lg")
        
        with bg.row() as header_row:
            header_row.classes("items-center justify-between q-mb-lg")
            
            bg.label("Page Title").classes("text-h3")
            bg.button("Action").classes("q-ml-auto")
    
    # 2. Cards with styling
    with bg.card() as feature_card:
        feature_card.classes("q-ma-md shadow-5")
        
        with bg.card_section() as card_content:
            bg.label("Feature Title").classes("text-h5 q-mb-md")
            bg.label("Feature description goes here")
    
    # 3. Complex responsive layouts
    with bg.row() as responsive_row:
        responsive_row.classes("q-gutter-md wrap")
        
        # Left column
        with bg.column() as left_column:
            left_column.classes("col-12 col-md-8")
            
            with bg.card() as main_card:
                main_card.classes("q-pa-lg")
                bg.label("Main content area")
        
        # Right sidebar
        with bg.column() as right_sidebar:
            right_sidebar.classes("col-12 col-md-4")
            
            with bg.card() as sidebar_card:
                sidebar_card.classes("q-pa-md bg-grey-1")
                bg.label("Sidebar content")
    
    # 4. Headers and footers
    with bg.header() as page_header:
        page_header.classes("bg-primary text-white q-pa-md")
        
        with bg.row() as nav_row:
            nav_row.classes("items-center justify-between")
            bg.label("Site Logo").classes("text-h4")
            
            with bg.row() as nav_links:
                nav_links.classes("q-gutter-md")
                bg.link("Home", "/")
                bg.link("About", "/about")
    
    # 5. Tabs
    with bg.tabs() as main_tabs:
        main_tabs.classes("text-primary")
        
        with bg.tab("tab1", "Tab 1"):
            pass
        
        with bg.tab("tab2", "Tab 2"):
            pass
    
    with bg.tab_panels() as panels:
        panels.classes("q-pa-lg")
        
        with bg.tab_panel("tab1"):
            bg.label("Content for Tab 1")
        
        with bg.tab_panel("tab2"):
            bg.label("Content for Tab 2")

def demonstrate_common_patterns():
    """Show common layout patterns that prevent overflow."""
    
    # Pattern 1: Card grid with wrapping
    with bg.row() as card_grid:
        card_grid.classes("q-gutter-md wrap")
        
        # Create multiple cards that will wrap nicely
        for i in range(6):
            with bg.card() as grid_card:
                grid_card.classes("col-12 col-sm-6 col-md-4 col-lg-3")
                with bg.card_section():
                    bg.label(f"Card {i+1}").classes("text-h6")
                    bg.label("Card content here")
    
    # Pattern 2: Vertical list with consistent spacing
    with bg.column() as item_list:
        item_list.classes("q-gutter-md q-pa-lg")
        
        for i in range(5):
            with bg.card() as list_item:
                list_item.classes("q-pa-md")
                with bg.card_section():
                    with bg.row() as item_row:
                        item_row.classes("items-center q-gutter-sm")
                        bg.icon("circle", color="primary")
                        bg.label(f"List item {i+1}")
    
    # Pattern 3: Hero section with image
    with bg.card() as hero:
        hero.classes("bg-primary text-white q-pa-xl")
        
        with bg.row() as hero_content:
            hero_content.classes("items-center")
            
            with bg.column() as hero_text:
                hero_text.classes("col-12 col-md-6")
                bg.label("Hero Title").classes("text-h2 q-mb-md")
                bg.label("Hero description goes here")
            
            with bg.column() as hero_image:
                hero_image.classes("col-12 col-md-6 text-center")
                bg.image("https://picsum.photos/400/300").classes("rounded-lg")

# UTILITY FUNCTIONS FOR EASIER USAGE:
# ===================================

def quick_row(*classes):
    """Create a row with classes in one line (when you don't need complex styling)."""
    @contextmanager
    def _quick_row():
        with bg.row() as r:
            if classes:
                r.classes(" ".join(classes))
            yield r
    return _quick_row()

def quick_column(*classes):
    """Create a column with classes in one line."""
    @contextmanager
    def _quick_column():
        with bg.column() as c:
            if classes:
                c.classes(" ".join(classes))
            yield c
    return _quick_column()

def quick_card(*classes):
    """Create a card with classes in one line."""
    @contextmanager
    def _quick_card():
        with bg.card() as card:
            if classes:
                card.classes(" ".join(classes))
            yield card
    return _quick_card()

# EXAMPLE USING UTILITY FUNCTIONS:
# =================================

def example_with_utilities():
    """Example using the utility functions for cleaner code."""
    
    with quick_column("q-pa-lg"):
        bg.label("Page with Utilities").classes("text-h3 q-mb-lg")
        
        with quick_row("q-gutter-md wrap"):
            with quick_card("col-12 col-md-4"):
                with bg.card_section():
                    bg.label("Quick Card 1")
            
            with quick_card("col-12 col-md-4"):
                with bg.card_section():
                    bg.label("Quick Card 2")
            
            with quick_card("col-12 col-md-4"):
                with bg.card_section():
                    bg.label("Quick Card 3")

if __name__ == "__main__":
    print("🎯 BadGUI Context Manager Usage Guide")
    print("This demonstrates the correct way to use BadGUI components")
    print("All components are properly using context managers with 'as' syntax")
    print()
    
    # Run the main demonstration
    demonstrate_correct_usage()
    bg.dev(port=3008)