import panel as pn
from sidebar import SideNavBar
import appComponents
import db_operation as db

pn.extension('mathjax')

pn.extension('plotly')

pn.extension('tabulator')

analytic_p = db.get_portfolio_analytic_df()
analytic_b = db.get_benchmark_analytic_df()
if len(analytic_p) == 0:
    app = [
        pn.pane.Str('No portfolio data found, please update portfolio first')]


else:
    # a large number to let flex-basis takes full width
    max_width = 4000
    min_width = 300
    stock_overview = appComponents.BestAndWorstStocks(
        analytic_df=analytic_p,
        max_width=max_width,
        min_width=min_width,)
    composation_card = appComponents.PortfolioComposationCard(
        analytic_p,
        max_width=max_width,
        min_width=min_width,

    )
    monthly_return_card = appComponents.HistReturnCard(
        calculated_p_stock=analytic_p,
        calculated_b_stock=analytic_b,
        max_width=max_width,
        min_width=min_width,
    )
    total_return_card = appComponents.TotalReturnCard(
        name='Range',
        b_stock_df=analytic_b,
        p_stock_df=analytic_p,
        max_width=max_width,
        min_width=min_width,
        value=(0, 20))
    drawdown_card = appComponents.DrawDownCard(
        calculated_p_stock=analytic_p,
        max_width=max_width,
        min_width=min_width,
    )

    top_header = appComponents.TopHeader(
        eval_df=analytic_p,

    )

    # app = [pn.Row(top_header),
    #        pn.Row(
    #     pn.Column(monthly_return_card, stock_overview,
    #               width=500, margin=(10, 10, 10, 10)),
    #     pn.Column(total_return_card, drawdown_card, margin=(10, 10, 10, 10)),
    #     pn.Column(composation_card, margin=(10, 10, 10, 10)),
    # )]
    flex_box_style = {
        'max-width': '100vw',
        'height': '100vh',
        'flex-flow': 'column wrap',
        'justify-content': 'flex-start',
        'align-items': 'flex-start',
        
    }
    flex_box = pn.FlexBox(
        top_header,
        total_return_card,
        composation_card,
        monthly_return_card,
        stock_overview,
        drawdown_card,
        margin=(10, 10, 10, 10),
        justify_content='start',
        align_items='stretch',
    )

template = pn.template.FastListTemplate(
    title="Portfolio一览",
    side_bar_width=200,
    collapsed_sidebar=True,
    # sidebar=[freq, phase],
)
template.sidebar.append(SideNavBar())
# template.main.extend([drawdown_card, stock_overview, composation_card, monthly_return_card, total_return_card])
template.main.append(flex_box)
template.servable()