from IPython.display import HTML, Javascript
from ipywidgets import interact
import ipywidgets as widgets

"""
Explanation: About Us
We sell drums
You can choose the

Size of drums
Color of drums
End of explanation
"""


%%writefile drumshop_forms.py

from IPython.display import HTML, Javascript
from ipywidgets import interact
import ipywidgets as widgets

"""
Forms related to the Drum Shop
"""


"""
Explanation: Forms
The forms in the Drum Shop app
Form: Choose Drum
Let's the user choose the drum (from the provided options)
End of explanation
"""


%%writefile drumshop_forms.py -a

drumSizeTags = ('small', 'medium', 'large')
drumSizeValues = ('20', '40', '60')

drumSizes = dict(zip(drumSizeTags, range(len(drumSizeTags))))
drumColors = ['red', 'green', 'blue', 'yellow', 'grey']



"""
Explanation: Simple database for the drum shop. 
TODO
Replace this by a sqlite database in the next iteration.
End of explanation
"""


%%writefile drumshop_forms.py -a


def chooseDrum(size, color):
    """
    Displays the Drum after applying the user chosen settings
    """
    
    sizeTag = drumSizeTags[size]
    sizeValue = drumSizeValues[size]
    
    html = HTML(f"""
    <p>You choose a "{sizeTag}" size drum of height "{sizeValue}" and color "{color}"</p>
    <hr/>
    <div style="color:#0000FF; 
                background-color:{color}; 
                height:{sizeValue}px; 
                width: 50px;"
    >
    <p>{sizeValue}</p>
    </div>
    """)
    return html



"""
Explanation: The callback that gets processed after the user choses the options for the drums.
End of explanation
"""


!gvim drumshop_forms.py

"""
Explanation: Now that we have selected the code cells and executed them, we have a Python file. 
You can open it in your favorite text editor and have a look at the code.
End of explanation
"""


%run drumshop_forms.py

"""
Explanation: You can can run it using the %run line magic command.
All the symbols in the file will be made available in the interpreter now!
End of explanation
"""


chooseDrum?

drumSizes

"""
Explanation: You can quickly check the symbols and acertain that they are from the file that was run above.
Just select the two code cells below and execute them.
End of explanation
"""


interact(chooseDrum, size=drumSizes, color=drumColors)

"""
Explanation: We can now display an user interface for the Drum Options.
End of explanation
"""


sizeSlider = widgets.SelectionSlider(options=drumSizes)
colorSlider = widgets.SelectionSlider(options=drumColors)

interact(chooseDrum, size=sizeSlider, color=colorSlider)

"""
Explanation: Following is an alternate user interface for the form.
End of explanation
"""


