# Import panel and vega datasets

import panel as pn
import vega_datasets

import pandas as pd
import altair as alt
# import numpy as np
# import pprint
import datetime as dt
from vega_datasets import data
# import matplotlib.pyplot as plt


df2=pd.read_csv("https://raw.githubusercontent.com/dallascard/SI649_public/main/altair_hw3/approval_topline.csv")

df2['timestamp']=pd.to_datetime(df2['timestamp'])
df2=pd.melt(df2, id_vars=['president', 'subgroup', 'timestamp'], value_vars=['approve','disapprove']).rename(columns={'variable':'choice', 'value':'rate'})


# Enable Panel extensions
# pn.extension()
# pn.extension('vega', 'tabulator')
pn.extension(design='bootstrap')
pn.extension('vega')

template = pn.template.BootstrapTemplate(
    title='SI649 Altair3',
)

# Define a function to create and return a plot
def create_plot(subgroup, date_range, moving_av_window):

    # Apply any required transformations to the data in pandas)
    df2_approve = df2[df2['choice'] == 'approve']
    filtered_df = df2_approve[df2_approve['subgroup'] == subgroup]
    filtered_df = filtered_df[(filtered_df['timestamp'].dt.date >= date_range[0]) & (filtered_df['timestamp'].dt.date <= date_range[1])]
    filtered_df['mov_avg'] = filtered_df['rate'].rolling(window=moving_av_window).mean().shift(-moving_av_window//2)

    # Line chart
    line_chart = alt.Chart(filtered_df).mark_line(color='red', size=2).encode(
        x='timestamp:T',
        y='mov_avg:Q'
    )

    # Scatter plot with individual polls
    scatter_plot = alt.Chart(filtered_df).mark_point(color='grey', size=2, opacity=0.7).encode(
        x='timestamp:T',
        y='rate:Q'
    )

    # Put them togetehr
    plot = scatter_plot + line_chart
    
    # Return the combined chart
    return plot
    

# # Create the selection widget
select = pn.widgets.Select(name='Select', options=['All polls', 'Adults', 'Voters'])


# # Create the slider for the date range
date_range_slider = pn.widgets.DateRangeSlider(
    name='Date Range Slider',
    start=df2['timestamp'].dt.date.min(), end=df2['timestamp'].dt.date.max(),
    value=(df2['timestamp'].dt.date.min(), df2['timestamp'].dt.date.max()),
    step=1
)


# # Create the slider for the moving average window
moving_av_slider = pn.widgets.IntSlider(name='Moving Average Window', start=1, end=100, value=1)


# Bind the widgets to the create_plot function
final = pn.Row(pn.bind(create_plot, 
                       subgroup=select, 
                       date_range=date_range_slider, 
                       moving_av_window=moving_av_slider))


# # Combine everything in a Panel Column to create an app
maincol=pn.Column()
maincol.append(final)
maincol.append(select)
maincol.append(date_range_slider)
maincol.append(moving_av_slider)
template.main.append(maincol)

# # set the app to be servable
template.servable(title='SI649 Altair3')