import streamlit as st
import pandas as pd
import numpy as np
from streamlit_echarts import st_echarts
# from streamlit_echarts import JsCode
from streamlit_javascript import st_javascript
# from PIL import Image 
from app.show_examples import *

links_dic = {}

links_dic = {k.lower().replace('_', '-') : v for k, v in links_dic.items()}

# huggingface_image = Image.open('style/huggingface.jpg')

def nav_to(value):
    try:
        url = links_dic[str(value).lower()]
        js = f'window.open("{url}", "_blank").then(r => window.parent.location.href);'
        st_javascript(js)
    except:
        pass

def draw(folder_name, category_name, dataset_name, metrics):
    
    folder = f"./results/{metrics}/"

    display_names = {
        'SU': 'Speech Understanding',
        'ASU': 'Audio Scene Understanding',
        'VU': 'Voice Understanding'
    }
    
    data_path = f'{folder}/{category_name.lower()}.csv'
    chart_data = pd.read_csv(data_path).round(2)

    # if sorted == 'Ascending':
    #     ascend = True 
    # else:
    #     ascend = False

    new_dataset_name = dataset_name.replace('-', '_').lower()
    chart_data = chart_data[['Model', new_dataset_name]]
    
    chart_data = chart_data.sort_values(by=[new_dataset_name], ascending=True).dropna(axis=0)

    if len(chart_data) == 0:
        return
    
    min_value = round(chart_data.iloc[:, 1::].min().min() - 0.1, 1) 
    max_value = round(chart_data.iloc[:, 1::].max().max() + 0.1, 1)         

    options = {
        "title": {"text": f"{display_names[folder_name.upper()]}"},
        "tooltip": {
            "trigger": "axis",
            "axisPointer": {"type": "cross", "label": {"backgroundColor": "#6a7985"}},
            "triggerOn": 'mousemove',
        },
        "legend": {"data": ['Overall Accuracy']},
        "toolbox": {"feature": {"saveAsImage": {}}},
        "grid": {"left": "3%", "right": "4%", "bottom": "3%", "containLabel": True},
        "xAxis": [
            {
                "type": "category",
                "boundaryGap": False,
                "triggerEvent": True,
                "data": chart_data['Model'].tolist(),
            }
        ],
        "yAxis": [{"type": "value", 
                    "min": min_value,
                    "max": max_value, 
                    # "splitNumber": 10
                    }],
        "series": [{
                "name": f"{dataset_name}",
                "type": "line",
                "data": chart_data[f'{new_dataset_name}'].tolist(),
            }],
    }
    
    events = {
        "click": "function(params) { return params.value }"
    }

    value = st_echarts(options=options, events=events, height="500px")
    
    if value != None:
        # print(value)
        nav_to(value)

    # if value != None:
    #     highlight_table_line(value)

    '''
    Show table
    '''
    # st.divider()
    st.write("")
    st.markdown('##### TABLE')
    # chart_data['Link'] = chart_data['Model'].map(links_dic)
    st.dataframe(chart_data,
                #  column_config = {
                #      "Link": st.column_config.LinkColumn(
                #          display_text= st.image(huggingface_image)
                #      ),
                #  }, 
                    hide_index = True, 
                    use_container_width=True)
    '''
    show samples
    '''
    show_examples(category_name, dataset_name, chart_data['Model'].tolist())