import os
import csv
import gradio as gr
from gradio import components
from huggingface_hub import Repository, hf_hub_download
from datetime import datetime

DATASET_REPO_URL = "https://huggingface.co/datasets/sjw/data.csv"
DATASET_REPO_ID = "sjw/data.csv"
DATA_FILENAME = "data.csv"
DIRNAME = "data"
DATA_FILE = os.path.join(DIRNAME, DATA_FILENAME)
HF_TOKEN = os.environ.get("HF_TOKEN")

# # overriding/appending to the gradio template
# SCRIPT = """
# <script>
# if (!window.hasBeenRun) {
#     window.hasBeenRun = true;
#     console.log("should only happen once");
#     document.querySelector("button.submit").click();
# }
# </script>
# """

try:
    hf_hub_download(
        repo_id=DATASET_REPO_ID,
        filename=DATA_FILENAME,
        force_filename=DATA_FILENAME
    )
except:
    print("file not found")

repo = Repository(
    local_dir = DIRNAME, clone_from=DATASET_REPO_URL, use_auth_token=HF_TOKEN
)

# def generate_html() -> str:
#     with open(DATA_FILE) as csvfile:
#         reader = csv.DictReader(csvfile)
#         rows = []
#         for row in reader:
#             rows.append(row)
#         rows.reverse()
#         if len(rows) == 0:
#             return "no messages yet"
#         else:
#             html = "<div class='chatbot'>"
#             for row in rows:
#                 html += "<div>"
#                 html += f"<span>{row['name']}</span>"
#                 html += f"<span class='message'>{row['message']}</span>"
#                 html += "</div>"
#             html += "</div>"
#             return html

# def store_message(name: str, message: str):
#     if name and message:
#         with open(DATA_FILE, "a") as csvfile:
#             writer = csv.DictWriter(csvfile, fieldnames=["name", "message", "time"])
#             writer.writerow(
#                 {"name": name, "message": message, "time": str(datetime.now())}
#             )
#         commit_url = repo.push_to_hub()
#     return generate_html()

# iface = gr.Interface(
#     store_message,
#     [
#         components.Textbox(placeholder="Your name"),
#         components.Textbox(placeholder="Your message", lines=2),
#     ],
#     "html",
#     css="""
#     .name {background-color:cornflowerblue;color:white; padding:4px;margin:4px;border-radius:4px; }
#     """,
#     title="Reading/writing to a HuggingFace dataset repo from Spaces",
#     description=f"This is a demo of how to do simple *shared data persistence* in a Gradio Space, backed by a dataset repo.",
#     article=f"The dataset repo is [{DATASET_REPO_URL}]({DATASET_REPO_URL})",
#     allow_flagging="never"
# )

# iface.launch()
def generate_html() -> str:
    with open(DATA_FILE) as csvfile:
        reader = csv.DictReader(csvfile)
        rows = []
        for row in reader:
            rows.append(row)
        rows.reverse()
        if len(rows) == 0:
            return "no messages yet"
        else:
            html = "<div class='chatbot'>"
            for row in rows:
                html += "<div>"
                html += f"<span><b>{row['name']}</b></span> "  # Make the name bold and add a space after it
                html += f"<span class='message'>{row['message']}</span>"
                html += "</div>"
            html += "</div>"
            return html
        
def store_message(name: str, message: str):

    if name and message:
        with open(DATA_FILE, "a") as csvfile:
            writer = csv.DictWriter(csvfile, fieldnames=["name", "message", "time"])
            writer.writerow(
                {"name": name, "message": message, "time": str(datetime.now())}
            )
        commit_url = repo.push_to_hub()
    return generate_html()

with gr.Blocks() as demo:
    gr.Markdown("# Title")
    name_input = components.Textbox(label="Your Username")
    message_input = components.Textbox(label="Your Feedback", lines=2)
    output_html = gr.HTML()
    submit_button = gr.Button("Submit")

    submit_button.click(store_message, inputs=[name_input, message_input], outputs=output_html)

demo.launch()