import js
import pandas as pd
import matplotlib.pyplot as plt

from pyodide.http import open_url
from pyodide.ffi import create_proxy

from pyscript import Element

url = (
    "https://raw.githubusercontent.com/Cheukting/pyscript-ice-cream/main/bj-products.csv"
)
ice_data = pd.read_csv(open_url(url))

current_selected = []
flavour_elements = js.document.getElementsByName("flavour")
graph_area = js.document.getElementById("graph-area")

def plot(data):
    plt.rcParams["figure.figsize"] = (22,20)
    fig, ax = plt.subplots()
    bars = ax.barh(data["name"], data["rating"], height=0.7)
    ax.bar_label(bars)
    plt.title("Rating of ice cream flavours of your choice")
    display(fig, target="graph-area", append=False)
    graph_area.firstElementChild.classList.add("img-fluid")

def select_flavour(event):
    for ele in flavour_elements:
        if ele.checked:
            current_selected = ele.value
            break
    if current_selected == "ALL":
        plot(ice_data)
    else:
        filter = ice_data.apply(lambda x: ele.value in x["ingredients"], axis=1)
        plot(ice_data[filter])

ele_proxy = create_proxy(select_flavour)

for ele in flavour_elements:
    if ele.value == "ALL":
        ele.checked = True
        current_selected = ele.value
    ele.addEventListener("change", ele_proxy)

plot(ice_data)