"""
Button Handler Comparison
Shows the evolution from confusing parameters to clean NiceGUI-style .on() method.
"""

import badgui as bg

with bg.page("/", "ButtonComparison", "Button Handler Comparison"):
    with bg.column() as main_col:
        main_col.classes("q-pa-lg q-gutter-md")
        bg.label("Button Handler Evolution").classes("text-h3 q-mb-lg")
        
        with bg.card():
            bg.label("❌ Old Confusing Way (multiple parameters)").classes("text-h5 text-red q-mb-md")
            bg.label("Don't use these - confusing and redundant:").classes("text-body2 q-mb-sm")
            
            # These would be the old confusing ways (DON'T USE):
            # bg.button("Old Way 1", js_handler="myFunction").classes("q-btn-red q-mb-sm")
            # bg.button("Old Way 2", on_click="myFunction").classes("q-btn-red q-mb-sm") 
            # bg.button("Old Way 3", js_handler="() => alert('hi')").classes("q-btn-red q-mb-sm")
            
            bg.label("✅ New Clean Way (.on() method)").classes("text-h5 text-green q-mb-md q-mt-lg")
            bg.label("Much cleaner and follows NiceGUI patterns:").classes("text-body2 q-mb-sm")
            
            # ✅ NEW CLEAN WAY:
            bg.button("Function Name").on('click', 'myFunction').classes("q-btn-primary q-mb-sm")
            bg.button("Inline Expression").on('click', '() => alert("Hello!")').classes("q-btn-secondary q-mb-sm")
            bg.button("With Notification").on('click', '() => $q.notify("Clicked!")').classes("q-btn-accent q-mb-sm")
            
            # ✅ CONVENIENCE METHODS:
            bg.button("On Click").on_click('testClick').classes("q-btn-positive q-mb-sm")
            bg.button("On Input").on('input', 'handleInput').classes("q-btn-info q-mb-sm")
            
            # ✅ CHAINING WITH STYLING:
            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 myFunction = () => {
    console.log('myFunction called!');
    $q.notify('Function name handler works!');
};

const testClick = () => {
    console.log('testClick called!');
    $q.notify('on_click convenience method works!');
};

const handleInput = () => {
    console.log('handleInput called!');
    $q.notify('Input handler works!');
};

const saveData = () => {
    $q.notify({
        message: 'Data saved!',
        color: 'green',
        icon: 'check'
    });
};

const deleteData = () => {
    $q.notify({
        message: 'Data deleted!',
        color: 'red', 
        icon: 'warning'
    });
};

onMounted(() => {
    console.log('Clean .on() method pattern loaded!');
});
""")

if __name__ == "__main__":
    print("🧪 Button Handler Comparison")
    print("Shows the clean .on() method vs old confusing parameters")
    
    # Run dev server  
    bg.dev(port=3027)