"""
Extended Generic Component Test
Testing more advanced Quasar components with the bg.component() method.
"""

import badgui as bg

with bg.page("/", "ExtendedTest", "Extended Generic Component Test"):
    with bg.column() as main_col:
        main_col.classes("q-pa-lg q-gutter-lg")
        bg.label("Extended Quasar Component Test").classes("text-h3 q-mb-lg")
        
        # Date and Time components
        with bg.card():
            bg.label("Date & Time Components").classes("text-h5 q-mb-md")
            
            bg.label("Date Picker:").classes("q-mb-sm")
            date_picker = bg.component('q-date', minimal=True)
            date_picker.bind_value('selectedDate')
            date_picker.classes("q-mb-md")
            
            bg.label("Time Picker:").classes("q-mb-sm")
            time_picker = bg.component('q-time', format24h=True)
            time_picker.bind_value('selectedTime')
            time_picker.classes("q-mb-md")
        
        # Advanced Input Components
        with bg.card():
            bg.label("Advanced Inputs").classes("text-h5 q-mb-md")
            
            # Option Group (Radio buttons)
            bg.label("Select Option:").classes("q-mb-sm")
            option_group = bg.component('q-option-group',
                                      options=[
                                          {'label': 'Option 1', 'value': 'opt1'},
                                          {'label': 'Option 2', 'value': 'opt2'},
                                          {'label': 'Option 3', 'value': 'opt3'}
                                      ],
                                      type='radio',
                                      inline=True)
            option_group.bind_value('selectedOption')
            option_group.classes("q-mb-md")
            
            # File input
            bg.label("File Upload:").classes("q-mb-sm")
            file_input = bg.component('q-file',
                                    label='Choose file',
                                    filled=True,
                                    accept='.jpg,.png,.pdf')
            file_input.bind_value('uploadedFile')
            file_input.classes("q-mb-md")
            
            # Color picker
            bg.label("Color Picker:").classes("q-mb-sm")
            color_picker = bg.component('q-color')
            color_picker.bind_value('selectedColor')
            color_picker.classes("q-mb-md")
        
        # Layout Components
        with bg.card():
            bg.label("Layout Components").classes("text-h5 q-mb-md")
            
            # Tabs
            with bg.component('q-tabs', 
                            v_model='activeTab',
                            dense=True,
                            class_='text-grey',
                            active_color='primary',
                            indicator_color='primary',
                            align='justify',
                            narrow_indicator=True,
                            container=True) as tabs:
                
                bg.component('q-tab', name='tab1', label='Tab 1')
                bg.component('q-tab', name='tab2', label='Tab 2')
                bg.component('q-tab', name='tab3', label='Tab 3')
            
            # Tab panels
            with bg.component('q-tab-panels',
                            v_model='activeTab',
                            animated=True,
                            container=True):
                
                with bg.component('q-tab-panel', name='tab1', container=True):
                    bg.label("Content for Tab 1").classes("text-h6")
                    bg.component('q-separator').classes("q-my-md")
                    bg.label("This is the first tab content")
                
                with bg.component('q-tab-panel', name='tab2', container=True):
                    bg.label("Content for Tab 2").classes("text-h6")  
                    bg.component('q-separator').classes("q-my-md")
                    bg.label("This is the second tab content")
                
                with bg.component('q-tab-panel', name='tab3', container=True):
                    bg.label("Content for Tab 3").classes("text-h6")
                    bg.component('q-separator').classes("q-my-md")
                    bg.label("This is the third tab content")
        
        # Display Components
        with bg.card():
            bg.label("Display Components").classes("text-h5 q-mb-md")
            
            # Circular progress
            bg.label("Circular Progress:").classes("q-mb-sm")
            with bg.row() as progress_row:
                progress_row.classes("q-gutter-md q-mb-md")
                bg.component('q-circular-progress',
                           value=0.25,
                           size='50px',
                           color='red')
                bg.component('q-circular-progress',
                           value=0.5,
                           size='50px', 
                           color='orange')
                bg.component('q-circular-progress',
                           value=0.75,
                           size='50px',
                           color='green')
            
            # Chip components
            bg.label("Chips:").classes("q-mb-sm")
            with bg.row() as chip_row:
                chip_row.classes("q-gutter-sm q-mb-md")
                bg.component('q-chip', label='Tag 1', removable=True, color='primary')
                bg.component('q-chip', label='Tag 2', removable=True, color='secondary')
                bg.component('q-chip', label='Tag 3', removable=True, color='accent')
            
            # Avatar
            bg.label("Avatar:").classes("q-mb-sm")
            bg.component('q-avatar', size='64px', color='teal', text_color='white', icon='person')
        
        # Results display
        with bg.card():
            bg.label("Current Values").classes("text-h5 q-mb-md")
            results = bg.label("Click 'Update Display' to see values")
            results.bind_text('displayResults')
            results.classes("text-body1 q-mb-md")
            
            bg.button("Update Display").on_click('updateDisplay').classes("q-btn-primary")

# JavaScript for the extended components
bg.script("""
// Reactive data
const selectedDate = ref(null);
const selectedTime = ref(null);
const selectedOption = ref('opt1');
const uploadedFile = ref(null);
const selectedColor = ref('#1976D2');
const activeTab = ref('tab1');
const displayResults = ref('Click "Update Display" to see values');

// Update function
const updateDisplay = () => {
    const results = [
        `Date: ${selectedDate.value || 'Not selected'}`,
        `Time: ${selectedTime.value || 'Not selected'}`,
        `Option: ${selectedOption.value}`,
        `File: ${uploadedFile.value ? uploadedFile.value.name : 'None'}`,
        `Color: ${selectedColor.value}`,
        `Active Tab: ${activeTab.value}`
    ];
    displayResults.value = results.join(' • ');
};

// Watch for changes
watch([selectedDate, selectedTime, selectedOption, uploadedFile, selectedColor, activeTab], 
      updateDisplay, { deep: true });

onMounted(() => {
    console.log('Extended component test loaded!');
    console.log('Testing advanced Quasar components:');
    console.log('- q-date, q-time');
    console.log('- q-option-group, q-file, q-color');
    console.log('- q-tabs, q-tab-panels');
    console.log('- q-circular-progress, q-chip, q-avatar');
    updateDisplay();
});
""")

if __name__ == "__main__":
    print("🧪 Extended Generic Component Test")
    print("Testing advanced Quasar components with bg.component()")
    print()
    print("Components being tested:")
    print("📅 Date & Time: q-date, q-time")
    print("📝 Advanced Inputs: q-option-group, q-file, q-color")
    print("📑 Layout: q-tabs, q-tab-panels")
    print("📊 Display: q-circular-progress, q-chip, q-avatar")
    
    # Run dev server  
    bg.dev(port=3032)