import streamlit as st
import streamlit.components.v1 as components

import pinecone_utils

ANSWER_TEMPLATE = """
    <style>
    .flex-container {{display: flex;}}
    #info-card {{padding-left: 5px; overflow-y: auto; max-height: 200px;}}
    h3 {{font-weight: 600; font-size: 1rem;}}
    p {{font-weight: 400; font-size: 0.9rem;}}
    p, h3 {{font-family: "Source Sans Pro", sans-serif; line-height: 1.6; color: rgb(49, 51, 63);}}
    </style>
    <div class="flex-container">
    <div id="img-card">
    <img src="https://assets.samharris.org/images/rss/making-sense-logo.png" width="200px" height="200px">
    </div>
    <div id="info-card">
    <h3>{title}</h4>
    <p>Start time: {start}</p>
    <p>End time: {end}</p>
    <p>{text}</p>
    </div>
    </div>
    """

components.html(
    """<img style="display: block;margin-left: auto;margin-right: auto;" src="https://media0.giphy.com/media/4ei1ADTekyd9UkS3X1/giphy.gif?cid=ecf05e47yhyiaac31vpfhvellkdb6l13mfew5c91y2aheftk&rid=giphy.gif&ct=s" height="150">""",
    height=150,
)
header = """
## Join in on your favourite conversation

Here's a chatGPT style model, that has access to transcripts of all Making Sense episodes.
You can either ask it a full question (such as `How did Twitter work with the FBI?`) or just keywords (`saint augustine free will`).

"""

st.markdown(header)

st.text("")
st.text("")
st.text("")

question = st.text_input(
    "Ask Sam a question!",
    value="Is solution to the risk of a nuclear war possible even in theory?",
)
# query = "How does Sam Harris manage his time?"

st.text("")
st.text("")
st.text("")

if len(question):
    results = pinecone_utils.ask_pinecone(question=question)

    for result in results:
        components.html(
            ANSWER_TEMPLATE.format_map(result),
            height=220,
        )