import gradio as gr
from components.cards import create_food_card
from components.data import FOOD_DATA

# Function to render the popup card when a button is clicked
def display_card(food_name):
    if food_name in FOOD_DATA:
        return create_food_card(food_name)
    else:
        return "<p>No data available for the selected item.</p>"

# Gradio app interface
with gr.Blocks(css="styles.css") as app:
    gr.Markdown("# 🍽️ Indian & Chinese Food Nutritional Information App")
    gr.Markdown(
        """
        ### Explore Popular Dishes 🍛
        Click on any dish below to view its image, nutritional facts, and portion size.
        """
    )

    # Create a hidden popup area
    popup_area = gr.HTML(visible=False)

    # Display all items as a vertical list
    with gr.Column(elem_id="food-list"):
        for food_name in FOOD_DATA.keys():
            gr.Button(
                value=food_name,
                elem_id=f"food-{food_name.replace(' ', '-').lower()}",
                interactive=True,
            ).click(
                display_card,
                inputs=[gr.Textbox(value=food_name, visible=False)],
                outputs=popup_area,  # Reference the popup HTML component
            )

    # Add the popup area to the app
    popup_area.style()

# Launch the app
app.launch()