import streamlit as st
import pandas as pd
import numpy as np
import yfinance as yf
import altair as alt
import plotly.figure_factory as ff
import pydeck as pdk
from vega_datasets import data as vds
import plotly.express as px
import plotly.graph_objects as go
from plotly.subplots import make_subplots
from streamlit_image_comparison import image_comparison


def on_input_change():
    user_input = st.session_state.user_input
    st.session_state.past.append(user_input)
    st.session_state.generated.append(
        {"data": "The messages from Bot\nWith new line", "type": "normal"}
    )


def on_btn_click():
    del st.session_state.past[:]
    del st.session_state.generated[:]


def main():
    st.title(" Simple LLM Chat Box")
    from streamlit_chat import message
    from streamlit.components.v1 import html

    audio_path = (
        "https://docs.google.com/uc?export=open&id=16QSvoLWNxeqco_Wb2JvzaReSAw5ow6Cl"
    )
    img_path = "https://www.groundzeroweb.com/wp-content/uploads/2017/05/Funny-Cat-Memes-11.jpg"
    markdown = """### HTML in markdown is ~quite~ **unsafe**
<blockquote>However, if you are in a trusted environment (you trust the markdown). You can use allow_html props to enable support for html.</blockquote>
* Lists
* [ ] todo
* [x] done

Math:

Lift($L$) can be determined by Lift Coefficient ($C_L$) like the following
equation.

$$
L = \\frac{1}{2} \\rho v^2 S C_L
$$

~~~py
import streamlit as st

st.write("Python code block")
~~~

~~~js
console.log("Here is some JavaScript code")
~~~
"""
    table_markdown = """A Table:
| Feature     | Support              |
| ----------: | :------------------- |
| CommonMark  | 100%                 |
| GFM         | 100% w/ `remark-gfm` |
"""
    youtube_embed = """<iframe width="400" height="215" src="https://www.youtube.com/embed/LMQ5Gauy17k" title="YouTube video player" frameborder="0" allow="accelerometer; encrypted-media;"></iframe>"""
    st.session_state.setdefault(
        "past",
        [
            "plan text with line break",
            'play the song "Dancing Vegetables"',
            "show me image of cat",
            "and video of it",
            "show me some markdown sample",
            "table in markdown",
        ],
    )
    st.session_state.setdefault(
        "generated",
        [
            {"type": "normal", "data": "Line 1 \n Line 2 \n Line 3"},
            {"type": "normal", "data": f'<audio controls src="{audio_path}"></audio>'},
            {
                "type": "normal",
                "data": f'<img width="100%" height="200" src="{img_path}"/>',
            },
            {"type": "normal", "data": f"{youtube_embed}"},
            {"type": "normal", "data": f"{markdown}"},
            {"type": "table", "data": f"{table_markdown}"},
        ],
    )
    st.title("Chat placeholder")
    chat_placeholder = st.empty()
    with chat_placeholder.container():
        for i in range(len(st.session_state["generated"])):
            message(st.session_state["past"][i], is_user=True, key=f"{i}_user")
            message(
                st.session_state["generated"][i]["data"],
                key=f"{i}",
                allow_html=True,
                is_table=True
                if st.session_state["generated"][i]["type"] == "table"
                else False,
            )
        st.button("Clear message", on_click=on_btn_click)
    with st.container():
        st.text_input("User Input:", on_change=on_input_change, key="user_input")


if __name__ == "__main__":
    main()