# Prepare Python environment
import numpy as np
import plotly.express as px
import os
import nibabel as nib
import numpy as np
from plotly.subplots import make_subplots
import plotly.graph_objects as go
import math
from sklearn.linear_model import LinearRegression
from dash import Dash, dcc, html
import pandas as pd
PI_UNICODE = "\U0001D70B"
GYRO_BAR_RATIO_H = 42.6e6  # [Hz/T]
import dash
import dash_bootstrap_components as dbc
from dash import Dash, html, dcc
import plotly.express as px

t = np.linspace(0, 3, 1001)
y_unwrapped = t + t**2 - 3 * t**3 + t**4
y_wrapped = np.mod(y_unwrapped, 2 * math.pi);

y_delta = y_unwrapped.max() - y_unwrapped.min()
min_y = y_unwrapped.min() - 2 * math.pi - y_delta * 0.05
max_y = y_unwrapped.max() + 2 * math.pi + y_delta * 0.05

fig1 = go.Figure()
fig1.add_trace(go.Scatter(x=t, y=y_wrapped,
                          mode='lines',
                          name='Wrapped  '))
fig1.update_layout(title_text="Wrapped", title_x=0.25, showlegend=True,
                   legend={"x": 0.03, "y": 0.95})
fig1.update_yaxes(range=[min_y, max_y], title_text="rad", tickmode = 'array',
                  tickvals = [-2*math.pi, -math.pi, 0, math.pi, 2*math.pi, 3*math.pi, 4*math.pi, 5*math.pi],
                  ticktext = [f'-2{PI_UNICODE}', f'-{PI_UNICODE}', '0', f'{PI_UNICODE}', f'2{PI_UNICODE}', f'3{PI_UNICODE}', f'4{PI_UNICODE}', f'5{PI_UNICODE}'])
fig1.update_xaxes(fixedrange=True)
fig1.update_yaxes(fixedrange=True)

fig2 = go.Figure()
fig2.add_trace(go.Scatter(x=t, y=y_unwrapped,
                          mode='lines',
                          name='Solution 1', showlegend=True))
fig2.add_trace(go.Scatter(x=t, y=y_unwrapped+2*math.pi,
                          mode='lines',
                          name='Solution 2', showlegend=True))
fig2.add_trace(go.Scatter(x=t, y=y_unwrapped-2*math.pi,
                          mode='lines',
                          name='Solution 3', showlegend=True))
fig2.update_layout(title_text="Unwrapped", title_x=0.75,
                   legend={"x": 0.85, "y": 0.95})
fig2.update_yaxes(range=[min_y, max_y], title_text="rad", tickmode = 'array',
                  tickvals = [-2*math.pi, -math.pi, 0, math.pi, 2*math.pi, 3*math.pi, 4*math.pi, 5*math.pi],
                  ticktext = [f'-2{PI_UNICODE}', f'-{PI_UNICODE}', '0', f'{PI_UNICODE}', f'2{PI_UNICODE}', f'3{PI_UNICODE}', f'4{PI_UNICODE}', f'5{PI_UNICODE}'])
fig2.update_xaxes(fixedrange=True)
fig2.update_yaxes(fixedrange=True)
app = Dash(
    __name__,
    external_stylesheets=[dbc.themes.BOOTSTRAP, dbc.icons.FONT_AWESOME],
    external_scripts=[{'src':"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"}]
)

def beforeAfterSlide(fig1, fig2, style=None):
    bfA = []
    if not style:
        style = {'width':'100vw', 'height':'100vh'}
    for key in style:
        if '%' in style[key]:
            if key in ['width', 'left']:
                style[key] = style[key].replace('%','vw')
            if key in ['top', 'height']:
                style[key] = style[key].replace('%','vh')
    bfA.append(html.Div(dcc.Graph(figure=fig2, style=style), className='after'))
    bfA.append(html.Div(className='middle'))
    bfA.append(html.Div(dcc.Graph(figure=fig1, style=style), className='before'))
    return html.Div(bfA, className='beforeAfter', style=style)

app.layout = html.Div(beforeAfterSlide(fig1, fig2, {'height':'75%', 'width':'75%', 'top':'10%', 'left':'6%'}))

if __name__ == "__main__":
    app.run_server(debug=True)