import streamlit as st
# import leafmap.foliumap as leafmap
import geemap.foliumap as geemap

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 = geemap.Map(
    basemap="Esri",
    plugin_Draw=True,
    Draw_export=True,
    locate_control=True,
    plugin_LatLngPopup=False, center=map_center, zoom=12,
)


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")