"""
Simple Button Test
Testing the new .on() method pattern (like NiceGUI).
"""

import badgui as bg

with bg.page("/", "ButtonTest", "Button Test"):
    with bg.column() as main_col:
        main_col.classes("q-pa-lg q-gutter-md")
        bg.label("Button .on() Method Test").classes("text-h3 q-mb-lg")
        
        with bg.card():
            bg.label("Test the new .on() method pattern").classes("text-h5 q-mb-md")
            
            # Using .on('click') method (NiceGUI style) - much cleaner!
            bg.button("Click Handler").on('click', 'testClick').classes("q-btn-primary q-mb-sm")
            bg.button("Alert Button").on('click', '() => window.alert("Hello!")').classes("q-btn-secondary q-mb-sm")  
            bg.button("Notify Button").on('click', '() => $q.notify("Hello from Quasar!")').classes("q-btn-accent q-mb-sm")
            
            # Using .on_click() convenience method
            bg.button("On Click").on_click('testOnClick').classes("q-btn-positive q-mb-sm")
            
            # Buttons with icons and colors
            bg.button("Save", icon="save", color="green").on_click('saveData').classes("q-mb-sm")
            bg.button("Delete", icon="delete", color="red").on_click('deleteData').classes("q-mb-sm")

# JavaScript handlers
bg.script("""
const testClick = () => {
    console.log('Click handler called!');
    $q.notify({
        message: 'Click handler executed!',
        color: 'positive',
        position: 'top'
    });
};

const testOnClick = () => {
    console.log('On Click handler called!');
    $q.notify({
        message: 'On Click method executed!',
        color: 'info',
        position: 'top-right'
    });
};

const saveData = () => {
    console.log('Save data called!');
    $q.notify({
        message: 'Data saved successfully!',
        color: 'green',
        icon: 'check',
        position: 'center'
    });
};

const deleteData = () => {
    console.log('Delete data called!');
    $q.notify({
        message: 'Data deleted!',
        color: 'red',
        icon: 'warning',
        position: 'bottom'
    });
};

onMounted(() => {
    console.log('Button test with .on() method mounted!');
});
""")

if __name__ == "__main__":
    print("🧪 Simple Button Test")
    print("Testing unified button() method")
    
    # Run dev server  
    bg.dev(port=3025)