import streamlit as st
from streamlit_echarts import st_pyecharts
from plot import *
from cpc_iri_web import header
from st_on_hover_tabs import on_hover_tabs
from datetime import datetime, timedelta
import requests
from PIL import Image
import warnings
warnings.simplefilter(action='ignore', category=FutureWarning)

# Configurando a página
st.set_page_config(layout='wide')

# Estilos
streamlit_style = """
        <style>
        footer {visibility: hidden;}
        iframe[title="streamlit_echarts.st_echarts"]{ height: 500px;} 
        ul.streamlit-expander {border-top: 0;}
        ul.streamlit-expander {border-left: 0;}
        ul.streamlit-expander {border-right: 0;}
        ul.streamlit-expander {border-bottom: solid 2px;}
        ul.streamlit-expander {border-radius: 0px;}
        .css-11qx4gg {display: none;}
       </style>
        """
st.markdown(streamlit_style, unsafe_allow_html=True) 
st.markdown('<style>' + open('estilos/style.css').read() + '</style>', unsafe_allow_html=True)

# Sidebar
with st.sidebar:

    logo = Image.open('imgs/logo.png')
    st.image(logo)
    st.divider()

    component = on_hover_tabs(
        tabName=['Índices oceânicos', 'Índice atmosférico', 'Mapas e índices diários', 'Previsão POAMA', 'Previsão CPC/IRI'], 
        iconName=['storm', 'cloud', 'maps', 'public', 'public'], 
        styles = {'navtab': {'background-color':'#111','color': '#818181','font-size': '15px',
                            'transition': '0.5s',
                            'white-space': 'nowrap',
                            'text-transform': 'uppercase'},
                            'tabOptionsStyle': {':hover :hover': {'color': 'white','cursor': 'pointer'}},
                            'iconStyle':{'position':'fixed','left':'7.5px', 'text-align': 'left'},
                            'tabStyle' : {'list-style-type': 'none', 'margin-bottom': '30px', 'padding-left': '30px'}},
         default_choice=0)

    # #st.header('Menu')
    # component = sac.menu(

    #     items=[
    #         sac.MenuItem('Monitoramento', type='group', children=['Índices oceânicos', 'Índice atmosféricos', 'Mapas']),
    #         sac.MenuItem('Previsão', type='group', children=['CPC/IRI']),
    #         #sac.MenuItem('Estudo de casos', type='group', children=['ENA', 'Precipitação'])
    #     ],
    #     index=1
    # )

