import dash
from dash import Dash, dcc, html

from .datalake import stages
from .pages import config, home, repository, schema, table

external_scripts = [{"src": "https://cdn.tailwindcss.com"}]
# external_script = ["https://tailwindcss.com/", {"src": "https://cdn.tailwindcss.com"}]

app = Dash(
    __name__,
    use_pages=True,
    external_scripts=external_scripts,
    suppress_callback_exceptions=True,
)
app.scripts.config.serve_locally = True
dash.register_page(
    home.__name__,
    path="/",
    layout=home.layout,
)
dash.register_page(config.__name__, path="/config", layout=config.layout)
dash.register_page(
    repository.__name__,
    path_template="/repository/<repository_name>",
    layout=repository.layout_factory(stages),
)
dash.register_page(
    schema.__name__,
    path_template="/stg/<repository_name>/schema/<schema_name>",
    layout=schema.layout_factory(stages),
)
dash.register_page(
    table.__name__,
    path_template="/stg/<repository_name>/schm/<schema_name>/table/<table_name>",
    layout=table.layout_factory(stages),
)
table.callback_factory(app)

app.layout = html.Div(
    [
        html.Div(
            [
                dcc.Link(
                    html.H1(
                        "Plesna",
                    ),
                    href="/",
                    className="text-4xl p-4 text-center grow align-baseline",
                ),
                dcc.Link(
                    "Config",
                    href="/config",
                    className="flex-none hover:bg-amber-100 p-4 align-middle",
                ),
            ],
            className="bg-amber-300 flex flex-row shadow",
        ),
        dash.page_container,
    ]
)

if __name__ == "__main__":
    app.run(debug=True)