import streamlit as st
import pandas as pd
import project_config
import base64


@st.cache_data(show_spinner = 'Loading knowledge graph nodes...')
def load_kg():
    # with st.spinner('Loading knowledge graph...'):
    kg_nodes = pd.read_csv(project_config.DATA_DIR / 'kg_nodes.csv', dtype = {'node_index': int}, low_memory = False)
    return kg_nodes


@st.cache_data(show_spinner = 'Loading knowledge graph edges...')
def load_kg_edges():
    # with st.spinner('Loading knowledge graph...'):
    kg_edges = pd.read_csv(project_config.DATA_DIR / 'kg_edges.csv', dtype = {'edge_index': int, 'x_index': int, 'y_index': int}, low_memory = False)
    return kg_edges


def capitalize_after_slash(s):
    # Split the string by slashes first
    parts = s.split('/')
    # Capitalize each part separately
    capitalized_parts = [part.title() for part in parts]
    # Rejoin the parts with slashes
    capitalized_string = '/'.join(capitalized_parts).replace('_', ' ')
    return capitalized_string


# From https://stackoverflow.com/questions/73251012/put-logo-and-title-above-on-top-of-page-navigation-in-sidebar-of-streamlit-multi
# See also https://arnaudmiribel.github.io/streamlit-extras/extras/app_logo/ 
@st.cache_data()
def get_base64_of_bin_file(png_file):
    with open(png_file, "rb") as f:
        data = f.read()
    return base64.b64encode(data).decode()


def build_markup_for_logo(
    png_file,
    background_position="50% 10%",
    margin_top="10%",
    padding="20px",
    image_width="80%",
    image_height="",
):
    binary_string = get_base64_of_bin_file(png_file)
    return """
            <style>
                [data-testid="stSidebarNav"] {
                    background-image: url("data:image/png;base64,%s");
                    background-repeat: no-repeat;
                    background-position: %s;
                    margin-top: %s;
                    padding: %s;
                    background-size: %s %s;
                }
            </style>
            """ % (
        binary_string,
        background_position,
        margin_top,
        padding,
        image_width,
        image_height,
    )


def add_logo(png_file):
    logo_markup = build_markup_for_logo(png_file)
    st.markdown(
        logo_markup,
        unsafe_allow_html=True,
    )


# @st.cache_resource()
# def generate_profile_pic():
    
#     st.markdown("""
#     <style>
#     .circle-image {
#         width: 100px;
#         height: 100px;
#         border-radius: 50%;
#         overflow: hidden;
#         display: flex;
#         justify-content: center;
#         align-items: center;
#         border: 2px solid black;
#         margin: 0 auto 10px auto;
#     }
    
#     .circle-image img {
#         width: 100%;
#         max-width: 100px;
#         height: 100%;
#         object-fit: cover;
#     }
            
#     .username {
#         font-size: 20px;
#         font-weight: bold;
#         text-align: center;
#         margin-top: 0px;
#     }
#     </style>
#     """, unsafe_allow_html=True)
    
#     # Show the user's profile picture
#     st.sidebar.html(f'<div class="circle-image"><img src="{st.session_state.profile_pic}" /></div>')

#     # Show the user's name
#     st.sidebar.html(f'<div class="username">{st.session_state.name}</div>')

#     return None

# # Load image using PIL
# from PIL import Image, ImageDraw, ImageOps
# from io import BytesIO
# import requests

# def PIL_profile_pic():

#     #  Load user profile picture
#     profile_pic = st.session_state.profile_pic
#     response = requests.get(profile_pic)
#     img = Image.open(BytesIO(response.content))

#     # Create a circular mask
#     min_dimension = min(img.size)
#     mask = Image.new('L', (min_dimension, min_dimension), 0)
#     draw = ImageDraw.Draw(mask)
#     draw.ellipse((0, 0, min_dimension, min_dimension), fill=255)

#     # Crop the image to a square of the smallest dimension
#     left = (img.width - min_dimension) // 2
#     top = (img.height - min_dimension) // 2
#     right = (img.width + min_dimension) // 2
#     bottom = (img.height + min_dimension) // 2
#     img_cropped = img.crop((left, top, right, bottom))

#     # Apply the circular mask to the cropped image
#     img_circular = ImageOps.fit(img_cropped, (min_dimension, min_dimension))
#     img_circular.putalpha(mask)

#     st.markdown(
#     """
#     <style>
#         [data-testid=stSidebar] [data-testid=stImage]{
#             text-align: center;
#             display: block;
#             margin-left: auto;
#             margin-right: auto;
#             width: 100%;
#         }
#     </style>
#     """, unsafe_allow_html=True
#     )

#     # Display the image
#     st.sidebar.image(img_circular, width=200)
#     st.sidebar.subheader(f"{st.session_state.name}")



    # Generate the user's profile picture
    # generate_profile_pic()