from dash import html, dcc, Input, Output
import dash_bootstrap_components as dbc
from views.home import home_page
from views.dash_base import dash_base_html
from views.dash_bootstrap_layout import dash_bootstrap_layout_html
from views.dash_bootstrap_basic import dash_bootstrap_basic_html
from views.checklist import checklist
from server import app

# 左侧侧边栏
left_sidebar = html.Div(
    [
        html.H2(children='Dash基础', className='display-5'),
        html.Hr(),
        dbc.Nav(
            children=[
                dbc.NavLink('Dash介绍', href='/', active="exact"),
                dbc.NavLink('Dash基本概念', href='/dash_base', active="exact"),
                dbc.NavLink('dash_bootstrap布局', href='/dash_bootstrap_layout', active="exact"),
                dbc.NavLink('dash_bootstrap控件', href='/dash_bootstrap_basic', active="exact"),
                dbc.NavLink('cards示例', href='/cards', active="exact"),
                dbc.NavLink('checklist示例', href='/checklist', active="exact"),
            ],
            vertical=True,
            pills=True
        ),
    ],
    style={"background-color": "rgb(245,245,245)"},
)

# 右侧页面区域
right_content = html.Div(
    [
        html.Br(),
        html.Div(id='right-page-content'),
    ]
)

# 整体布局
app.layout = html.Div(
    [
        dcc.Location(id='url'),
        dbc.Container(
            [
                dbc.Row(
                    [
                        dbc.Col(left_sidebar, width=2),
                        dbc.Col(right_content, width=10),
                    ]
                ),
            ],
            fluid=True,
        ),
    ]
)

@app.callback(Output('right-page-content', 'children'), [Input('url', 'pathname')])
def render_page_content(pathname):
    if pathname == '/':
        return home_page
    elif pathname == '/dash_base':
        return dash_base_html
    elif pathname == '/dash_bootstrap_layout':
        return dash_bootstrap_layout_html
    elif pathname == '/dash_bootstrap_basic':
        return dash_bootstrap_basic_html
    elif pathname == '/checklist':
        return checklist
    
    return html.Div(
        children=[
            html.H1("404: Not found", className="text-danger"),
            html.Hr(),
            html.P(f"The pathname {pathname} was not recognised..."),
        ],
        className='p-3 bg-light rounded-3'
    )

if __name__ == '__main__':
    app.run_server(port=8050, debug=True)