import dash
from dash import dcc
from dash import html

from dash.dependencies import Input, Output, State
import dash_bootstrap_components as dbc


from app import app
from components.tabs import interactive_plots
from components.tabs import data_table
#from components.tabs import summary
from dash import dash_table
import sd_material_ui as smui
from datastore import datastore

from components.main_page import header



app.layout = dbc.Container(
    [
        dbc.Row(
        [
            header.title_bar
        ]
    ),
    dbc.Row(#tabs
        dbc.Col(
            
                html.Div(
                dcc.Tabs(id="tabs-main", value='tab-data', children=[
                    dcc.Tab(label="Data", value="tab-data"),
                            dcc.Tab(label="Interactive Plots",
                                    value="tab-plots"),
                            #dcc.Tab(label='Summary',value='tab-summary')
                        ])
            ),className='blockquote'
            )
    ),
    dbc.Row(
        dbc.Col(
            html.Div(id='tabs-content'),className='blockquote'
        )
    )
    ],
    fluid=True
)

# app.layout = html.Div(
#     [
#         html.Div(dash_table.DataTable(data=[{}]), style={'display': 'none'}),
#         smui.Paper(
#             [
#                 html.Div(
#                     [
#                         html.H5('Offsets in XJETS: The Status Quo')
#                     ],
#                     className='twelwe columns center'
#                 )
#             ],
#             style={
#                 'float':'left',
#                 'width':'100%'
#             }
#         ),
#         html.Div(
#             [
#                 html.Div(
#                     [
#                         dcc.Tabs(id="tabs-main", value='tab-plots', children=[
#                             dcc.Tab(label="Interactive Plots",
#                                     value="tab-plots"),
#                             dcc.Tab(label="Data", value="tab-data"),
#                             dcc.Tab(label='Summary',value='tab-summary')
#                         ])
#                     ],
#                     className='max-width twelwe columns',
#                     style={
#                         'float': 'left',
#                         'box-shadow': 'rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px',
#                         'clear':'both'
#                     }

#                 )
#             ],style={'clear':'both'}
#         ),
#         html.Div(id='tabs-content',
#                  style={'position': 'initial', 'padding-top': '2px','clear':'both'}),


#     ]
# )


@app.callback(
    Output('tabs-content', 'children'),
    [Input('tabs-main', 'value')],
    [State('tabs-main', 'value')]
)
def render_tabs(tab, cur_tab):
    if tab == 'tab-plots':
        return interactive_plots.layout
    elif tab == 'tab-data':
        return data_table.layout
    elif tab == 'tab-summary':
        return summary.layout
    else:
        print('wth!')

app.title='Atlas-X'
if __name__ == '__main__':
    app.run_server(debug='False',host="localhost",port=8051)