"""
Generic Component Test
Demonstrates the new bg.component() method for creating any Quasar component.
"""

import badgui as bg

with bg.page("/", "GenericComponentTest", "Generic Component Test"):
    with bg.column() as main_col:
        main_col.classes("q-pa-lg q-gutter-md")
        bg.label("Generic Quasar Component Test").classes("text-h3 q-mb-lg")
        
        with bg.card():
            bg.label("Form Components").classes("text-h5 q-mb-md")
            
            # Rating component
            bg.label("Rating:").classes("q-mb-sm")
            rating = bg.component('q-rating', max=5, size='2em', color='amber')
            rating.bind_value('userRating')
            rating.classes("q-mb-md")
            
            # Select component
            bg.label("Select an option:").classes("q-mb-sm")
            select = bg.component('q-select', 
                                filled=True, 
                                options=['Option 1', 'Option 2', 'Option 3'],
                                label='Choose one')
            select.bind_value('selectedOption')
            select.classes("q-mb-md")
            
            # Slider component
            bg.label("Volume:").classes("q-mb-sm")
            slider = bg.component('q-slider', 
                                min=0, 
                                max=100, 
                                step=10,
                                markers=True,
                                color='primary')
            slider.bind_value('volumeLevel')
            slider.classes("q-mb-md")
            
            # Toggle component
            toggle = bg.component('q-toggle', 
                                label='Enable notifications',
                                color='green')
            toggle.bind_value('notificationsEnabled')
            toggle.classes("q-mb-md")
        
        with bg.card():
            bg.label("Display Components").classes("text-h5 q-mb-md")
            
            # Progress bar
            bg.label("Progress:").classes("q-mb-sm")
            progress = bg.component('q-linear-progress',
                                  size='20px',
                                  color='secondary',
                                  value=0.6)
            progress.classes("q-mb-md")
            
            # Badge
            btn = bg.component('q-btn', label='Messages', container=False)
            btn.classes("q-mb-md")
            
            # Note: q-badge with floating=True should be added as a separate component
            # since it positions itself relative to the previous component
            bg.component('q-badge', color='red', floating=True, label='5')
        
        with bg.card():
            bg.label("Container Components").classes("text-h5 q-mb-md")
            
            # Expansion item (container component)
            with bg.component('q-expansion-item', 
                            label='Advanced Settings', 
                            icon='settings',
                            container=True) as expansion:
                bg.label("These are advanced settings").classes("q-pa-md")
                
                # Nested components
                bg.component('q-separator').classes("q-my-md")
                
                with bg.row():
                    bg.component('q-checkbox', label='Option A', val='a').bind_value('optionA')
                    bg.component('q-checkbox', label='Option B', val='b').bind_value('optionB')
        
        # Results display
        with bg.card():
            bg.label("Current Values").classes("text-h5 q-mb-md")
            result_display = bg.label("Values will appear here")
            result_display.bind_text('displayResults')
            result_display.classes("text-body1")
            
            bg.button("Update Display").on_click('updateDisplay').classes("q-btn-primary q-mt-md")

# JavaScript to handle the generic components
bg.script("""
// Reactive data for all the generic components
const userRating = ref(3);
const selectedOption = ref(null);
const volumeLevel = ref(50);
const notificationsEnabled = ref(false);
const optionA = ref(false);
const optionB = ref(false);
const displayResults = ref('Values will appear here');

// Update display function
const updateDisplay = () => {
    const results = [
        `Rating: ${userRating.value}/5 stars`,
        `Selected: ${selectedOption.value || 'None'}`,
        `Volume: ${volumeLevel.value}%`,
        `Notifications: ${notificationsEnabled.value ? 'On' : 'Off'}`,
        `Options: A=${optionA.value}, B=${optionB.value}`
    ];
    displayResults.value = results.join(' • ');
};

// Watch for changes and auto-update
watch([userRating, selectedOption, volumeLevel, notificationsEnabled, optionA, optionB], 
      updateDisplay, { immediate: true });

onMounted(() => {
    console.log('Generic component test loaded!');
    console.log('Available Quasar components can be created with bg.component()');
    updateDisplay();
});
""")

if __name__ == "__main__":
    print("🧪 Generic Component Test")
    print("Testing bg.component() method for creating any Quasar component")
    print()
    print("Examples of components created:")
    print("- q-rating (rating selector)")
    print("- q-select (dropdown)")
    print("- q-slider (range input)")
    print("- q-toggle (switch)")
    print("- q-linear-progress (progress bar)")
    print("- q-badge (notification badge)")
    print("- q-expansion-item (collapsible container)")
    print("- q-separator (divider)")
    print("- q-checkbox (checkbox)")
    
    # Run dev server  
    bg.dev(port=3028)