import streamlit as st
import pandas as pd
import numpy as np
import geopandas as gpd

import folium
from folium.plugins import Draw
from streamlit_folium import st_folium

st.title('This is GIS website, WELLCOME!')

df1 = gpd.read_file('Algeria.shp')
df2 = gpd.read_file('Tunisia.shp')
df3 = gpd.read_file('libya.shp')
df4 = gpd.read_file('Morocco.shp')

with st.sidebar:
    st.title("Different Map Tiles")
    option = st.selectbox(" ", ("OpenstreetMap", "Stamen Terrain", "Stamen Toner"))
    m = folium.Map(location=[28.0289837, 24.61], tiles=option, zoom_start=4.1)
 
tab1, tab2, tab3, tab4 = st.tabs(['Home', "About", "Contact", "Help"])
   
with tab1:
    st.header("Geographic Map")
    option0 = st.selectbox('which data would you like see ?', ('All', 'Algeria', 'Tunisia', "Libya", "Morocco")) 
    if option0 == 'Algeria':
        df1 = df1.to_json()
        df1 = folium.GeoJson(data=df1)
        df1.add_to(m)
    elif option0 == 'Tunisia':
        df2 = df2.to_json()
        df2 = folium.GeoJson(data=df2)
        df2.add_to(m)
    elif option0 == 'Libya':
        df3 = df3.to_json()
        df3 = folium.GeoJson(data=df3)
        df3.add_to(m)
    elif option0 == 'Morocco':
        df4 = df4.to_json()
        df4 = folium.GeoJson(data=df4)
        df4.add_to(m)
    else :
        df1 = df1.to_json()
        df1 = folium.GeoJson(data=df1)
        df1.add_to(m)
        df2 = df2.to_json()
        df2 = folium.GeoJson(data=df2)
        df2.add_to(m)
        df3 = df3.to_json()
        df3 = folium.GeoJson(data=df3)
        df3.add_to(m)
        df4 = df4.to_json()
        df4 = folium.GeoJson(data=df4)
        df4.add_to(m)
            
    Draw(export=True).add_to(m)
    output = st_folium(m, width=1300, height=600)
   
with tab2:
    st.header("About")
    st.write("This is GIS website, WELLCOME!")

with tab3:
    st.header("Contact")
    st.write("You can contact us by email: mohamedtahar.fortas@gmail.com")

with tab4:
    st.header("Streamlit documentation")
    st.help(st)