"""
Flex Layout Test - Demonstrating Quasar Flex Utilities
Tests different flex layouts to prevent card overflow issues.
"""

import badgui as bg

# Test page demonstrating proper flex layouts
with bg.column() as main:
    main.classes("q-pa-lg")
    
    bg.label("Flex Layout Tests").classes("text-h3 q-mb-lg text-center")
    
    # Test 1: Horizontal flex row with wrapping
    with bg.card() as test1_card:
        test1_card.classes("q-mb-lg")
        with bg.card_section():
            bg.label("Test 1: Horizontal Row with Wrapping").classes("text-h5 q-mb-md text-primary")
            
            with bg.row() as test1_row:
                test1_row.classes("q-gutter-md wrap")
                with bg.card() as card1:
                    card1.classes("col-12 col-sm-6 col-md-4 bg-blue-1")
                    with bg.card_section():
                        bg.icon("speed", size="2rem", color="primary")
                        bg.label("Card 1").classes("text-h6")
                        bg.label("This card will wrap on small screens")
                
                with bg.card() as card2:
                    card2.classes("col-12 col-sm-6 col-md-4 bg-green-1")
                    with bg.card_section():
                        bg.icon("build", size="2rem", color="secondary")
                        bg.label("Card 2").classes("text-h6")
                        bg.label("Responsive wrapping prevents overflow")
                
                with bg.card() as card3:
                    card3.classes("col-12 col-sm-6 col-md-4 bg-orange-1")
                    with bg.card_section():
                        bg.icon("code", size="2rem", color="accent")
                        bg.label("Card 3").classes("text-h6")
                        bg.label("Uses Quasar's flex system")
    
    # Test 2: Vertical flex column
    with bg.card() as test2_card:
        test2_card.classes("q-mb-lg")
        with bg.card_section():
            bg.label("Test 2: Vertical Column Layout").classes("text-h5 q-mb-md text-secondary")
            
            with bg.column() as test2_col:
                test2_col.classes("q-gutter-md")
                with bg.card() as purple_card:
                    purple_card.classes("bg-purple-1")
                    with bg.card_section():
                        with bg.row() as purple_row:
                            purple_row.classes("items-center q-gutter-sm")
                            bg.icon("layers", color="purple")
                            bg.label("Stacked Card 1").classes("text-h6")
                
                with bg.card() as teal_card:
                    teal_card.classes("bg-teal-1")
                    with bg.card_section():
                        with bg.row() as teal_row:
                            teal_row.classes("items-center q-gutter-sm")
                            bg.icon("dashboard", color="teal")
                            bg.label("Stacked Card 2").classes("text-h6")
                
                with bg.card() as pink_card:
                    pink_card.classes("bg-pink-1")
                    with bg.card_section():
                        with bg.row() as pink_row:
                            pink_row.classes("items-center q-gutter-sm")
                            bg.icon("widgets", color="pink")
                            bg.label("Stacked Card 3").classes("text-h6")
    
    # Test 3: Mixed layout with proper responsive behavior
    with bg.card() as test3_card:
        test3_card.classes("q-mb-lg")
        with bg.card_section():
            bg.label("Test 3: Mixed Responsive Layout").classes("text-h5 q-mb-md text-accent")
            
            with bg.row() as test3_row:
                test3_row.classes("q-gutter-md wrap")
                # Left column - takes full width on mobile, half on tablet+
                with bg.column() as left_col:
                    left_col.classes("col-12 col-md-6")
                    with bg.card() as main_card:
                        main_card.classes("bg-grey-2 full-height")
                        with bg.card_section():
                            bg.label("Main Content").classes("text-h6 q-mb-md")
                            bg.label("This column adapts to screen size")
                            bg.label("Full width on mobile, half width on desktop")
                
                # Right column - also responsive
                with bg.column() as right_col:
                    right_col.classes("col-12 col-md-6")
                    with bg.column() as right_inner:
                        right_inner.classes("q-gutter-md")
                        with bg.card() as info_card:
                            info_card.classes("bg-blue-2")
                            with bg.card_section():
                                with bg.row() as info_row:
                                    info_row.classes("items-center q-gutter-sm")
                                    bg.icon("info", color="blue")
                                    bg.label("Info Card").classes("text-subtitle1")
                        
                        with bg.card() as success_card:
                            success_card.classes("bg-green-2")
                            with bg.card_section():
                                with bg.row() as success_row:
                                    success_row.classes("items-center q-gutter-sm")
                                    bg.icon("check_circle", color="green")
                                    bg.label("Success Card").classes("text-subtitle1")
    
    # Test 4: Gallery grid with proper wrapping
    with bg.card() as gallery_card:
        with bg.card_section():
            bg.label("Test 4: Image Gallery Grid").classes("text-h5 q-mb-md text-deep-orange")
            
            with bg.row() as gallery_row:
                gallery_row.classes("q-gutter-sm wrap")
                # Create 6 image cards that will wrap nicely
                for i in range(1, 7):
                    with bg.column() as img_col:
                        img_col.classes("col-6 col-sm-4 col-md-2")
                        bg.image(f"https://picsum.photos/150/150?random={i}").classes("rounded-lg full-width")
                        bg.label(f"Image {i}").classes("text-center text-caption q-mt-xs")
    
    # Summary card
    with bg.card() as summary_card:
        summary_card.classes("q-mt-lg bg-indigo-1")
        with bg.card_section():
            bg.label("Key Flex Classes Used:").classes("text-h6 q-mb-md text-indigo")
            with bg.column() as summary_col:
                summary_col.classes("q-gutter-sm")
                bg.label("• .wrap - Allows flex items to wrap to new lines")
                bg.label("• .col-12 .col-sm-6 .col-md-4 - Responsive column sizing")
                bg.label("• .q-gutter-md - Consistent spacing between items")
                bg.label("• .full-width - Ensures images don't overflow")
                bg.label("• .items-center .justify-center - Alignment utilities")

if __name__ == "__main__":
    print("🎨 Flex Layout Test")
    print("This example demonstrates:")
    print("  • Proper flex wrapping to prevent overflow")
    print("  • Responsive column layouts")
    print("  • Vertical and horizontal flex containers")
    print("  • Mixed responsive layouts")
    print("  • Image gallery with proper grid wrapping")
    print()
    
    bg.dev(port=3007)