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

app = dash.Dash(__name__)

app.layout = html.Div([
    dcc.RadioItems(
        id='toc',
        options=[
            {'label': i, 'value': i}
            for i in ['Chapter 1', 'Chapter 2']
        ]
    ),
    html.Div(id='body'),
    dcc.URL(id='url', pathname='/')
])


@app.callback(Output('url', 'pathname'), [Input('toc', 'value')])
def update_path(value):
    return value.lower().replace(' ', '-')


@app.callback(Output('body', 'content'), [Input('url', 'pathname')])
def update_content(url):
    print(url)
    if url is None:
        return html.Div()
    if 'chapter-1' in url.lower():
        return html.H3('Welcome to Chapter 1')
    elif 'chapter-2' in url.lower():
        return html.H3('Welcome to Chapter 2')
    else:
        return html.H3('You are here nor there')


app.scripts.config.serve_locally = True

if __name__ == '__main__':
    app.server.run(debug=True, threaded=True, port=9998)
