{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "a5b5692e-c760-4019-a6c7-80b555e94963",
   "metadata": {},
   "outputs": [],
   "source": [
    "import panel as pn\n",
    "from panel_material_ui import Button, Column, Dialog\n",
    "\n",
    "pn.extension()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "986d6f98-044d-4031-9e7e-3073cd218250",
   "metadata": {},
   "source": [
    "The `Dialog` component creates modal dialogs for important content or actions.\n",
    "\n",
    "#### Parameters\n",
    "\n",
    "For more details on customization, see the [customization guides](https://panel-material-ui.holoviz.org/customization/index.html).\n",
    "\n",
    "##### Core\n",
    "\n",
    "* **`close_on_click`** (`boolean`): Whether a click outside the Dialog area should close it.\n",
    "* **`full_screen`** (`boolean`): Whether the dialog takes up the full screen.\n",
    "* **`open`** (`boolean`): Whether the dialog is visible.\n",
    "* **`title`** (`str`): Header text for the dialog.\n",
    "\n",
    "##### Display\n",
    "\n",
    "* **`scroll`** (`Literal[\"body\", \"paper\"]`): Whether the dialog should scroll the content or the paper.\n",
    "* **`show_close_button`** (`boolean`): Whether the dialog shows a close button.\n",
    "* **`title_variant`** (`str`): The text variant of the dialog title (default=\"h3\").\n",
    "* **`width_option`** (`Literal[\"xs\", \"sm\", \"md\", \"lg\", \"xl\", False]`): Maximum width breakpoint for the container.\n",
    "\n",
    "##### Styling\n",
    "\n",
    "- **`sx`** (dict): Component-level styling options.\n",
    "- **`theme_config`** (dict): Theming options.\n",
    "\n",
    "---"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "f251256c-d718-44f3-8ea2-cc8c6710c8e1",
   "metadata": {},
   "source": [
    "### Basic Usage\n",
    "\n",
    "The `Dialog` can be programmatically opened and closed by setting the `open` parameter:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "c2ac2780-ed7a-4315-b85e-4183d6a38ec2",
   "metadata": {},
   "outputs": [],
   "source": [
    "open = Button(label='Open')\n",
    "close = Button(label='Close')\n",
    "\n",
    "dialog = Dialog('# This is a dialog', close)\n",
    "\n",
    "open.js_on_click(args={'dialog': dialog}, code=\"dialog.data.open = true\")\n",
    "close.js_on_click(args={'dialog': dialog}, code=\"dialog.data.open = false\")\n",
    "\n",
    "Column(open, dialog).preview()"
   ]
  },
  {
   "cell_type": "markdown",
   "execution_count": null,
   "id": "63df0825-2788-49ef-9de8-d98366fd952a",
   "metadata": {},
   "outputs": [],
   "source": [
    "Here we set up a `jslink` to toggle `open` but you can toggle it programmatically:\n",
    "\n",
    "```python\n",
    "dialog.open = True\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "45902d2f-bc7e-4881-87a2-46f20a121e0f",
   "metadata": {},
   "source": [
    "### Close Behavior\n",
    "\n",
    "The Dialog can be toggled open and closed with the `open` parameter, additionally you can enable `close_on_click` and `show_close_button` options. The former automatically closes the modal when clicking outside it's area, while the latter will display a close button in the top-right:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "dfa5511c-c808-4a27-b1ff-7005b2a08972",
   "metadata": {},
   "outputs": [],
   "source": [
    "open = Button(label='Open')\n",
    "close = Button(label='Close')\n",
    "\n",
    "dialog = Dialog('# This is a dialog', close_on_click=True, show_close_button=True)\n",
    "\n",
    "open.js_on_click(args={'dialog': dialog}, code=\"dialog.data.open = true\")\n",
    "\n",
    "Column(open, dialog).preview()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "1a328814-f434-4597-8e8e-1c4379299c2c",
   "metadata": {},
   "source": [
    "### Full Screen\n",
    "\n",
    "It can also be rendered in full screen:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "faaebba5-5299-42a2-94dd-1eabbecc42bb",
   "metadata": {},
   "outputs": [],
   "source": [
    "open = Button(label='Open')\n",
    "close = Button(label='Close')\n",
    "\n",
    "dialog = Dialog(close, full_screen=True)\n",
    "\n",
    "open.js_on_click(args={'dialog': dialog}, code=\"dialog.data.open = true\")\n",
    "close.js_on_click(args={'dialog': dialog}, code=\"dialog.data.open = false\")\n",
    "\n",
    "Column(open, dialog).preview()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "ac4d136f-f753-4a7e-8a2d-7db90f311bd9",
   "metadata": {},
   "source": [
    "### Width\n",
    "\n",
    "Lastly, we can control the maximum size of the `Dialog` with the `width_option` and if we want also force it to always take on that size by setting the `sizing_mode`:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "d0875366-6b7a-414f-a268-11ed39d9a322",
   "metadata": {},
   "outputs": [],
   "source": [
    "open = Button(label='Open')\n",
    "close = Button(label='Close')\n",
    "\n",
    "dialog = Dialog(close, sizing_mode='stretch_width', width_option='lg')\n",
    "\n",
    "open.js_on_click(args={'dialog': dialog}, code=\"dialog.data.open = true\")\n",
    "close.js_on_click(args={'dialog': dialog}, code=\"dialog.data.open = false\")\n",
    "\n",
    "Column(open, dialog).preview()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "9b30eafe-5d1b-47a7-b55f-e7d3b8a884aa",
   "metadata": {},
   "source": [
    "### References\n",
    "\n",
    "**Material UI Dialog:**\n",
    "\n",
    "- [Material UI Dialog Reference](https://mui.com/material-ui/react-dialog) - Complete documentation for the underlying Material UI component\n",
    "- [Material UI Dialog API](https://mui.com/material-ui/api/dialog/) - Detailed API reference and configuration options"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "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.12.2"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}