import logging

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

from haystack_utils import get_pipe, ask_pipe
from rss import get_matadata

logging.basicConfig(
    format="%(levelname)s - %(name)s -  %(message)s", level=logging.WARNING
)
logging.getLogger("haystack").setLevel(logging.INFO)

pipe = get_pipe()

METADATA_MAP = get_matadata()

ANSWER_TEMPLATE = """
    <style>
    .flex-container {{display: flex;}}
    #info-card {{padding-left: 5px;}}
    </style>
    <div class="flex-container">
    <div id="img-card">
    <img src="{imgurl}" width="200px" height="200px">
    </div>
    <div id="info-card">
    <h3>{title}</h4>
    <p>{description}</p>
    </div>
    </div>
    """

question = st.text_input("Ask a question!")
# query = "How does Sam Harris manage his time?"

if len(question):
    results = ask_pipe(question=question, pipe=pipe)

    for result in results["answers"]:
        episode_path = result.meta["file_path"]
        episode_meta = METADATA_MAP[episode_path]

        episode_info = {
            "imgurl": episode_meta["thumbnail"],
            "title": episode_meta["title"],
            "description": result.context,
        }

        components.html(
            ANSWER_TEMPLATE.format_map(episode_info),
            height=220,
        )