import dash_bootstrap_components as dbc

from dash import Dash, dcc, html
from dash_ag_grid import AgGrid
from dash_bootstrap_templates import load_figure_template
from datetime import date, datetime, timedelta
from dotenv import load_dotenv
from pandas import DataFrame

from ohlc import ohlc
from plotting import CandlestickChart, figure_with_subplots

load_dotenv()

load_figure_template('lux_dark')

dbc_css = "https://cdn.jsdelivr.net/gh/AnnMarieW/dash-bootstrap-templates/dbc.min.css"
app = Dash(__name__, external_stylesheets = [dbc.themes.LUX, dbc_css])
app.title = 'Swing Trading Dashboard'

today = date.today()

signal_data = [
    {'Strategy': '2-Period RSI', '10/14': 'N', '10/15': 'N', '10/16': 'N', '10/17': 'N', '10/18': 'L', '10/19': 'N', '10/20': 'L', '10/21': 'N', '10/22': 'N', '10/23': 'N'},
    {'Strategy': 'Cumulative RSI', '10/14': 'N', '10/15': 'N', '10/16': 'N', '10/17': 'N', '10/18': 'L', '10/19': 'N', '10/20': 'L', '10/21': 'N', '10/22': 'N', '10/23': 'N'},
    {'Strategy': 'Internal Bar Strength', '10/14': 'N', '10/15': 'N', '10/16': 'N', '10/17': 'N', '10/18': 'L', '10/19': 'N', '10/20': 'L', '10/21': 'N', '10/22': 'N', '10/23': 'N'},
    {'Strategy': 'End of Month', '10/14': 'N', '10/15': 'N', '10/16': 'N', '10/17': 'N', '10/18': 'L', '10/19': 'N', '10/20': 'L', '10/21': 'N', '10/22': 'N', '10/23': 'N'}
]
data = DataFrame(signal_data)

def load_chart():
    symbol = 'SPY'
    today = datetime.today()

    data = ohlc(symbol = symbol, start_date = today - timedelta(days = 180), end_date = today)

    candlestick_chart = CandlestickChart(
        x = data['Date'],
        opens = data['Open'],
        highs = data['High'],
        lows = data['Low'],
        closes = data['Close']
    )

    return figure_with_subplots([[candlestick_chart]])

app.layout = dbc.Container(
    [
        dcc.Graph(
            id = 'candlestick-chart',
            config = {'displayModeBar': False},
            figure = load_chart(),
        ),
        html.Div(
            AgGrid(
                columnDefs = [
                    {'field': col, 'flex': 2} if col == 'Strategy' else {'field': col, 'flex': 1, 'cellRenderer': 'SignalRenderer'}
                    for col in data.columns
                ],
                rowData = data.to_dict(orient = 'records'),
                defaultColDef = {'flex': 1, 'sortable': False, 'resizable': False},
                dashGridOptions = {'domLayout': 'autoHeight'},
                style = {'height': None}
            ),
            className = 'dbc dbc-ag-grid'
        )
    ],
    style = {
        'maxWidth': '1200px',
        'margin': '0 auto', # For centering the page content.
    },
    fluid = True
)

if __name__ == '__main__':
    app.run_server(debug = False)