import json

import gradio as gr

from theme import Seafoam

seafoam = Seafoam()

# load css
with open("css/style.css", "r", encoding="utf-8") as file:
    css = file.read()

# start of gradio interface
with gr.Blocks(theme=seafoam, css=css) as demo:
    with gr.Row():
        with gr.Column(
            scale=1,
        ):
            pet_gallery = gr.Gallery(
                [
                    "media/partner1.png",
                    "media/partner2.png",
                    "media/partner3.png",
                    "media/partner4.png",
                ]
                * 2,
                label="夥伴",
                preview=False,
                elem_id="pet_gallery",
                columns=30,
                height=200,
            )
            pet_description = gr.Markdown("# 夥伴", elem_id="pet_avatar_description")

            badge_gallery = gr.Gallery(
                [
                    "media/badge.png",
                    "media/badge2.png",
                    "media/badge3.png",
                    "media/badge4.png",
                ]
                * 2,
                show_share_button=True,
                label="徽章",
                preview=False,
                elem_id="badge_gallery",
                columns=30,
                height=200,
            )
            badge_description = gr.Markdown("# 徽章", elem_id="badge_avatar_description")

        with gr.Column(scale=1):
            avatar = gr.Gallery(
                ["media/avatar.png", "media/avatar2.png"],
                preview=True,
                elem_id="user_avatar",
            )
            avatar_description = gr.Markdown(
                "# 光束守護者", elem_id="user_avatar_description"
            )

        with gr.Column(scale=1):
            description = gr.Markdown("# 冒險階段", elem_id="adventure_description")

            with open("htmls/progress_bar.html", "r", encoding="utf-8") as file:
                progress_bar_html = file.read()
                progress_bar_html = (
                    "<div style='max-width:100%; max-height:360px; overflow:auto'>"
                    + progress_bar_html
                )
            progress_bar = gr.HTML(
                progress_bar_html,
            )

            with open("htmls/stage_desc.html", "r", encoding="utf-8") as file:
                stage_desc_html = file.read()
                stage_desc_html = (
                    "<div style='max-width:100%; max-height:360px; overflow:auto'>"
                    + stage_desc_html
                )
            stage_desc = gr.HTML(
                stage_desc_html,
            )

    with gr.Row():
        with open("htmls/achievement.html", "r", encoding="utf-8") as file:
            html = file.read()
        html = "<div style='max-width:100%; max-height:360px; overflow:auto'>" + html
        f = gr.HTML(html, label="Achievement Log", elem_id="achievement_log")

    with gr.Row():
        i = gr.Textbox(elem_id="test1")
        o = gr.Textbox()
        b = gr.Button(elem_id="test2")
        df = gr.DataFrame()

    def run_query(user_id):
        QUERY = (
            "SELECT created_at, points, user_role, joined, developer FROM `datastore_backup.UserData`"
            f"WHERE user_id = '{user_id}'"
        )
        print(f"Start query, user_id: {user_id}, {QUERY}")
        query_job = client.query(QUERY)
        print("Running query")
        query_result = query_job.result()
        print("Query complete")
        df = query_result.to_dataframe()
        print("Convert to dataframe")
        # Select a subset of columns
        df = df[["created_at", "points", "user_role", "joined", "developer"]]
        # Convert numeric columns to standard numpy types
        print("Convert to numpy")
        df = df.astype({"points": np.int64})
        return df

    b.click(
        run_query,
        i,
        df,
    )


if __name__ == "__main__":
    demo.launch()