if component == 'Índices oceânicos':

    st.title('Evolução dos Índices ENSO por região do Oceano Pacíficio', anchor=False)

    descricao = '''
    O índice ONI é calculado a partir da região 3.4 do Oceano Pacífico e pode ser utilizado para a caracterização dos episódios de <span style="color: red">aquecimento da TSM equatorial do oceano Pacífico</span> e <span style="color: blue">resfriamento da TSM equatorial do oceano Pacífico</span>. A duração de pelo menos cinco médias móveis consecutivas de três meses <span style="color: red">acima de 0.5°C</span> classifica um episódio de <span style="color: red">El Niño</span>, enquanto que <span style="color: blue">abaixo de -0.5°C</span> classifica um episódio de <span style="color: blue">La Ninã</span>. Além da região 3.4, as demais regiões do pacíficio equatorial (Nino3, Nino4, Nino1+2) também possuem influência nos padrões de teleconexão e devem ser monitorados. O Índice ONI e as anomalias de TSM são calculados a partir do conjunto de dados <i><a href='https://www.ncei.noaa.gov/products/extended-reconstructed-sst'>Extended Reconstructed Sea Surface Temperature (ERSSTv5).</i></a>
    '''

    st.write(descricao, unsafe_allow_html=True)

    col1, col2 = st.columns(2)

    with col1:
        st.header('Sazonal')
        tab1, tab2, tab3, tab4, tab5 = st.tabs(['Índice ONI','Niño 1+2', 'Niño 3', 'Niño 3.4', 'Niño 4'])
        with tab1:
            plot = plot_oni_season()
            st_pyecharts(plot_oni_season(), height="500px", width="100%")
        with tab2:
            plot = plot_sst_indexes_season('nino12')
            st_pyecharts(plot, height="500px", width="100%")
        with tab3:
            plot = plot_sst_indexes_season('nino3')
            st_pyecharts(plot, height="500px", width="100%")
        with tab4:
            plot = plot_sst_indexes_season('nino34')
            st_pyecharts(plot, height="500px", width="100%")
        with tab5:
            plot = plot_sst_indexes_season('nino4')
            st_pyecharts(plot, height="500px", width="100%")    
        
    with col2:
        st.header('Mensal')
        tab1, tab2, tab3, tab4, tab5 = st.tabs(['Índice ONI','Niño 1+2', 'Niño 3', 'Niño 3.4', 'Niño 4'])
        with tab1:
            plot = plot_oni()
            st_pyecharts(plot, height="500px", width="100%")
        with tab2:
            plot = plot_sst_indexes('nino12')
            st_pyecharts(plot, height="500px", width="100%")
        with tab3:
            plot = plot_sst_indexes('nino3')
            st_pyecharts(plot, height="500px", width="100%")
        with tab4:
            plot = plot_sst_indexes('nino34')
            st_pyecharts(plot, height="500px", width="100%")
        with tab5:
            plot = plot_sst_indexes('nino4')
            st_pyecharts(plot, height="500px", width="100%")    

    with st.expander('**Clique para ver a distribuição geográfica das regiões**'):
        ex1, ex2, ex3 = st.columns(3)
        with ex2:
            st.image('https://www.ncei.noaa.gov/monitoring-content/teleconnections/nino-regions.gif', use_column_width=True)
            st.markdown('<strong>Fonte: NOAA/NCEI</strong>', unsafe_allow_html=True)

if component == 'Índice atmosférico':

    st.title('Evolução do Índice SOI', anchor=False)
    descricao = '''

    O Índice de Oscilação Sul (Southern Oscillation Index - SOI) é um índice baseado nas diferenças observadas de pressão ao nível do mar (PNM) entre Tahti e Darwin, na Austrália, e pode ser um indicador das flutuações de larga escala durante as fases do fenômeno ENSO. Durante episódios de <span style="color: red">El Niño</span>, espera-se um um <span style="color: blue">Índice SOI negativo</span>. Para episódios de <span style="color: blue">La Niña</span>, espera-se um um <span style="color: red">Índice SOI positivo</span>. <a href="https://www.cpc.ncep.noaa.gov/products/analysis_monitoring/ensocycle/soi.shtml">Mais informações sobre o Índice SOI.</a><br> 
    '''
    st.write(descricao, unsafe_allow_html=True)
    col1, col2 = st.columns(2)
    with col1:
        st.header('Sazonal')
        plot = plot_soi_season()
        st_pyecharts(plot, height="500px", width="100%") 
    with col2:
        st.header('Mensal')
        plot = plot_soi()
        st_pyecharts(plot, height="500px", width="100%") 

# Mapas

