from operator import attrgetter

import dash
from dash.dependencies import Input, Output
import dash_html_components as html

import dash_devextreme as ddx


external_stylesheets=[
    'https://cdn3.devexpress.com/jslib/18.2.3/css/dx.common.css',
    'https://cdn3.devexpress.com/jslib/18.2.3/css/dx.light.css'
]

dataSource = [
    {'id': 1, 'language': 'English', 'percent': 55.5},
    {'id': 2, 'language': 'Chinese', 'percent': 4.0},
    {'id': 3, 'language': 'Spanish', 'percent': 4.3},
    {'id': 4, 'language': 'Japanese', 'percent': 4.9},
    {'id': 5, 'language': 'Portuguese', 'percent': 2.3},
    {'id': 6, 'language': 'German', 'percent': 5.6},
    {'id': 7, 'language': 'French', 'percent': 3.8},
    {'id': 8, 'language': 'Russian', 'percent': 6.3},
    {'id': 9, 'language': 'Italian', 'percent': 1.6},
    {'id': 10, 'language': 'Polish', 'percent': 1.8}
]

simpleProducts = [
    "HD Video Player",
    "SuperHD Video Player",
    "SuperPlasma 50",
    "SuperLED 50",
    "SuperLED 42",
    "SuperLCD 55",
    "SuperLCD 42",
    "SuperPlasma 65",
    "SuperLCD 70",
    "Projector Plus",
    "Projector PlusHT",
    "ExcelRemote IR",
    "ExcelRemote BT",
    "ExcelRemote IP"
]

products = [{
    "ID": 1,
    "Name": "HD Video Player",
    "Price": 330,
    "Current_Inventory": 225,
    "Backorder": 0,
    "Manufacturing": 10,
    "Category": "Video Players",
    "ImageSrc": "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/1-small.png"
}, {
    "ID": 2,
    "Name": "SuperHD Player",
    "Price": 400,
    "Current_Inventory": 150,
    "Backorder": 0,
    "Manufacturing": 25,
    "Category": "Video Players",
    "ImageSrc": "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/2-small.png"
}, {
    "ID": 3,
    "Name": "SuperPlasma 50",
    "Price": 2400,
    "Current_Inventory": 0,
    "Backorder": 0,
    "Manufacturing": 0,
    "Category": "Televisions",
    "ImageSrc": "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/3-small.png"
}, {
    "ID": 4,
    "Name": "SuperLED 50",
    "Price": 1600,
    "Current_Inventory": 77,
    "Backorder": 0,
    "Manufacturing": 55,
    "Category": "Televisions",
    "ImageSrc": "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/4-small.png"
}, {
    "ID": 5,
    "Name": "SuperLED 42",
    "Price": 1450,
    "Current_Inventory": 445,
    "Backorder": 0,
    "Manufacturing": 0,
    "Category": "Televisions",
    "ImageSrc": "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/5-small.png"
}, {
    "ID": 6,
    "Name": "SuperLCD 55",
    "Price": 1350,
    "Current_Inventory": 345,
    "Backorder": 0,
    "Manufacturing": 5,
    "Category": "Televisions",
    "ImageSrc": "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/6-small.png"
}, {
    "ID": 7,
    "Name": "SuperLCD 42",
    "Price": 1200,
    "Current_Inventory": 210,
    "Backorder": 0,
    "Manufacturing": 20,
    "Category": "Televisions",
    "ImageSrc": "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/7-small.png"
}, {
    "ID": 8,
    "Name": "SuperPlasma 65",
    "Price": 3500,
    "Current_Inventory": 0,
    "Backorder": 0,
    "Manufacturing": 0,
    "Category": "Televisions",
    "ImageSrc": "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/8-small.png"
}, {
    "ID": 9,
    "Name": "SuperLCD 70",
    "Price": 4000,
    "Current_Inventory": 95,
    "Backorder": 0,
    "Manufacturing": 5,
    "Category": "Televisions",
    "ImageSrc": "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/9-small.png"
}, {
    "ID": 10,
    "Name": "DesktopLED 21",
    "Price": 175,
    "Current_Inventory": 0,
    "Backorder": 425,
    "Manufacturing": 75,
    "Category": "Monitors",
    "ImageSrc": "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/10-small.png"
}, {
    "ID": 11,
    "Name": "DesktopLED 19",
    "Price": 165,
    "Current_Inventory": 425,
    "Backorder": 0,
    "Manufacturing": 110,
    "Category": "Monitors",
    "ImageSrc": "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/11-small.png"
}, {
    "ID": 12,
    "Name": "DesktopLCD 21",
    "Price": 170,
    "Current_Inventory": 210,
    "Backorder": 0,
    "Manufacturing": 60,
    "Category": "Monitors",
    "ImageSrc": "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/12-small.png"
}, {
    "ID": 13,
    "Name": "DesktopLCD 19",
    "Price": 160,
    "Current_Inventory": 150,
    "Backorder": 0,
    "Manufacturing": 210,
    "Category": "Monitors",
    "ImageSrc": "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/13-small.png"
}, {
    "ID": 14,
    "Name": "Projector Plus",
    "Price": 550,
    "Current_Inventory": 0,
    "Backorder": 55,
    "Manufacturing": 10,
    "Category": "Projectors",
    "ImageSrc": "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/14-small.png"
}, {
    "ID": 15,
    "Name": "Projector PlusHD",
    "Price": 750,
    "Current_Inventory": 110,
    "Backorder": 0,
    "Manufacturing": 90,
    "Category": "Projectors",
    "ImageSrc": "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/15-small.png"
}, {
    "ID": 16,
    "Name": "Projector PlusHT",
    "Price": 1050,
    "Current_Inventory": 0,
    "Backorder": 75,
    "Manufacturing": 57,
    "Category": "Projectors",
    "ImageSrc": "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/16-small.png"
}, {
    "ID": 17,
    "Name": "ExcelRemote IR",
    "Price": 150,
    "Current_Inventory": 650,
    "Backorder": 0,
    "Manufacturing": 190,
    "Category": "Automation",
    "ImageSrc": "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/17-small.png"
}, {
    "ID": 18,
    "Name": "ExcelRemote BT",
    "Price": 180,
    "Current_Inventory": 310,
    "Backorder": 0,
    "Manufacturing": 0,
    "Category": "Automation",
    "ImageSrc": "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/18-small.png"
}, {
    "ID": 19,
    "Name": "ExcelRemote IP",
    "Price": 200,
    "Current_Inventory": 0,
    "Backorder": 325,
    "Manufacturing": 225,
    "Category": "Automation",
    "ImageSrc": "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/19-small.png"
}]

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.scripts.config.serve_locally = True
app.css.config.serve_locally = True

