import gradio as gr


# The UI of the demo defines here.
with gr.Blocks() as demo:
    gr.Markdown("Auto trade bot.")
    with gr.Row():
        gr.Markdown("Trade data settings.")
        time_slider = gr.components.Slider(minimum=1, maximum=20, value=5, label="Time interval", interactive=True)
    gr.Markdown("Candle polts may goes here.")
    gr.components.Image()
    # for plotly it should follow this: https://gradio.app/plot-component-for-maps/
    # trade_plot = gr.Plot()
    # demo.load(the_plot, [*args], [gr.components], trade_plot)
    
    with gr.Row():
        with gr.Column():
            gr.Markdown("User Interactive panel.")
            amount = gr.components.Textbox(value="", label="Amount", interactive=True)
            with gr.Row():
                buy_btn = gr.components.Button("Buy", label="Buy", interactive=True, inputs=[amount])
                sell_btn = gr.components.Button("Sell", label="Sell", interactive=True, inputs=[amount])
                hold_btn = gr.components.Button("Hold", label="Hold", interactive=True, inputs=[amount])
        with gr.Column():
            gr.Markdown("Trade bot history.")
            # show trade box history in a table or something
            gr.components.Textbox(value="Some history? Need to decide how to show bot history", label="History", interactive=True)

demo.launch()