from urllib.request import urlopen
import json
import pandas as pd
import plotly.graph_objects as go
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
from dash.exceptions import PreventUpdate
from time import sleep


with urlopen('https://raw.githubusercontent.com/plotly/datasets/master/geojson-counties-fips.json') as response:
    counties = json.load(response)


df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/fips-unemp-16.csv",
                 dtype={"fips": str})

app = dash.Dash(__name__)
server = app.server

mapbox_token = "pk.eyJ1IjoicGxvdGx5bWFwYm94IiwiYSI6ImNqdnBvNDMyaTAxYzkzeW5ubWdpZ2VjbmMifQ.TXcBE-xg9BFdV2ocecc_7g"

fig = go.Figure(go.Choroplethmapbox(geojson=counties, locations=df.fips, z=df.unemp,
                                    colorscale="Viridis", zmin=0, zmax=12,
                                    marker_opacity=0.5, marker_line_width=0))
fig.update_layout(mapbox_style="carto-positron",
                  mapbox_accesstoken=mapbox_token,
                  mapbox_zoom=3, mapbox_center={"lat": 37.0902, "lon": -95.7129})
fig.update_layout(margin={"r": 0, "t": 0, "l": 0, "b": 0}, uirevision=True)

app.layout = html.Div(
    children=[
        html.Button(id='btn', children='update', n_clicks=0),
        dcc.Loading(dcc.Graph(id='mapbox-loading', figure=fig), type='default'),
        html.Div(style={'backgroundColor': 'pink'}, children='hello')]
)


@app.callback(
    Output('mapbox-loading', 'figure'),
    [Input('btn', 'n_clicks')]
)
def update(click):
    if click is None or click == 0:
        raise PreventUpdate
    sleep(2)
    fig.update_layout(mapbox_style="light")
    return fig


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