app.layout = html.Div([
    ddx.TextBox(
        id='input',
        value='my-value',
        valueChangeEvent='input',
        stylingMode='underlined'
    ),
    html.Div(id='output'),

    ddx.SelectBox(dxItems=simpleProducts),
    ddx.SelectBox(dxItems=simpleProducts, placeholder='Choose Product', showClearButton=True),
    ddx.SelectBox(dxItems=simpleProducts, value=simpleProducts[0], readOnly=True),
    ddx.SelectBox(dxItems=simpleProducts, value=simpleProducts[0], disabled=True),
    ddx.SelectBox(dataSource={'store': products, 'key': 'ID'}, displayExpr="Name", valueExpr="ID", value=products[0]['ID']),


    ddx.PieChart(
        type='doughnut',
        palette='Soft Pastel',
        title='Top Internet Languages',
        dataSource=dataSource,
        legend=dict(horizontalAlignment='center', verticalAlignment='bottom'),
        # export=dict(enabled=True),
        series=dict(
            smallValuesGrouping=dict(mode='topN', topCount=3),
            argumentField='language',
            valueField='percent',
            label=dict(
                visible=True,
                customizeText='valueText',
                format='fixedPoint',
                connector=dict(visible=True, width=1)
            )
        )
    ),
    html.Div(['Checked', ddx.CheckBox(id='CheckedOn', value=True)]),
    html.Div(['Unchecked', ddx.CheckBox(id='CheckedOff', value=False)]),
    # html.Div(['Indeterminate', ddx.CheckBox(value=None)]),
    html.Div(['Disabled', ddx.CheckBox(value=True, disabled=True)]),
    html.Div(ddx.CheckBox(text='Check', value=True, width=80)),
    html.Div(['Switched on', ddx.Switch(id='SwitchedOn', value=False)]),
    html.Div(['Switched off', ddx.Switch(value=False)]),
    # html.Div(['Value change handling', ddx.Switch(id='handlerSwitch', value=False)]),
    html.Div(['Disabled', ddx.Switch(id='disabledSwitch', value=False, disabled=True)]),
    html.Div([
        html.Img(id='product1', src='https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/17.png', width=100),
        ddx.Tooltip(target='product1', children=[html.Div('ExcelRemote IR')], showEvent='dxhoverstart', hideEvent='dxhoverend')
    ]),
    html.Div([
        html.Img(id='product2', src='https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/3.png', width=100),
        ddx.Tooltip(target='product2', position='right', showEvent='dxhoverstart', hideEvent='dxhoverend', children=[
            html.Img(width=150, src='https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/products/3.png'),
            html.Br(),
            html.B('SuperPlasma 50'),
            html.Br(),
            '2400$'
        ])
    ]),

    html.Div([
        html.P([
            html.Span(children=['Rollout of New Website and Marketing Brochures (', html.A(id='link2', children='details', style={'border-bottom': '1px dashed', 'cursor': 'pointer'}), ')']),
        ]),
        ddx.Popover(target='link2', position='top', width=300, showTitle=True, title='Details:',
                    showEvent='dxhoverstart', hideEvent='dxhoverend',
                    children=['''The designs for new brochures and
                              website have been approved.
                              Launch date is set for Feb 28.'''])
    ]),
])


@app.callback(Output('output', 'children'), [Input('input', 'value')])
def display_output(value):
    return 'You have entered {}'.format(value)


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