import streamlit as st
import pandas as pd
import numpy as np
import plotly.express as px

# Set the page configuration to wide layout
st.set_page_config(layout="wide")

data = pd.read_csv("encodings_2.csv")

# Select only the 'token' and 'count' columns
token_count_data = data[['token', 'count']]

# Set the 'token' column as the index
token_count_data = token_count_data.set_index('token')

# Sort the data by 'count' in descending order
token_count_data = token_count_data.sort_values('count', ascending=False)

# Add sliders with floating-point values
slider1 = st.slider('Select lower percentage', min_value=0.0,
                    max_value=100.0, value=0.0, step=0.1)
slider2 = st.slider('Select upper percentage', min_value=0.0,
                    max_value=100.0, value=1.0, step=0.1)

if slider1 > slider2:
    st.warning(
        "Lower percentage should be less than or equal to upper percentage.")
else:
    # Calculate the number of rows to display based on the selected percentage range
    total_rows = len(token_count_data)
    lower_index = int(total_rows * slider1 / 100)
    upper_index = int(total_rows * slider2 / 100)

    # Filter the data based on the selected range and sort by 'count' in ascending order
    filtered_data = token_count_data.iloc[lower_index:upper_index].sort_values(
        'count', ascending=True)

    # Create a bar chart using Plotly with all labels
    fig = px.bar(filtered_data, x='count',
                 y=filtered_data.index, text=filtered_data.index)
    fig.update_yaxes(type='category', tickmode='array',
                     tickvals=filtered_data.index)
    fig.update_layout(height=5000)

    # Display the bar chart using Streamlit
    st.plotly_chart(fig, use_container_width=True)

    # Set the chart width to a percentage of the container width
    width_percentage = 90
    html_code = f"""
    <script>
        document.addEventListener("DOMContentLoaded", function() {{
            var chart = document.getElementsByClassName('js-plotly-plot')[0];
            if (chart) {{
                chart.style.width = '{width_percentage}%';
            }}
        }});
    </script>
    """
    st.markdown(html_code, unsafe_allow_html=True)