import streamlit as st # web development
import numpy as np # np mean, np random 
import pandas as pd # read csv, df manipulation
import time # to simulate a real time data, time loop 
import plotly.express as px # interactive charts 
import paho.mqtt.client as mqtt
import json
import warnings
warnings.filterwarnings('ignore')

# df = pd.read_csv('buildingdata.csv')
st.set_page_config(
    page_title = 'Real-Time Data Buliding 59',
    page_icon = '✅',
    layout = 'wide'
)

st.title("Buliding 59 Dashboard")
placeholder = st.empty()

broker_address = "localhost"
broker_port = 1883
topic = "sensor_data"

df = pd.DataFrame({"sa_temp":[60, 56, 66,69,70],"ma_temp":[30,40,50,60,65]})

def on_message(client, userdata, message):
    global df
    payload = json.loads(message.payload.decode())
    sa_temp = payload["sa_temp"]
    ma_temp = payload["ma_temp"]
    len_df = len(df)
    df.loc[len_df] = {"sa_temp": sa_temp, "ma_temp": ma_temp}
    if len_df>5:
        with placeholder.container():
            fig_col1, fig_col2 = st.columns(2)
            with fig_col1:
                st.markdown("### Supply Air temperature")
                fig1 = px.line(data_frame=df[len_df-5:len_df], y = 'sa_temp', x = df[len_df-5:len_df].index)
                st.write(fig1)
            with fig_col2:
                st.markdown("### Mixed Air temperature")
                fig2 = px.line(data_frame=df[len_df-5:len_df], y = 'ma_temp', x = df[len_df-5:len_df].index)
                st.write(fig2)
            st.markdown("### Detailed Data View")
            st.dataframe(df[len_df-5:len_df])
            # time.sleep(1)
 


client = mqtt.Client(mqtt.CallbackAPIVersion.VERSION1)
client.on_message = on_message
client.connect(broker_address, broker_port)
client.subscribe(topic)
client.loop_forever()