import gradio as gr

from contents import IMAGE, INDEX_PAGE, INTRO_PAGE, FINDING_PAGE, BUILDING_PAGE, EXTRAS_PAGE


demo = gr.Blocks()
space = gr.load("leaderboards/LeaderboardsExplorer", src="spaces")

with demo:
    with gr.Row():
        with gr.Column(scale = 1) as side_bar:
            index_button = gr.Markdown(IMAGE)
            intro_button = gr.Button("Introduction to leaderboards")
            finding_button = gr.Button("Finding a leaderboard")
            building_button = gr.Button("Building your leaderboard")
            extra_button = gr.Button("Extras")


        with gr.Column(scale = 10) as main_page:
            text_field = gr.Markdown(INDEX_PAGE)
            with gr.Row(visible=False) as finder:
                with gr.Column():
                    space.render()


    # Change text displayed on click
    intro_button.click(lambda _: INTRO_PAGE, outputs=text_field)
    finding_button.click(lambda _: FINDING_PAGE, outputs=text_field)
    building_button.click(lambda _: BUILDING_PAGE, outputs=text_field)
    extra_button.click(lambda _: EXTRAS_PAGE, outputs=text_field)
    # If the text is for the finding page, we display the LeaderboardExplorer viewer.
    text_field.change(
        lambda contents: gr.update(visible=(contents.strip() == FINDING_PAGE.strip())), 
        inputs=text_field, 
        outputs=finder
    )

demo.queue(default_concurrency_limit=40).launch()