import streamlit as st

# --- SHARED ON ALL PAGES ---
#st.logo(image=":material/medical_information:")
st.logo("images/medical_information_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.png")
st.sidebar.text("Project by SPG")


# --- PAGE SETUP ---
home_page = st.Page(
    page="pages/home.py",
    title="Home",
    icon=":material/home:",
    default=True,)

type_text_page = st.Page(
    page="pages/type_text.py",
    title="type text",
    icon=":material/keyboard:",
    default=False,)

upload_file_page = st.Page(
    page="pages/upload_file.py",
    title="upload file",
    icon=":material/file_upload:",
    default=False,)

about_page = st.Page(
    page="pages/about.py",
    title="About the app",
    icon=":material/info:",
    default=False)

# --- Automatic Scrolling Approach ---
# Add a checkbox to control auto-scrolling
auto_scroll = st.sidebar.checkbox("Auto-scroll to bottom", value=True)

# Create scrollable content
for i in range(100):
    st.write(f"This is scrollable content line {i}")

# Add a manual scroll button at both top and bottom for convenience
if st.button("Scroll to Bottom") or auto_scroll:
    # Create a link target
    st.markdown('''
    <a name="bottom"></a>
    ''', unsafe_allow_html=True)
    
    # Use Streamlit's HTML component to execute the scroll
    st.components.v1.html('''
    <script>
        // Use the iframe parent to scroll the main content area
        window.parent.document.querySelector('section.main').scrollTo({
            top: window.parent.document.querySelector('section.main').scrollHeight,
            behavior: 'smooth'
        });
    </script>
    ''', height=0)

# Add some text at the bottom as a visual indicator
st.write("You've reached the bottom!")


# --- NAVIGATION SETUP ---
#pg = st.navigation(pages=[home_page, type_text_page, upload_file_page, about_page]) # WITHOUT SECTIONS
pg = st.navigation({"Home": [home_page], "Demo": [type_text_page, upload_file_page], "About": [about_page]}) # WITH SECTIONS

pg.run()