import os
import ee
import geemap.foliumap as geemap
import streamlit as st
import pandas   as  pd
import numpy as np

st.set_page_config(page_title="TPL MAPPING",layout="wide")

st.markdown("<h1 style='text-align: center;'>Lake Distribution map of Tibet Plateau based on OTOP</h1>", unsafe_allow_html=True)

# geemap.set_proxy(33210)

row1_col1, row1_col2 = st.columns([4, 1])

Map = geemap.Map()

# 设置区域
region = ee.FeatureCollection("projects/useful-tempest-341103/assets/water/TPBoundary")

# 获取遥感影像
datastart='2021-06-01'
dataend='2021-10-15'

def rmCloudByQA(image):
    qa = image.select('QA60')
    cloudBitMask = 1 << 10
    cirrusBitMask = 1 << 11 
    mask =qa.bitwiseAnd(cloudBitMask).eq(0)and(qa.bitwiseAnd(cirrusBitMask).eq(0))
    return image.updateMask(mask); 

S2 = (ee.ImageCollection('COPERNICUS/S2_SR')
    .filterDate(datastart,dataend)
    .filterBounds(region)
    .filter(ee.Filter.lt('CLOUDY_PIXEL_PERCENTAGE', 50))
    .map(rmCloudByQA)
    .select('B.*')
    .median()
    .clip(region))

pred = ee.Image("projects/useful-tempest-341103/assets/TPlake/pred");

# 对分类数据进行mask处理
def pred_mask(pred,threshold):
    mask=pred.where(pred.lt(threshold),0).where(pred.gte(threshold),1).toInt()
    mask=mask.setDefaultProjection('epsg:4326',None,10)
    water=mask.updateMask(mask.gt(0.5))
    return water

with row1_col2:
    # 选择底图模块
    basemaps = ['HYBRID', 'SATELLITE', 'TERRAIN']
    basemap = st.selectbox("Basemap", basemaps,index=basemaps.index('HYBRID'))
    Map.add_basemap(basemap)
            
    # 选择典型湖泊
    Typicallakes = ["Typical Lakes", "Qinghai Lake", "Selincuo", "Zhaling Lake", "Eling Lake", "Zhuonai Lake", "Margai Chaka", "Kokexili Lake"]
    lakeword = st.selectbox("Typical Lakes", Typicallakes)
    if lakeword == "Qinghai Lake":
        Map.setCenter(100.192956,36.936857, zoom=9)
    elif lakeword == "Selincuo":
        Map.setCenter(88.955657,31.810172, zoom=10)
    elif lakeword == "Zhaling Lake":
        Map.setCenter(97.294221,34.938479, zoom=11)
    elif lakeword == "Eling Lake":
        Map.setCenter(97.70816,34.91575, zoom=11)
    elif lakeword == "Zhuonai Lake":
        Map.setCenter(91.944098,35.555848, zoom=11)       
    elif lakeword == "Margai Chaka":
        Map.setCenter(86.768704,35.133507, zoom=12)     
    elif lakeword == "Kokexili Lake":
        Map.setCenter(91.129067,35.595563, zoom=11)                      
    else:
        Map.setCenter(87.745,33.092, zoom=6)
    
    # 自定义设置阈值
    Threshold = st.slider('Threshold', 0, 255, 128)
    water=pred_mask(pred,Threshold)
    
    # 选择是否分屏查看
    split = st.checkbox("Split View")
    if split:
        left_layer = geemap.ee_tile_layer(water, {'min': 0, 'max':1, 'palette': '0905ff'}, name='water',opacity=0.7)
        right_layer = geemap.ee_tile_layer(S2, {'min': 0, 'max':3000, 'bands': ['B4', 'B3', 'B2']},name='Image',shown=False)
        Map.split_map(left_layer, right_layer)
    else:
        Map.addLayer(water, {'min': 0, 'max':1, 'palette': '0905ff'}, name='water',opacity=0.7)
    
        st.sidebar.title("About")
    st.sidebar.info(
        """
        This web [app]() is maintained by [Junchuan Yu](https://junchuanyu.netlify.app/posts/). You can follow me on social media:
            [GitHub](https://github.com/JunchuanYu) | [Zhihu](https://twitter.com/giswqs) .
        
        Sentinel-2 is used as the data, and 8-band images are used as training data (B4, B3, B2, B8, B11, B12, MNDWI, SDWI). The model uses a multi-scale deep neural network model based on transfer learning, and is implemented using otop technology
    """
    )

with row1_col1:
    Map.to_streamlit(height=750)

st.markdown("<h5 style='text-align: center;'>you can follow the WeChat public account [45度科研人] and leave me a message!</h5>", unsafe_allow_html=True)

row2_col1, row2_col2,row2_col3,row2_col4 = st.columns([2,1,1,2])
with row2_col2:
    st.markdown("<img src='https://dunazo.oss-cn-beijing.aliyuncs.com/blog/wechat-simple.png' style='margin-right:25px;width:200px;height:200px;'>", unsafe_allow_html=True)
with row2_col3:
    st.markdown("<img src='https://dunazo.oss-cn-beijing.aliyuncs.com/blog/shoukuanma222.png' style='margin-right:25px;width:170px;height:190px;'>", unsafe_allow_html=True)