import dash_core_components as dcc

import json

from dash.dependencies import Input, Output, State
import dash_core_components as dcc
import dash_html_components as html

import sd_material_ui as smui

from app import app

from datastore import datastore

ds = datastore()


x_axis_options = []
y_axis_options = []

for index, row in ds.get_valid_axes().iterrows():
    x_axis_options.append(
        {
            'label': row['pretty_name'],
            'value': index,
            'primaryText': row['pretty_name'],
        }
    )
    y_axis_options.append(
        {
            'label': row['pretty_name'],
            'value': index,
            'primaryText': row['pretty_name']
        }
    )

paper_style = {'padding': '10px','margin':'2px','height':'100%'}

axis_selection_paper = smui.Paper(
    [
        html.Div(
            [
                html.Div(
                    [
                        html.Div(
                            [
                                html.Label('X-axis: '),
                                smui.DropDownMenu(
                                    id="x-axis-dropdown",
                                    options=x_axis_options,
                                    value="crossing freq",
                                    selectedMenuItemStyle={'color': '#1975FA'}
                                )
                            ],
                            className='axis-selection-parent'
                        )
                    ]
                ),

                html.Div(
                    [
                        html.Div(
                            [
                                html.Label('Y-axis'),
                                smui.DropDownMenu(
                                    id='y-axis-dropdown',
                                    options=y_axis_options,
                                    value='Lobe L300',
                                    selectedMenuItemStyle={'color': '#1975FA'}
                                    # clearable=False
                                )
                            ],
                            className='axis-selection-parent'
                        )
                    ]
                )
            ]
        )
    ],style=paper_style,
)


filtering_paper = smui.Paper(
    [
        html.Div(
            [
                html.Div(
                    [
                        html.Div(
                            [
                                html.Label('Filters'),

                                # dcc.Checklist(
                                #    id='filters-checklist',
                                #    options=[{'label':'temp','value':'temp'}],#ds.get_filters(),
                                #    values=[]
                                # )
                            ] +
                            [
                                smui.Checkbox(id=i['label'], label=i['label'], checked=False) for i in ds.get_filters()
                            ]
                        )
                    ]
                )
            ],

        )
    ], style=paper_style
)

scaling_coloring_paper = smui.Paper(
    [
        html.Div(
            [
                html.Div(
                    [
                        html.Label('Scale'),
                        smui.DropDownMenu(
                            id='scaling-dropdown',
                            options=ds.get_scaling_vars(),
                            value=None,
                            selectedMenuItemStyle={'color': '#1975FA'}
                        )
                    ],
                    className='axis-selection-parent'
                )
            ]
        ),
        html.Div(
            [
                html.Div(
                    [
                        html.Label('Color by'),
                        smui.DropDownMenu(
                            id='category-color-dropdown',
                            options=ds.get_categorical_vars(),
                            value=None,
                            selectedMenuItemStyle={'color': '#1975FA'}
                        )
                    ],
                    className='axis-selection-parent'
                )
            ]
        )
    ], style=paper_style
)

option_comps=[
    axis_selection_paper,
    filtering_paper,
    scaling_coloring_paper
]