import streamlit as st
import leafmap.foliumap as leafmap
from streamlit.components.v1 import html
import ee
import folium
import pandas
# import geemap.foliumap as geemap
# import ee
from datetime import date, timedelta, datetime


st.set_page_config(layout="wide")

st.sidebar.info(
    """
    Web App URL: <https://onfarmview.com/>
    
    """
)

st.sidebar.title("Contact")

st.sidebar.markdown('<a href="mailto:admin@onfarmview.com">Contact us !</a>', unsafe_allow_html=True)

st.title("On Farm View")

footer_content = """
    <!-- Footer content -->
    <p>&copy; 2023 On Farm View. All rights reserved.</p>
    <aside class="footer-right">
        <!-- Histats.com  (div with counter) -->
        <div id="histats_counter"></div>
        <!-- Histats.com  START  (aync)-->
        <script type="text/javascript">
            var _Hasync= _Hasync|| [];
            _Hasync.push(['Histats.start', '1,4819636,4,29,115,60,00011111']);
            _Hasync.push(['Histats.fasi', '1']);
            _Hasync.push(['Histats.track_hits', '']);
            (function() {
                var hs = document.createElement('script'); hs.type = 'text/javascript'; hs.async = true;
                hs.src = ('//s10.histats.com/js15_as.js');
                (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(hs);
            })();
        </script>
        <noscript><a href="/" target="_blank"><img  src="//sstatic1.histats.com/0.gif?4819636&101" alt="hit tracker" border="0"></a></noscript>
        <!-- Histats.com  END  -->
    </aside>
    """

st.sidebar.markdown(footer_content, unsafe_allow_html=True)
histats_code = """
    <!-- Histats.com  (div with counter) -->
    <div id="histats_counter"></div>
    <!-- Histats.com  START  (aync)-->
    <script type="text/javascript">
        var _Hasync= _Hasync|| [];
        _Hasync.push(['Histats.start', '1,4819636,4,29,115,60,00011111']);
        _Hasync.push(['Histats.fasi', '1']);
        _Hasync.push(['Histats.track_hits', '']);
        (function() {
            var hs = document.createElement('script'); hs.type = 'text/javascript'; hs.async = true;
            hs.src = ('//s10.histats.com/js15_as.js');
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(hs);
        })();
    </script>
    <noscript><a href="/" target="_blank"><img  src="//sstatic1.histats.com/0.gif?4819636&101" alt="hit tracker" border="0"></a></noscript>
    <!-- Histats.com  END  -->
    """

st.markdown(histats_code, unsafe_allow_html=True)

map_center=(-43.525650, 172.639847)

m = leafmap.Map(
    basemap="HYBRID",
    plugin_Draw=True,
    Draw_export=True,
    locate_control=True,
    plugin_LatLngPopup=False, center=map_center, zoom=8,
)
def ee_authenticate(token_name="EARTHENGINE_TOKEN"):
    geemap.ee_initialize(token_name=token_name)
    
ee_authenticate(token_name="4/1AfJohXleDqw1-fV1879iHUDYgPbM7f5OjCKfxFY3vJiiGqQDn_ff-Luhhhk")  #4/1AfJohXkTlWMKd8fPevD3hd4tAq_j-YlD2CabTy7QtM7iu1gNB3XdBEqRehA
# m = leafmap.Map()
# m = leafmap.Map(center=[-40.9006, 174.8860], zoom=7)
# m.add_basemap("Esri")    
# m.add_basemap("Stamen.Terrain")
# m.add_basemap("CartoDB.Positron")
se2 = ee.ImageCollection('COPERNICUS/S2_SR').filterDate(
            startDate,endDate).filter(
            ee.Filter.lt("CLOUDY_PIXEL_PERCENTAGE",80)).map(maskCloudAndShadows).median()

band = ['B4','B3','B2']
rgbViza = {"min":0.0, "max":0.7,"bands":band}
titlemap = "Sentinel 2 - Natural Color"
m.addLayer(se2, rgbViza, titlemap)

m.to_streamlit(height=700)




# st.info("Click on the left sidebar menu to navigate to the different apps.")

# st.subheader("Timelapse of Satellite Imagery")
# st.markdown(
#     """
#     The following timelapse animations were created using the Timelapse web app. Click `Timelapse` on the left sidebar menu to create your own timelapse for any location around the globe.
# """
# )

# row1_col1, row1_col2 = st.columns(2)
# with row1_col1:
#     st.image("https://github.com/giswqs/data/raw/main/timelapse/spain.gif")
#     st.image("https://github.com/giswqs/data/raw/main/timelapse/las_vegas.gif")

# with row1_col2:
#     st.image("https://github.com/giswqs/data/raw/main/timelapse/goes.gif")
#     st.image("https://github.com/giswqs/data/raw/main/timelapse/fire.gif")