import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State


def parse_query_params(s):
    s = s.lstrip("?")
    return dict(pair.split("=") for pair in s.split("&"))


def create_deepdive_layout(cluster=None):
    try:
        cluster = int(cluster)
    except TypeError:
        cluster = None

    cluster_dropdown = dcc.Dropdown(
        id="cluster-dropdown",
        options=[
            {"label": "Cluster 1", "value": 1},
            {"label": "Cluster 2", "value": 2},
        ],
        value=cluster,
    )
    return [
        html.H2("Deepdive"),
        html.Hr(),
        dbc.Row([dbc.Col(cluster_dropdown), dbc.Col(id="deepdive-output")]),
    ]


overview_layout = [
    html.H2("Overview"),
    html.Hr(),
    dbc.Row(
        [
            dbc.Col(
                dbc.Card(
                    [
                        html.P("This link corresponds to cluster 1"),
                        dbc.CardLink("Cluster 1", href="/deepdive?cluster=1"),
                    ],
                    body=True,
                )
            ),
            dbc.Col(
                dbc.Card(
                    [
                        html.P("This link corresponds to cluster 2"),
                        dbc.CardLink("Cluster 2", href="/deepdive?cluster=2"),
                    ],
                    body=True,
                )
            ),
        ]
    ),
]

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
app.config.suppress_callback_exceptions = True

app.layout = html.Div(
    [
        dcc.Location(id="url"),
        dbc.NavbarSimple(
            children=[
                dbc.NavLink("Page 1", href="/overview", id="overview-link"),
                dbc.NavLink("Page 2", href="/deepdive", id="deepdive-link"),
            ],
            brand="Demo",
            color="primary",
            dark=True,
        ),
        dbc.Container(id="page-content", className="pt-4"),
    ]
)


# this callback uses the current pathname to set the active state of the
# corresponding nav link to true, allowing users to tell see page they are on
@app.callback(
    [Output("overview-link", "active"), Output("deepdive-link", "active")],
    [Input("url", "pathname")],
)
def toggle_active_links(pathname):
    if pathname == "/":
        # Treat overview as the homepage / index
        return True, False
    return pathname == "/overview", pathname == "/deepdive"


@app.callback(
    Output("page-content", "children"),
    [Input("url", "pathname")],
    [State("url", "search")],
)
def render_page_content(pathname, search):
    if pathname in ["/", "/overview"]:
        return overview_layout
    elif pathname == "/deepdive":
        if search:
            query_params = parse_query_params(search)
        else:
            query_params = {}
        return create_deepdive_layout(**query_params)
    # If the user tries to reach a different page, return a 404 message
    return dbc.Jumbotron(
        [
            html.H1("404: Not found", className="text-danger"),
            html.Hr(),
            html.P(f"The pathname {pathname} was not recognised..."),
        ]
    )


@app.callback(
    Output("deepdive-output", "children"), [Input("cluster-dropdown", "value")]
)
def create_cluster_output(value):
    if value:
        return f"Cluster {value} is selected"
    return "Nothing is selected..."


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