from dash import html
import dash_bootstrap_components as dbc

def view():
    tags = [
        {
            'name': 'viewport',
            'content': 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no'
        },
        {
            'name': 'google',
            'content': 'notranslate'
        }
    ]
    return tags
    
def ss():
    return [dbc.themes.SANDSTONE]

def sidebar():
    sidebar = html.Div([
        dbc.Button(
            'Q',
            id='sidebar-quickstart',
            className='mx-0 my-1 btn btn-sm btn-outline-light',
            style={'width': '2rem', 'backgroundColor': '#891033'}
        ),
        dbc.Button(
            'S',
            id='sidebar-suneung',
            className='mx-0 my-1 btn btn-sm btn-outline-light',
            style={'width': '2rem', 'backgroundColor': '#80702A'}
        ),
        dbc.Button(
            'E',
            id='sidebar-exercise',
            className='mx-0 my-1 btn btn-sm btn-outline-light',
            style={'width': '2rem', 'backgroundColor': '#338323'}
        ),
        dbc.Button(
            'W',
            id='sidebar-tutor',
            className='mx-0 my-1 btn btn-sm btn-outline-light',
            style={'width': '2rem', 'backgroundColor': '#286580'}
        )],
        style={
            'position': 'fixed',
            'top': '0',
            'left': '0',
            'width': '3rem',
            'height': '100%',
            'backgroundColor': '#191C1FD7',
            'zIndex': 1000,
            'display': 'flex',
            'flexDirection': 'column',
            'alignItems': 'center',
            'justifyContent': 'start',
            'paddingTop': '90px',
        },
    )
    return sidebar

def header(is_admin=False):
    nav_items = [
        dbc.NavItem(
            dbc.NavLink('도움말', href='/help', external_link=True),
        )
    ]
    if is_admin:
        nav_items.insert(
            1,
            dbc.NavItem(
                dbc.NavLink('Admin', href='/admin', external_link=True),
            ),
        )
    navbar = dbc.NavbarSimple(
        nav_items,
        brand='KNS',
        brand_href='/',
        fluid=False,
        brand_external_link=True,
        links_left=True,
        color='#191C1FBA',
        dark=True,
        className='navbar-expand mr-auto',
    )
    header = html.Div(
        dbc.Container(navbar, fluid=True, style={'margin': 0, 'padding': 0}),
        id='header',
        style={
            'position': 'fixed',
            'top': 0,
            'left': '3rem',
            'width': 'calc(100% - 3rem)',
            'zIndex': 1000,
        }
    )
    return header

def body():
    body = html.Div([
        dbc.Container(
            id='page-content',
            fluid=False,
            style={'paddingTop': '70px', 'paddingBottom': '50px'}
        )
    ], style={'width': '100%'})
    return body

def footer():
    footer = html.Div([
        dbc.Container(
            'Copyright © 2024 — Lumineum All Rights Reserved',
            fluid=True,
            className='d-flex justify-content-center py-1'
        )
    ], id='footer', style={
        'color': 'gray',
        'backgroundColor': '#191C1FBA',
        'width': '100%',
        'position': 'fixed',
        'bottom': 0,
        'left': '0',
        'zIndex': 1000
    })
    return footer

def jumbotron(title, explanation, content, button):
    jumbotron = html.Div(
        dbc.Container([
            html.H4(title, className='display-3'),
            html.P(
                explanation,
                className='lead',
            ),
            html.Hr(className='my-2'),
            html.P(content, className='serif'),
            html.P(
                dbc.Button(button, color='primary'), className='lead'
            )],
            fluid=True,
            className='py-3'
        ), className='p-3 bg-dark rounded-3'
    )
    return jumbotron