#HIDDEN
%matplotlib inline
import ipywidgets as widgets
from IPython.display import display, IFrame

out = widgets.Output()
CURRENT_CRYSTAL = None
CURRENT_PLANE = None
out.layout = widgets.Layout(overflow_y='hidden')
def update_fig():
    out.clear_output()
    if CURRENT_CRYSTAL == 'SC':
        render_SC()
    elif CURRENT_CRYSTAL == 'BCC':
        render_BCC()
    elif CURRENT_CRYSTAL == 'FCC':
        render_FCC()
width_px = 300
height_px = 230
@out.capture()
def render_SC():
    global CURRENT_CRYSTAL
    CURRENT_CRYSTAL = 'SC'
    SC_button.button_style = 'primary'
    BCC_button.button_style = ''
    FCC_button.button_style = ''
    if Plane_Selector.value == 'Nenhum':
        display(IFrame(src='./crystals/SC.html',width=width_px, height=height_px))
    elif Plane_Selector.value == '(100)':
        display(IFrame(src='./crystals/SC_100.html',width=width_px, height=height_px))
    elif Plane_Selector.value == '(110)':
        display(IFrame(src='./crystals/SC_110.html',width=width_px, height=height_px))
    elif Plane_Selector.value == '(111)':
        display(IFrame(src='./crystals/SC_111.html',width=width_px, height=height_px))
def on_SC_button_clicked(b):
    out.clear_output()
    render_SC()

@out.capture()
def render_BCC():
    global CURRENT_CRYSTAL
    CURRENT_CRYSTAL = 'BCC'
    SC_button.button_style = ''
    BCC_button.button_style = 'primary'
    FCC_button.button_style = ''
    if Plane_Selector.value == 'Nenhum':
        display(IFrame(src='./crystals/BCC.html',width=width_px, height=height_px))
    elif Plane_Selector.value == '(100)':
        display(IFrame(src='./crystals/BCC_100.html',width=width_px, height=height_px))
    elif Plane_Selector.value == '(110)':
        display(IFrame(src='./crystals/BCC_110.html',width=width_px, height=height_px))
    elif Plane_Selector.value == '(111)':
        display(IFrame(src='./crystals/BCC_111.html',width=width_px, height=height_px))
def on_BCC_button_clicked(b):
    out.clear_output()
    render_BCC()


@out.capture()
def render_FCC():
    global CURRENT_CRYSTAL
    CURRENT_CRYSTAL = 'FCC'
    SC_button.button_style = ''
    BCC_button.button_style = ''
    FCC_button.button_style = 'primary'
    if Plane_Selector.value == 'Nenhum':
        display(IFrame(src='./crystals/FCC.html',width=width_px, height=height_px))
    elif Plane_Selector.value == '(100)':
        display(IFrame(src='./crystals/FCC_100.html',width=width_px, height=height_px))
    elif Plane_Selector.value == '(110)':
        display(IFrame(src='./crystals/FCC_110.html',width=width_px, height=height_px))
    elif Plane_Selector.value == '(111)':
        display(IFrame(src='./crystals/FCC_111.html',width=width_px, height=height_px))
def on_FCC_button_clicked(b):
    out.clear_output()
    render_FCC()


FCC_button = widgets.Button(description="Mostrar CFC")
FCC_button.on_click(on_FCC_button_clicked)
BCC_button = widgets.Button(description="Mostrar CCC")
BCC_button.on_click(on_BCC_button_clicked)
SC_button = widgets.Button(description="Mostrar CS")
SC_button.on_click(on_SC_button_clicked)

Plane_Selector = widgets.Dropdown(options=['Nenhum', '(100)', '(110)', '(111)'])
Plane_Selector.layout = widgets.Layout(width='150px')
Plane_Selector.on_trait_change(update_fig)

Plane_Selector_label = widgets.HTML('<center>Plano Cristalino:</center>')
Plane_Selector_label.layout = widgets.Layout(width='150px')

Plane_Selector_box = widgets.VBox([Plane_Selector_label, Plane_Selector])

Crystal_label = widgets.HTML('<center>Estrutura Cristalina:</center>')
Crystal_label.layout = widgets.Layout(width='150px')
buttons = widgets.VBox([Crystal_label, FCC_button, BCC_button, SC_button, Plane_Selector_box])

app = widgets.HBox([buttons, out])
app.layout = widgets.Layout()
app.layout = widgets.Layout(display='flex',
                                flex_flow='row wrap',
                                align_items='center',
                                align_content='center',
                                justify_content='center')
app