if component == 'Mapas e índices diários':

    st.title('Mapas de diários de temperatura da superífice do mar (TSM), anomalia da temperatura da superífice do mar e tendência da TSM nos últimos 7 dias')
    descricao = '''
    <a href="https://coralreefwatch.noaa.gov/product/5km/">Fonte: Coral Reef Watch.</a><br> 
    '''
    st.write(descricao, unsafe_allow_html=True)
    st.info('Clique ao lado da figura para ampliar seu tamanho')
    fmt = '%Y%m%d'
    now = datetime.now()

    now_1day = now - timedelta(days=1)
    now_1day_fmt = now_1day.strftime(fmt)
    now_2day = now - timedelta(days=2)
    now_2day_fmt = now_2day.strftime(fmt)

    data_escolhida_tsm = st.date_input('Escolha ou digite a data desejada', now_1day, max_value=now_1day,  key='tsm')
    data_escolhida_tsm_fmt = data_escolhida_tsm.strftime(fmt)
    data_escolhida_tsm_year_fmt = data_escolhida_tsm.year

    col1, col2, col3 = st.columns(3)
    with col1:
        st.header('Temperatura')
        url = f'https://www.star.nesdis.noaa.gov/pub/sod/mecb/crw/data/5km/v3.1_op/image_browse/daily/sst/png/{data_escolhida_tsm_year_fmt}/coraltemp_v3.1_global_{data_escolhida_tsm_fmt}.png'
        response = requests.get(url)
        if response.status_code == 200:
            st.image(f'https://www.star.nesdis.noaa.gov/pub/sod/mecb/crw/data/5km/v3.1_op/image_browse/daily/sst/png/{data_escolhida_tsm_year_fmt}/coraltemp_v3.1_global_{data_escolhida_tsm_fmt}.png')
        else:
            st.image(f'https://www.star.nesdis.noaa.gov/pub/sod/mecb/crw/data/5km/v3.1_op/image_browse/daily/sst/png/{data_escolhida_tsm_year_fmt}/coraltemp_v3.1_global_{now_2day_fmt}.png')
    with col2:
        st.header('Anomalia')
        url = f'https://www.star.nesdis.noaa.gov/pub/sod/mecb/crw/data/5km/v3.1_op/image_browse/daily/ssta/png/{data_escolhida_tsm_year_fmt}/ct5km_ssta_v3.1_global_{data_escolhida_tsm_fmt}.png'
        response = requests.get(url)
        if response.status_code == 200:
            st.image(f'https://www.star.nesdis.noaa.gov/pub/sod/mecb/crw/data/5km/v3.1_op/image_browse/daily/ssta/png/{data_escolhida_tsm_year_fmt}/ct5km_ssta_v3.1_global_{data_escolhida_tsm_fmt}.png')
        else:
            st.image(f'https://www.star.nesdis.noaa.gov/pub/sod/mecb/crw/data/5km/v3.1_op/image_browse/daily/ssta/png/{data_escolhida_tsm_year_fmt}/ct5km_ssta_v3.1_global_{now_2day_fmt}.png')
    with col3:
        st.header('Tendência')
        url = f'https://www.star.nesdis.noaa.gov/pub/sod/mecb/crw/data/5km/v3.1_op/image_browse/daily/sst-trend-7d/png/{data_escolhida_tsm_year_fmt}/ct5km_sst-trend-7d_v3.1_global_{data_escolhida_tsm_fmt}.png'
        response = requests.get(url)
        if response.status_code == 200:
            st.image(f'https://www.star.nesdis.noaa.gov/pub/sod/mecb/crw/data/5km/v3.1_op/image_browse/daily/sst-trend-7d/png/{data_escolhida_tsm_year_fmt}/ct5km_sst-trend-7d_v3.1_global_{data_escolhida_tsm_fmt}.png')
        else:
            st.image(f'https://www.star.nesdis.noaa.gov/pub/sod/mecb/crw/data/5km/v3.1_op/image_browse/daily/sst-trend-7d/png/{data_escolhida_tsm_year_fmt}/ct5km_sst-trend-7d_v3.1_global_{now_2day_fmt}.png')

    st.title('Índices diários da anomalia de temperatura da superífice do mar para regiões do ENSO.')
    days = 1800
    tab1, tab2, tab3, tab4 = st.tabs(['Niño 1+2', 'Niño 3', 'Niño 3.4', 'Niño 4'])
    with tab1:
        plot = plot_daily_ssta('nino12', days)
        st_pyecharts(plot, height="500px", width="100%")
    with tab2:
        plot = plot_daily_ssta('nino3', days)
        st_pyecharts(plot, height="500px", width="100%")
    with tab3:
        plot = plot_daily_ssta('nino34', days)
        st_pyecharts(plot, height="500px", width="100%")
    with tab4:
        plot = plot_daily_ssta('nino4', days)
        st_pyecharts(plot, height="500px", width="100%")  

# if component == 'NOAA/CPC/NCEP':
#     st.title('Apresentação da NOAA/CPC/NCEP a respeito das condições de ENSO observadas semanalmente')
#     components.iframe('https://docs.google.com/presentation/d/e/2PACX-1vRTlPQuAwEDdVyjkwCwYabSuqL30Xfir6RVdYURyhlxd6-5fVhfEccAc-dXWmG2JA/embed?start=false&loop=false&delayms=3000', height=500)

