import os
import pandas as pd
import streamlit as st
import base64
import json

# navigate to url
def nav_to(url):
    nav_script = """
        <meta http-equiv="refresh" content="0; url='%s'">
    """ % (url)
    st.write(nav_script, unsafe_allow_html=True)


@st.cache_data
def df_to_html(df):

    df = df.fillna("")

    # Define table styling
    styles = [
        {'selector': 'tr', 'props': [('border-bottom', '1px solid #ccc')]},  # Add bottom border to rows
        {'selector': 'td, th', 'props': [('border', 'none'), ("text-align", "center"), ('font-size', 'smaller')]},  # Remove cell borders, reduce font size
        # {'selector': 'tr:hover', 'props': [('background-color', '#b8b8b8')]},
        {'selector': 'a:hover', 'props': [('color', 'darkblue')]},
        {'selector': '.responsive-table', 'props': [('width', '100%')]},  # Set table width to 100%
        {'selector': 'thead', 'props': [('border', 'none')]},  # Hide header border
        {'selector': 'tbody td', 'props': [('border-left', 'none'), ('border-right', 'none')]}, 
        {'selector': 'tr:not(:first-child) td', 'props': [('border-left', 'none'), ('border-right', 'none'), ('border-top', 'none')]},
        {'selector': 'table', 'props': [('table-layout', 'fixed')]},  # Prevent overflow
    ]

    # Apply table styles and convert DataFrame to HTML
    styled_html = '<div style="max-width: 100%; overflow-x: auto;">' + df.style.hide(axis="index").set_table_styles(styles).to_html(escape=False, index=False, bold_rows=True, justify='center').replace('<td>', '<td align="center" class="responsive-table">') + '</div>'
        
    return styled_html






@st.cache_data
def render_svg(svg):
    """Renders the given svg string."""
    b64 = base64.b64encode(svg.encode("utf-8")).decode("utf-8")
    html = rf'<p align="center"> <img src="data:image/svg+xml;base64,{b64}", width="40%"/> </p>'
    c = st.container()
    c.write(html, unsafe_allow_html=True)



@st.cache_resource
def combine_json_files(folder_path):
    combined_data = {}

    # Iterate through each file in the folder
    for filename in os.listdir(folder_path):
        file_path = os.path.join(folder_path, filename)

        # Check if the file is a JSON file
        if filename.endswith('.json'):
            with open(file_path, 'r') as file:
                # Load JSON data from the file
                data = {filename.replace('.json', ''): json.load(file)}

                # Merge the loaded data into the combined_data dictionary
                combined_data.update(data)

    return combined_data


@st.cache_data
def render_metadata():
    """Renders the metadata."""
    html = r"""<p align="center">
        <a href="https://github.com/cisnlp/GlotWeb"><img alt="GlotWeb GitHub" src="https://img.shields.io/badge/📦 GlotWeb Git-ccccff"></a>
        <a href="https://github.com/cisnlp/GlotSparse"><img alt="GlotSparse GitHub" src="https://img.shields.io/badge/📦  GlotSparse Git-f4c2c2"></a>
        <a href="https://github.com/cisnlp/GlotLID"><img alt="GlotLID GitHub" src="https://img.shields.io/badge/📦 GlotLID Git-ed872d"></a>
        <a href="https://github.com/cisnlp/GlotScript"><img alt="GlotScript GitHub" src="https://img.shields.io/badge/📦 GlotScript Git-78866b"></a>
        <a href="https://github.com/cisnlp/GlotWeb/blob/main/LICENSE"><img alt="GitHub license" src="https://img.shields.io/github/license/cisnlp/GlotWeb"></a>
        <a href="https://arxiv.org/abs/xxxx.xxxxx"><img alt="arXiv" src="https://img.shields.io/badge/arXiv-xxxx.xxxxx-b31b1b.svg"></a>
        </p>"""
    c = st.container()
    c.write(html, unsafe_allow_html=True)




# Define the function for conditional coloring
def color_mapping(listx):

    bins = len(listx)
    mean = sum(listx) / (1.0 * bins)

    if mean == 0:
        return "🟥"
    elif mean < 1.0/bins + 0.01:
        return "🟧"
    elif mean < 2.0/bins + 0.01:
        return "🟨"
    else:
        return "🟩"