# load up the libraries
import panel as pn
import pandas as pd
import altair as alt
from vega_datasets import data

# we want to use bootstrap/template, tell Panel to load up what we need
pn.extension(design='bootstrap')

# we want to use vega, tell Panel to load up what we need
pn.extension('vega')

# create a basic template using bootstrap
template = pn.template.BootstrapTemplate(
    title='SI649 Walkthrough',
)

# the main column will hold our key content
maincol = pn.Column()

# add some markdown to the main column
maincol.append("# Markdown Title")
maincol.append("I can format in cool ways. Like **bold** or *italics* or ***both*** or ~~strikethrough~~ or `code` or [links](https://panel.holoviz.org)")
maincol.append("I am writing a link [to the streamlit documentation page](https://docs.streamlit.io/en/stable/api.html)")
maincol.append('![alt text](https://upload.wikimedia.org/wikipedia/commons/thumb/3/3e/Irises-Vincent_van_Gogh.jpg/314px-Irises-Vincent_van_Gogh.jpg)')

# load up a dataframe and show it in the main column
cars_url = "https://raw.githubusercontent.com/altair-viz/vega_datasets/master/vega_datasets/_data/cars.json"
cars = pd.read_json(cars_url)
temps = data.seattle_weather()

maincol.append(temps.head(10))

# create a basic chart
hp_mpg = alt.Chart(cars).mark_circle(size=80).encode(
    x='Horsepower:Q',
    y='Miles_per_Gallon:Q',
    color='Origin:N'
)

# dispaly it in the main column
# maincol.append(hp_mpg)

# create a basic slider
simpleslider = pn.widgets.IntSlider(name='Simple Slider', start=0, end=100, value=0)

# generate text based on slider value
def square(x):
    return f'{x} squared is {x**2}'


# bind the slider to the function and hold the output in a row
row = pn.Column(pn.bind(square,simpleslider))

# add both slider and row
maincol.append(simpleslider)
maincol.append(row)

# variable to track state of visualization
flip = False

# function to either return the vis or a message
def makeChartVisible(val):
    global flip  # grab the variable outside the function
    if (flip == True):
        flip = not flip             # flip to False
        return pn.pane.Vega(hp_mpg) # return the vis
    else:
        flip = not flip             # flip to true and return text
        return pn.panel("Click the button to see the chart")
    
# add a button and then create the binding
btn = pn.widgets.Button(name='Click me')
row = pn.Row(pn.bind(makeChartVisible, btn))

# add button and new row to main column
maincol.append(btn)
maincol.append(row)

# create a base chart
basechart = alt.Chart(cars).mark_circle(size=80,opacity=0.5).encode(
    x='Horsepower:Q',
    y='Acceleration:Q',
    color="Origin:N"
)

# create something to hold the base chart
currentoption = pn.panel(basechart)

# create a selection widget
select = pn.widgets.Select(name='Select', options=['Horsepower','Acceleration','Miles_per_Gallon'])

# create a function to modify the basechart that is being
# held in currentoption
def changeOption(val):
    # grab what's there now
    chrt = currentoption.object
    # change the encoding based on val
    chrt = chrt.encode(
        y=val+":Q"
    )
    # replace old chart in currentoption with new one
    currentoption.object = chrt

# append the selection
maincol.append(select)
# append the binding (in thise case nothing is being returned by changeOption, so...)
chartchange = pn.Row(pn.bind(changeOption, select))
# ... we need to also add the chart
maincol.append(chartchange)
maincol.append(currentoption)

# add the main column to the template
template.main.append(maincol)

# Indicate that the template object is the "application" and serve it
template.servable(title="SI649 Walkthrough")