if component == 'Previsão POAMA':

    # Figuras de previsão 

    st.title('Previsão dos modelos para de anomalia a TSM na região 3.4')
    descricao = '''
    <a href="http://www.bom.gov.au/climate/enso/">Fonte: Poama</a><br> 
    '''
    st.write(descricao, unsafe_allow_html=True)
    st.write('Última inicialização: <strong>14 Agosto 2023</strong>', unsafe_allow_html=True)
    
    tab1, tab2, tab3, tab4, tab5 = st.tabs(['Mês 1', 'Mês 2', 'Mês 3', 'Mês 4', 'Mês 5'])

    with tab1:
        st.image('https://github.com/josepaulo1233/enso-assets/blob/main/imgs/poama_model_lead1.png?raw=true')
    with tab2:
        st.image('https://github.com/josepaulo1233/enso-assets/blob/main/imgs/poama_model_lead2.png?raw=true')
    with tab3:
        st.image('https://github.com/josepaulo1233/enso-assets/blob/main/imgs/poama_model_lead3.png?raw=true')
    with tab4:
        st.image('https://github.com/josepaulo1233/enso-assets/blob/main/imgs/poama_model_lead4.png?raw=true')
    with tab5:
        st.image('https://github.com/josepaulo1233/enso-assets/blob/main/imgs/poama_model_lead5.png?raw=true')

    # Gráfico
    
    import pandas as pd

    st.title('Anomalia de TSM e probabilidade do ENSO')
    descricao = '''
    Previsão de anomalia de TSM e probabilidades da temperatura estar acima de +0.8°C (vermelho), em condições de neutralidade (verde), e abaixo de -0.8°C (azul) na região do Niño 3.4. <a href="http://www.bom.gov.au/climate/ocean/outlooks/#region=NINO34">Mais informações sobre a previsão do centro Australiano (POAMA).</a><br> 
    '''
    st.write(descricao, unsafe_allow_html=True)

    url = 'http://www.bom.gov.au/climate/ocean/outlooks/archive/20230812//plumes/sstOutlooks.nino34.hr.png'
    last_update = pd.to_datetime(url.split('/')[7], format='%Y%m%d')
    last_update = last_update.strftime('%B %d, %Y')
    st.write(f'Última atualização: <strong>{last_update}</strong>', unsafe_allow_html=True)
    plot = plot_poama()
    st_pyecharts(plot, height="300px", width="100%")

if component == 'Previsão CPC/IRI':

    st.title('Previsão do CPC/IRI para a anomalia de TSM na região do Niño 3.4', anchor=False)
    descricao = '''
    Dados fornecidos por <a href='https://iri.columbia.edu/ENSO'> The International Research Institute for Climate and Society, Columbia University Climate School </a><br>
    '''
    st.write(descricao, unsafe_allow_html=True)
    st.write(f'Última atualização: <strong>{header}</strong>', unsafe_allow_html=True)
    dicas = '''
    Dicas: Passe o mouse sobre a legenda para destacar a previsão de determinado modelo ou clique para remover.
    '''
    tab1, tab2, tab3, tab4 = st.tabs(['Modelos dinâmicos', 'Modelos estatisticos', 'Todos modelos', 'Previsão de concenso'])
    with tab1:
        plot = plot_cpc_iri_dinamico()
        st_pyecharts(plot, height="500px", width="100%", key='dinamico')
        st.info(dicas, icon="ℹ️")
    with tab2:
        plot = plot_cpc_iri_estatistico()
        st_pyecharts(plot, height="500px", width="100%", key='estatistico')
        st.info(dicas, icon="ℹ️")
    with tab3:
        plot = plot_cpc_iri_todos()
        st_pyecharts(plot, height="500px", width="100%", key='todos')
        st.info(dicas, icon="ℹ️")
    with tab4:
        plot = plot_iri_concenso()
        st_pyecharts(plot, height="500px", width="100%", key='concenso')
        st.info('Dicas: Clique na legenda para remover alguma barra', icon="ℹ️")