from utils import *

global data_component


css = """
.table-class th:nth-child(1), .table-class td:nth-child(1) {
    min-width: 200px;
    max-width: 300px;
    word-wrap: break-word;
    white-space: normal;
}
"""


block = gr.Blocks(css=css) 

with block:

    gr.Markdown(
        LEADERBORAD_INTRODUCTION
    )
    with gr.Tabs(elem_classes="tab-buttons") as tabs:
        # Table 1
        with gr.TabItem("📊 VideoScore Leaderboard", elem_id="qa-tab-table1", id=1):
            with gr.Row():
                with gr.Accordion("Citation", open=False):
                    citation_button = gr.Textbox(
                        value=CITATION_BUTTON_TEXT,
                        label=CITATION_BUTTON_LABEL,
                        elem_id="citation-button",
                        lines=20,
                    )
            gr.Markdown(
                TABLE_INTRODUCTION
            )

            data_component=gr.components.Dataframe(
                value=get_df(), 
                headers=COLUMN_NAMES,
                type="pandas", 
                datatype=DATA_TITILE_TYPE,
                interactive=False,
                visible=True,
                elem_classes="table-class" 
                )
            
            refresh_button = gr.Button("Refresh")
            refresh_button.click(fn=refresh_data, outputs=data_component)

        # table 2
        with gr.TabItem("📝 About", elem_id="qa-tab-table2", id=2):
            gr.Markdown(LEADERBORAD_INFO, elem_classes="markdown-text")
        

block.launch(share=True)