from shiny import App, reactive, ui
from query import query_output_server, query_output_ui
from htmltools import tags
import shinyswatch

app_ui = ui.page_fluid(
    shinyswatch.theme("zephyr"),
    ui.row(
        ui.column(
            2,
            ui.br(),
            ui.br(),
            ui.input_action_button("add_query", "Add Query"),
        ),
        ui.column(
            10,
            ui.tags.div(query_output_ui("initial_query"), id="module_container"),
        ),
    ),
)


def server(input, output, session):
    mod_counter = reactive.Value(0)

    query_output_server("initial_query")

    @reactive.Effect
    @reactive.event(input.add_query)
    def _():
        counter = mod_counter.get() + 1
        mod_counter.set(counter)
        id = "query_" + str(counter)
        ui.insert_ui(
            selector="#module_container", where="afterBegin", ui=query_output_ui(id)
        )
        query_output_server(id)


app = App(app_ui, server)