from dash import Dash
from dash.dependencies import Input, Output, Event, State
import dash
import dash_html_components as html
import dash_core_components as dcc
import time

app = Dash(__name__)
app.scripts.config.serve_locally = True

options = {
    'nyc': ['bky', 'bedstuy'],
    'mtl': ['plateau', 'mile end']
}


chapters = {
    'chapter-1': html.Div([
        html.Div([
            dcc.Dropdown(
                id='chapter1-d1',
                options=[{'label': i, 'value': i} for i in options.keys()],
                value=options.keys()[0]
            ),
            dcc.Dropdown(id='chapter1-d2'),
            html.Hr(),
            html.Div(id='chapter1-d1-output'),
            html.Div(id='chapter1-d2-output')
        ])
    ]),
    'chapter-2': html.Div([
        html.Div([
            dcc.Dropdown(
                id='chapter2-d1',
                options=[{'label': i, 'value': i} for i in options.keys()],
                value=options.keys()[0]
            ),
            dcc.Dropdown(id='chapter2-d2'),
            html.Hr(),
            html.Div(id='chapter2-d1-output'),
            html.Div(id='chapter2-d2-output')
        ])
    ])
}

app.layout = html.Div([
    dcc.RadioItems(
        id='toc',
        options=[{'label': i, 'value': i} for i in chapters.keys()],
        value=chapters.keys()[0]
    ),
    html.Div(id='body')
])

app.config.supress_callback_exceptions = True


@app.callback(Output('body', 'content'), [Input('toc', 'value')])
def display_body(chapter):
    return chapters[chapter]


@app.callback(Output('chapter1-d2', 'options'), [Input('chapter1-d1', 'value')])
def update(val):
    time.sleep(1)
    return [{'label': i, 'value': i} for i in options[val]]


@app.callback(Output('chapter1-d2', 'value'), [Input('chapter1-d2', 'options')])
def update(options):
    return options[0]['value']


@app.callback(Output('chapter1-d1-output', 'content'), [Input('chapter1-d1', 'value')])
def update(val):
    return 'Chapter 1, D1 Selected: {}'.format(val)


@app.callback(Output('chapter1-d2-output', 'content'), [Input('chapter1-d2', 'value')])
def update(val):
    return 'Chapter 1, D2 Selected: {}'.format(val)


@app.callback(Output('chapter2-d2', 'options'), [Input('chapter2-d1', 'value')])
def update(val):
    time.sleep(1)
    return [{'label': i, 'value': i} for i in options[val]]


@app.callback(Output('chapter2-d2', 'value'), [Input('chapter2-d2', 'options')])
def update(options):
    return options[0]['value']


@app.callback(Output('chapter2-d1-output', 'content'), [Input('chapter2-d1', 'value')])
def update(val):
    return 'Chapter 2, D1 Selected: {}'.format(val)


@app.callback(Output('chapter2-d2-output', 'content'), [Input('chapter2-d2', 'value')])
def update(val):
    return 'Chapter 2, D2 Selected: {}'.format(val)


if __name__ == '__main__':
    app.run_server(debug=True, threaded=True)
