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

# Function to generate popup card content
def display_card(food_name):
    food_info = FOOD_DATA[food_name]
    image_src = f"assets/images/{food_info['image']}"
    description = food_info["description"]
    price = food_info["price"]

    # HTML for the popup
    card_html = f"""
    <div class="popup-card">
        <img src="{image_src}" alt="{food_name}" class="popup-image" />
        <div class="popup-content">
            <h3>{food_name}</h3>
            <p class="price">₹{price}</p>
            <button class="add-btn">ADD</button>
            <p class="customizable">Customizable</p>
            <p class="description">{description}</p>
        </div>
    </div>
    """
    return card_html

# 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(
                lambda x=food_name: display_card(x),
                inputs=None,
                outputs=popup_area
            )

# Launch the app
app.launch()