import streamlit as st
import streamlit.components.v1 as components
from streamlit_extras.let_it_rain import rain
from streamlit_extras.colored_header import colored_header
import random

# Title of the app with custom HTML for color and size
st.markdown(
    """
    <h1 style='text-align: center; color: pink ; font-size: 40px;'>
        A map of imperfect but perfect conversations
    </h1>
    <hr style='border:1px solid magenta'>
    <p style='text-align: center; color: violet; font-size: 18px;'>
        Happy Craziversary!!!
    </p>
    """,
    unsafe_allow_html=True,
)

# Define the map URLs
map_url_1 = "https://www.google.com/maps/d/embed?mid=1punqzU7t2tqZcLWxUXj966rITF0pmGQ&ehbc=2E312F"
map_url_2 = "https://www.google.com/maps/d/embed?mid=1tTBe_EuuCjzQu09Fx_cgom2M9h0hvQ8&ehbc=2E312F"

# Initialize the session state to track which map is displayed
if 'map_displayed' not in st.session_state:
    st.session_state.map_displayed = map_url_1

# Define a function to switch the map
def switch_map():
    if st.session_state.map_displayed == map_url_1:
        st.session_state.map_displayed = map_url_2
    else:
        st.session_state.map_displayed = map_url_1

# Add a button to switch the map
if st.button("Switch Map"):
    switch_map()

# Embed the selected map
iframe_html = f'''
<iframe src="{st.session_state.map_displayed}" width="100%" height="480" frameborder="0" style="border:0" allowfullscreen></iframe>
'''

# Render the iframe
components.html(iframe_html, height=500)

# Function to create alternating rain effect

rain(
    emoji="🤓"  "🌸",
    font_size=25,
    falling_speed=5,
    animation_length="infinite",
    )