import streamlit as st
import datasets
import numpy as np
import soundfile as sf


def show_examples(category_name, dataset_name, model_lists):
    st.divider()
    sample_folder = f"./examples/{category_name}/{dataset_name}"
    dataset = datasets.load_from_disk(sample_folder)

    for index in range(len(dataset)):

        with st.expander(f'EXAMPLE {index+1}'):
            col1, col2 = st.columns([0.3, 0.7], vertical_alignment="center")

            with col1:
                st.audio(f'{sample_folder}/sample_{index}.wav', format="audio/wav")
                      
            with col2:
                with st.container():
                    custom_css = """
                                <style>
                                .my-container-question {
                                background-color: #F5EEF8;
                                padding: 10px;
                                border-radius: 10px;
                                height: 50px;
                                }
                                </style>
                                """
                    st.markdown(custom_css, unsafe_allow_html=True)
                    st.markdown(f"""<div class="my-container-question">
                                <p>QUESTION: {dataset[index]['instruction']['text']}</p>
                                </div>""", unsafe_allow_html=True)
                
                with st.container():
                    custom_css = """
                                <style>
                                .my-container-answer {
                                background-color: #F9EBEA;
                                padding: 10px;
                                border-radius: 10px;
                                height: 50px;
                                }
                                </style>
                                """
                    st.markdown(custom_css, unsafe_allow_html=True)
                    st.markdown(f"""<div class="my-container-answer">
                                <p>CORRECT ANSWER: {dataset[index]['answer']['text']}</p>
                                </div>""", unsafe_allow_html=True)

            
            st.divider()
            with st.container():
                custom_css = """
                            <style>
                            .my-container-table {
                            background-color: #F8F9F9;
                            padding: 10px;
                            border-radius: 5px;
                            # height: 50px;
                            }
                            </style>
                            """
                st.markdown(custom_css, unsafe_allow_html=True)

                model_lists.sort()
                
                s = ''
                for model in model_lists:
                    try:
                        s += f"""<tr>
                            <td>{model}</td>
                            <td>{dataset[index][model]['text']}</td>
                            <td>{dataset[index][model]['model_prediction']}</td>
                        </tr>"""
                    except:
                        print(f"{model} is not in {dataset_name}")
                        continue
                
                body_details = f"""<table style="width:100%">
                <thead>
                    <tr style="text-align: center;">
                        <th style="width:20%">MODEL</th>
                        <th style="width:40%">QUESTION</th>
                        <th style="width:40%">MODEL PREDICTION</th>
                    </tr>
                {s}
                </thead>
                </table>"""
                
                st.markdown(f"""<div class="my-container-table">
                                {body_details}
                                </div>""", unsafe_allow_html=True)
                
                # st.markdown(body_details, unsafe_allow_html=True)