"""
Test refactored components using generic component() as base
"""

import badgui as bg

with bg.page("/", "RefactoredTest", "Refactored Components Test"):
    with bg.column() as main_col:
        main_col.classes("q-pa-lg q-gutter-md")
        
        bg.label("Refactored Components Test").classes("text-h3 q-mb-lg")
        
        # Test basic components
        with bg.card(title="Basic Components") as card1:
            card1.classes("q-mb-md")
            
            bg.label("This is a label created with the refactored method")
            
            input_field = bg.input("Enter some text here")
            input_field.bind_value('userText')
            input_field.classes("q-mb-md")
            
            button = bg.button("Click Me", icon="thumb_up")
            button.on_click('handleClick')
        
        # Test layout components
        with bg.card(title="Layout Components") as card2:
            card2.classes("q-mb-md")
            
            bg.label("Row layout:")
            with bg.row() as test_row:
                test_row.classes("q-gutter-md q-mb-md")
                
                bg.label("Item 1").classes("col")
                bg.label("Item 2").classes("col")
                bg.label("Item 3").classes("col")
            
            bg.label("Column layout:")
            with bg.column() as test_col:
                test_col.classes("q-gutter-sm")
                
                bg.label("Column Item 1")
                bg.label("Column Item 2")
                bg.label("Column Item 3")
        
        # Test mixed with generic components
        with bg.card(title="Mixed Components") as card3:
            card3.classes("q-mb-md")
            
            bg.label("Regular button vs Generic button:")
            
            with bg.row() as button_row:
                button_row.classes("q-gutter-md")
                
                # Regular button (refactored)
                regular_btn = bg.button("Regular Button")
                regular_btn.on_click('handleRegular')
                
                # Generic button
                generic_btn = bg.component('q-btn', label='Generic Button', color='secondary')
                generic_btn.on_click('handleGeneric')

# JavaScript
bg.script("""
const userText = ref('');

const handleClick = () => {
    console.log('Refactored button clicked!');
};

const handleRegular = () => {
    console.log('Regular (refactored) button clicked!');
};

const handleGeneric = () => {
    console.log('Generic button clicked!');
};

onMounted(() => {
    console.log('Refactored components test loaded!');
    console.log('All components now use the generic component() method as their base');
});
""")

if __name__ == "__main__":
    print("🔧 Refactored Components Test")
    print("Testing components that use generic component() as their base")
    print()
    print("This demonstrates:")
    print("- Consistent behavior across all components")
    print("- Reduced code duplication")
    print("- Easier maintenance")
    
    bg.dev(port=3033)