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']
}

app.layout = html.Div([
    dcc.Dropdown(
        id='d1',
        options=[{'label': i, 'value': i} for i in options.keys()],
        value=options.keys()[0]
    ),
    dcc.Dropdown(id='d2'),
    html.Hr(),
    html.Div(id='d1-output'),
    html.Div(id='d2-output')
])


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


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


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


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


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