{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Which multiplication table do you want to learn?\n",
    "\n",
    "In this example notebook we demonstrate how Voilà can render different Jupyter widgets using [GridspecLayout](https://ipywidgets.readthedocs.io/en/latest/examples/Layout%20Templates.html#Grid-layout)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "scrolled": false
   },
   "outputs": [],
   "source": [
    "from ipywidgets import GridspecLayout, Button, BoundedIntText, Valid, Layout, Dropdown\n",
    "\n",
    "def create_expanded_button(description, button_style):\n",
    "    return Button(description=description, button_style=button_style, layout=Layout(height='auto', width='auto'))\n",
    " \n",
    "rows = 11\n",
    "columns = 6\n",
    "\n",
    "gs = GridspecLayout(rows, columns)\n",
    "\n",
    "def on_result_change(change):\n",
    "    row = int(change[\"owner\"].layout.grid_row)\n",
    "    gs[row, 5].value = gs[0, 0].value * row == change[\"new\"]\n",
    "    \n",
    "def on_multipler_change(change):\n",
    "    for i in range(1, rows):\n",
    "        gs[i, 0].description = str(change[\"new\"])\n",
    "        gs[i, 4].max = change[\"new\"] * 10\n",
    "        gs[i, 4].value = 1\n",
    "        gs[i, 4].step = change[\"new\"]\n",
    "        gs[i, 5].value = False\n",
    "\n",
    "gs[0, 0] = Dropdown(\n",
    "    options=[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],\n",
    "    value=2,\n",
    ")\n",
    "gs[0, 0].observe(on_multipler_change, names=\"value\")\n",
    "multiplier = gs[0, 0].value\n",
    "\n",
    "for i in range(1, rows):\n",
    "    gs[i, 0] = create_expanded_button(str(multiplier), \"\")\n",
    "    gs[i, 1] = create_expanded_button(\"*\", \"\")\n",
    "    gs[i, 2] = create_expanded_button(str(i), \"info\")\n",
    "    gs[i, 3] = create_expanded_button(\"=\", \"\")\n",
    "\n",
    "    gs[i, 4] = BoundedIntText(\n",
    "        min=0,\n",
    "        max=multiplier * 10,\n",
    "        layout=Layout(grid_row=str(i)),\n",
    "        value=1,\n",
    "        step=multiplier,\n",
    "        disabled=False\n",
    "    )\n",
    "\n",
    "    gs[i, 5] = Valid(\n",
    "        value=False,\n",
    "        description='Valid!',\n",
    "    )\n",
    "\n",
    "    gs[i, 4].observe(on_result_change, names='value')\n",
    "\n",
    "gs"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.7.3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}