from IPython.html import widgets # Widget definitions
from IPython.display import display # Used to display widgets in the notebook

display(widgets.TextWidget(description="a:"))
display(widgets.TextWidget(description="aa:"))
display(widgets.TextWidget(description="aaa:"))

display(widgets.TextWidget(description="a:"))
display(widgets.TextWidget(description="aa:"))
display(widgets.TextWidget(description="aaa:"))
display(widgets.TextWidget(description="aaaaaaaaaaaaaaaaaa:"))

display(widgets.TextWidget(description="a:"))
display(widgets.TextWidget(description="aa:"))
display(widgets.TextWidget(description="aaa:"))
display(widgets.TextWidget())

child_style = {
    'background': '#77CC77',
    'padding': '25px',
    'margin': '5px',
    'font-size': 'xx-large',
    'color': 'white',
}

def make_container(title):
    header = widgets.LatexWidget(value=title) 
    display(header)
    header.set_css({
        'font-size': '30pt',
        'margin-top': '40pt',
        'margin-bottom': '20pt',
    })
    
    container = widgets.ContainerWidget()
    container.set_css({
        'background': '#999999',
        'width': '100%',
    })
    display(container)
    return container

def fill_container(container):
    components = []
    for i in range(3):
        components.append(widgets.LatexWidget(value="ABC"[i]))
        components[i].set_css(child_style)
    container.children = components
    
container = make_container('VBox')
container.add_class('vbox')
fill_container(container)

container = make_container('HBox')
container.remove_class('vbox')
container.add_class('hbox')
fill_container(container)


container = make_container('HBox Pack Start')
container.remove_class('vbox')
container.add_class('hbox')
container.add_class('start')
fill_container(container)
    
container = make_container('HBox Pack Center')
container.remove_class('vbox')
container.add_class('hbox')
container.add_class('center')
fill_container(container)
    
container = make_container('HBox Pack End')
container.remove_class('vbox')
container.add_class('hbox')
container.add_class('end')
fill_container(container)

def fill_container(container, flexes):
    components = []
    for i in range(len(flexes)):
        components.append(widgets.ContainerWidget())
        components[i].set_css(child_style)
        
        label = widgets.LatexWidget(value=str(flexes[i]))
        components[i].children = [label]
    container.children = components
        
    for i in range(len(flexes)):
        if flexes[i] == 0:
            components[i].add_class('box-flex0')
        elif flexes[i] == 1:
            components[i].add_class('box-flex1')
        elif flexes[i] == 2:
            components[i].add_class('box-flex2')
        
container = make_container('Different Flex Configurations')
container.remove_class('vbox')
container.add_class('hbox')
fill_container(container, [0, 0, 0])
        
container = make_container('')
container.remove_class('vbox')
container.add_class('hbox')
fill_container(container, [0, 0, 1])
        
container = make_container('')
container.remove_class('vbox')
container.add_class('hbox')
fill_container(container, [0, 1, 1])
        
container = make_container('')
container.remove_class('vbox')
container.add_class('hbox')
fill_container(container, [0, 2, 2])
        
container = make_container('')
container.remove_class('vbox')
container.add_class('hbox')
fill_container(container, [0, 1, 2])
        
container = make_container('')
container.remove_class('vbox')
container.add_class('hbox')
fill_container(container, [1, 1, 2])

def fill_container(container):
    components = []
    for i in range(3):
        components.append(widgets.LatexWidget(parent=container, value="ABC"[i]))
        components[i].set_css(child_style)
        components[i].set_css('height', str((i+1) * 50) + 'px')
    container.children = components

container = make_container('HBox Align Start')
container.remove_class('vbox')
container.add_class("hbox")
container.add_class("align-start")
fill_container(container)
    
container = make_container('HBox Align Center')
container.remove_class('vbox')
container.add_class("hbox")
container.add_class("align-center")
fill_container(container)
    
container = make_container('HBox Align End')
container.remove_class('vbox')
container.add_class("hbox")
container.add_class("align-end")
fill_container(container)

container = widgets.ContainerWidget()
container.children=[widgets.FloatSliderWidget(orientation='vertical', description=str(i+1), value=50.0) 
                    for i in range(15)]
display(container)
container.remove_class('vbox')
container.add_class('hbox')