import streamlit as st
import pandas as pd
import folium
import numpy as np
from streamlit_folium import folium_static

# Load data
data = {
    'Name': ['Location_A', 'Location_B', 'Location_C', 'Location_D', 'Location_E',
            'Location_A', 'Location_B', 'Location_C', 'Location_D', 'Location_E',
             'Location_A', 'Location_B', 'Location_C', 'Location_D', 'Location_E',
             'Location_A', 'Location_B', 'Location_C', 'Location_D', 'Location_E',
             'Location_A', 'Location_B', 'Location_C', 'Location_D', 'Location_E',
            ],
    'latitude': np.random.uniform(40.7, 40.8, size=25),  # Assuming latitude range between 40.7 and 40.8
    'longitude': np.random.uniform(-74.0, -73.9, size=25)  # Assuming longitude range between -74.0 and -73.9
}

# Create DataFrame
df = pd.DataFrame(data)

# Sidebar for user input
st.sidebar.title('Filters')
selected_column = st.sidebar.selectbox('Select Column', df.columns)

# Filter data based on user selection
filtered_data =  pd.DataFrame(data)

# Display the filtered data
st.write('Filtered Data:')
st.write(filtered_data)

# Create a map object
m = folium.Map(location=(filtered_data['latitude'].mean(), filtered_data['longitude'].mean()), zoom_start=10)

# Add markers to the map
all_markers = folium.FeatureGroup(name='All Markers')
active_markers = folium.FeatureGroup(name='Active Markers', show=False)
inactive_markers = folium.FeatureGroup(name='Inactive Markers', show=False)


for index, row in filtered_data.iterrows():
    status_color = 'green' if index%2==0 else 'red'
    html_content = f"""
    <div style="
        display: inline-block;
        background-color: white;
        border: 2px solid black;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        font-size: 8pt;
        color: {status_color};
    ">{index}</div>
    """

    # Create a DivIcon with custom HTML content
    icon = folium.DivIcon(html=html_content)
    marker = folium.Marker([row['latitude'], row['longitude']], popup=row['Name'], icon=icon).add_to(m)
    
#     #add to groups
#     marker.add_to(all_markers)
#     if index%2==0:
#         marker.add_to(active_markers)
#     else:
#         marker.add_to(inactive_markers)


# # Add layers to the map
# all_markers.add_to(m)
# active_markers.add_to(m)
# inactive_markers.add_to(m)

# Add layer control to toggle marker visibility
folium.LayerControl().add_to(m)


polygon_coords = [ [np.random.uniform(40.7, 40.8, size=6)[i], np.random.uniform(-74.0, -73.9, size=6)[i]] for i in range(6)]

# Create a polygon object
polygon = folium.Polygon(locations=polygon_coords, color='blue', fill=True, fill_color='blue', fill_opacity=0.3)

# Add the tag to the polygon 
popup_text = "This is my polygon"
popup = folium.Popup(popup_text, parse_html=True)
polygon.add_child(popup)

# Add the polygon to the map
m.add_child(polygon)

    
# Render the map
folium_static(m)