import gradio as gr
from gradio_buttontip import ButtonTip

def submit():
    return gr.Button(value='New Left Button'), gr.Button(value='New Right Button')


css = """
.icon-button {
    display: flex;
    background-color: transparent;
    border: none;
    box-shadow: none;
    padding: 0px 0px;
    justify-content: center;
    align-items: center;
    max-height: 24px;
    min-height: 24px;
    max-width: 24px !important;
    min-width: 24px !important;
}
"""

CIMStheme = gr.themes.Soft().set(
    button_primary_background_fill='#000D65',
    button_primary_border_color='#000D65',
    button_secondary_background_fill='#FFFFFF',
    button_primary_background_fill_hover='#454E8E',
    block_title_text_color='#000D65',
    block_title_background_fill='#E6E7F0',
    block_label_background_fill='#E6E7F0',
    block_label_text_color='#000D65',
    button_secondary_border_color='#000D65',
    button_secondary_text_color='#000D65',
    button_border_width='2px',
    checkbox_label_background_fill='#F9FAFB',
    checkbox_label_background_fill_selected='#E6E7F0',
    checkbox_background_color_selected='#000D65',
    checkbox_border_color_selected='#000D65',
    checkbox_border_color='#E5E7EB',
    checkbox_background_color='#F9FAFB',
    checkbox_label_border_color='#ababab',
    checkbox_label_text_color='#000D65',
    checkbox_label_text_color_selected='#000D65'
    )

with gr.Blocks(css=css, theme=CIMStheme) as demo:
    gr.Markdown("This interface showcases a button with a tooltip.")
    with gr.Row():
        first_btn = ButtonTip(
                tooltip="Tooltip Text",
                tooltip_color="white",  # Custom color
                tooltip_background_color="red",
                x=120,  # No horizontal offset
                y=-20,  # Above the button
                value="",
                elem_classes=['icon-button'],
                variant='primary',
                icon='QuizIcon.png',
                scale=0
            )
        second_btn = ButtonTip(
                tooltip="Tooltip Text",
                tooltip_color="white",  # Custom color
                tooltip_background_color="blue",
                x=-90,  # No horizontal offset
                y=-20,  # Above the button
                value="",
                elem_classes=['icon-button'],
                variant='primary',
                icon='PDFIcon.png',
                scale=0
            )
    with gr.Row():
        third_btn = gr.Button(value="",
                elem_classes=['icon-button'],
                variant='primary',
                icon='QuizIcon.png',
                scale=0)
        fourth_btn = gr.Button(                value="",
                elem_classes=['icon-button'],
                variant='primary',
                icon='PDFIcon.png',
                scale=0)
    with gr.Row():
        submit_btn = gr.Button(value='Submit')
        submit_btn.click(fn=submit, inputs=None, outputs=[first_btn, second_btn])
        #submit_btn.click(fn=submit, inputs=None, outputs=[third_btn, fourth_btn])

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