import gradio as gr
import time

css="""
#menu_btn{
    display: flex;
    background: blue;
    flex-direction: row;
    flex-wrap: nowrap;
    padding: 0;
    margin: 0;
    justify-content: center;
    align-items: center;
    min-width: 10px;
    border-radius: 3px;
}
#row_1{
    gap:0px;
}
"""

adj=[]

def up_html(inp):
    out = inp.replace("\n","<br>")
    print (out)
    return(gr.HTML.update(out),out)



def bold(inp):
    if "bold" in adj:
        adj.remove("bold")
        out = f"{inp}</b>"
    else:
        adj.append("bold")
        out = f"{inp}<b>"
    print (adj)
    out1,out2 = up_html(out)
    return out1,out2
    
def pause():
    time.sleep(0.1)

def txt_to_html(inp):
    return(inp)


with gr.Blocks(css=css) as app:
    with gr.Box():
        with gr.Row(elem_id='row_1'):
            btn1=gr.Button(value='🎃',elem_id='menu_btn')
            btn2=gr.Button(elem_id='menu_btn')
            btn3=gr.Button(elem_id='menu_btn')
            btn4=gr.Button(elem_id='menu_btn')
            btn5=gr.Button(elem_id='menu_btn')
            btn6=gr.Button(elem_id='menu_btn')
            btn7=gr.Button(elem_id='menu_btn')
            btn8=gr.Button(elem_id='menu_btn')
            btn9=gr.Button(elem_id='menu_btn')
        with gr.Row():
            inp=gr.Textbox(lines=6)
            outp=gr.Textbox(lines=6,every=0.1)
        out_html=gr.HTML()
    
    inp.change(pause,None,None,show_progress=False).then(txt_to_html,inp,outp,show_progress=False)
    #(up_html,outp,[out_html,outp], show_progress=False)
    outp.change(up_html,outp,[out_html,outp], show_progress=False)
    #out_html.change(up_html,outp,[out_html,outp], show_progress=False)

    btn1.click(bold,outp,[out_html,outp],show_progress=False)



app.queue(concurrency_count=100).launch()