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.
        """
    )

    # Define the popup area as an HTML component
    popup_area = gr.HTML(visible=False, elem_id="popup")

    # 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,  # Update the popup content
                inputs=[gr.Textbox(value=food_name, visible=False)],
                outputs=popup_area  # Set the HTML content of the popup
            )

    # Close popup button
    gr.Button("Close Popup", elem_id="close-popup").click(
        lambda: "",  # Clear the popup content
        inputs=None,
        outputs=popup_area,
    )

# Launch the app
app.launch()