import pandas as pd
from bokeh.plotting import figure, output_file, show
from bokeh.models import Title, Div
from bokeh.palettes import Category10_10
from bokeh.plotting import figure, output_file, show, curdoc
from bokeh.models import Label, ColumnDataSource
from bokeh.palettes import Category10_10
from bokeh.layouts import column
from bokeh.models.widgets import CheckboxGroup, RadioGroup


# Create a sample dataframe
df = pd.DataFrame({
    'Training database size': [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
    'Number of hands on steering wheel': [70,80,76,83,84,88,91,92,93,94],
    'Number of hands on tablet': [97,97,98,99,99,99,99,99,99,99],
    #'Tablet position': [100, 100, 100, 100, 100, 100, 100, 100, 100, 100]
})

df.to_csv('output/db_comparison.csv', index=False)

df.index.name = 'Training database size'
df_title = 'Accuracy evolution as function of the database size'

# Define output file name and create a new Bokeh figure
output_file('output/db_comparison.html')
p = figure(title='Accuracy evolution as function of the database size', x_axis_label='X-axis', y_axis_label='Y-axis', width=800, height=400, sizing_mode='scale_width')#, toolbar_location=None)


# Add a title to the x-axis
xaxis_title = Label(text='<b>Category</b>', x=0.5, y=-0.2,  text_align='center', text_baseline='middle')
p.xaxis.axis_label = "Training database size"
p.yaxis.axis_label = "Accuracy"
#p.add_layout(xaxis_title, 'below')

# Define a color palette and loop through all columns except the first one (x)
palette = Category10_10
data = {}
for i, col in enumerate(df.columns[1:]):
    # Add a line glyph for each column with different color and thickness
    p.line(df['Training database size'], df[col], legend_label=col, line_width=3, line_color=palette[i])
    data[col] = df[col]

# Create a ColumnDataSource with the data
source = ColumnDataSource(data)

# Define a checkbox group to allow users to toggle the visibility of the data series
checkbox_group = CheckboxGroup(labels=list(data.keys()), active=list(range(len(data))), width=200)

# Define a radio group to allow users to switch between different x-axis values
radio_group = RadioGroup(labels=['Training database size', 'Category'], active=0, width=200)

# Define a callback function to update the data source when the checkbox or radio button is changed
def update():
    selected_cols = [list(data.keys())[i] for i in checkbox_group.active]
    x_axis = radio_group.labels[radio_group.active]
    new_data = {x_axis: df[x_axis]}
    for col in selected_cols:
        new_data[col] = data[col]
    source.data = new_data
# Add the controls to the layout and define a callback for when they are changed
controls = column(checkbox_group, radio_group)
checkbox_group.on_change('active', lambda attr, old, new: update())
radio_group.on_change('active', lambda attr, old, new: update())

# Add the controls and the figure to the layout and display it
layout = column(p, controls, sizing_mode ="stretch_both")
show(layout)