from pathlib import Path

from htmltools import HTMLDependency, tags
from shiny import App, reactive, ui

from query import query_output_server, query_output_ui

button_style = {"style": "margin: 15px"}

www_dir = Path(__file__).parent / "www"
app_ui = ui.page_fluid(
    HTMLDependency(
        "bootstrap",
        version="9.99",
        source={"subdir": str(www_dir)},
        script={"src": "bootstrap.bundle.min.js"},
        stylesheet={"href": "theme.css"},
    ),
    ui.row(
        ui.column(
            2,
            ui.row(
                button_style,
                ui.input_action_button("add_query", "Add Query"),
            ),
            ui.row(
                button_style,
                ui.input_action_button("remove_query", "Remove 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)

    @reactive.Effect
    @reactive.event(input.remove_query)
    def _():
        ui.remove_ui(selector=f"#module_container .row:first-child")


app = App(app_ui, server)