{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import panel as pn\n",
    "import panel_material_ui as pmui\n",
    "\n",
    "pn.extension()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The `Switch` widget allows users to toggle between `True` and `False` states with an intuitive flick-switch interface. This widget provides the same functionality as the `Checkbox` and `Toggle` widgets but with a distinctly modern visual appearance that clearly communicates on/off states.\n",
    "\n",
    "Perfect for settings panels, feature toggles, and any binary choice where visual clarity is important, the `Switch` widget offers an elegant alternative to traditional checkboxes.\n",
    "\n",
    "#### Parameters\n",
    "\n",
    "For more details on customization options, see the [customization guides](https://panel-material-ui.holoviz.org/customization/index.html).\n",
    "\n",
    "##### Core\n",
    "\n",
    "* **`disabled`** (bool): When True, the widget becomes non-interactive and appears grayed out.\n",
    "* **`value`** (bool): The current state of the switch (`True` for on/enabled, `False` for off/disabled).\n",
    "\n",
    "##### Display\n",
    "\n",
    "* **`edge`** (str): Controls the switch positioning - `'start'` (left-aligned), `'end'` (right-aligned), or `False` for center alignment.\n",
    "* **`label`** (str): The descriptive text displayed alongside the switch.\n",
    "\n",
    "##### Styling\n",
    "\n",
    "- **`color`** (str): The color theme applied to the switch when active.\n",
    "- **`size`** (str): Controls the physical size of the switch component.\n",
    "- **`sx`** (dict): Advanced styling options for fine-tuned appearance control.\n",
    "- **`theme_config`** (dict): Theme-level configuration for consistent styling across your application.\n",
    "\n",
    "##### Aliases\n",
    "\n",
    "For seamless compatibility with Panel widgets, certain parameters accept aliases:\n",
    "\n",
    "- **`name`**: Alternative parameter name for `label`\n",
    "\n",
    "___"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Basic Usage\n",
    "\n",
    "Getting started with the Switch widget is straightforward. Here's how to create a simple switch with a descriptive label:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "switch = pmui.Switch(label='Switch')\n",
    "\n",
    "switch"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The `value` parameter automatically updates to reflect the switch state: `True` when switched on, `False` when switched off. You can also programmatically set this value to control the switch state."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "switch.value"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Color Options\n",
    "\n",
    "Customize your switch's appearance to match your application's design language using the `color` parameter. Each color provides different visual emphasis and semantic meaning:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pmui.Switch(value=True, label=\"secondary\", color=\"secondary\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Here's a showcase of all available color options:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pmui.FlexBox(\n",
    "    *(pmui.Switch(value=True, label=color, color=color) for color in pmui.Switch.param.color.objects)\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Size Options\n",
    "\n",
    "Adjust the switch size using the `size` parameter:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pmui.FlexBox(\n",
    "    pmui.Switch(label=\"small\", size=\"small\"),\n",
    "    pmui.Switch(label=\"medium\", size=\"medium\"),\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Edge Options\n",
    "\n",
    "Adjust the edge using the `edge` parameter:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pmui.FlexBox(\n",
    "    pmui.Switch(label=\"start\", edge=\"start\"),\n",
    "    pmui.Switch(label=\"end\", edge=\"end\"),\n",
    "    pmui.Switch(label=\"False\", edge=False),\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Disabled and Loading\n",
    "\n",
    "Like other widgets, the `Switch` can be disabled and/or show a loading indicator."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pmui.Switch(label=\"Switch\", disabled=True, loading=True)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Example: Dark Mode Toggle"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import panel as pn\n",
    "import panel_material_ui as pmui\n",
    "\n",
    "pn.extension()\n",
    "\n",
    "dark_mode = pmui.Switch(label=\"Dark Mode\", value=False)\n",
    "\n",
    "def create_theme_message(value):\n",
    "    if value:\n",
    "        return \"🌙 Dark mode is enabled\"\n",
    "    \n",
    "    return \"☀️ Light mode is enabled\"\n",
    "\n",
    "theme_message = pn.bind(create_theme_message, dark_mode)\n",
    "\n",
    "pmui.Column(dark_mode, theme_message)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### API Reference\n",
    "\n",
    "#### Parameters\n",
    "\n",
    "The `Switch` widget exposes a number of options which can be changed from both Python and Javascript:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pmui.Switch(label=\"Switch\").api(jslink=True)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### References\n",
    "\n",
    "**Panel Documentation:**\n",
    "\n",
    "- [How-to guides on interactivity](https://panel.holoviz.org/how_to/interactivity/index.html) - Learn how to add interactivity to your applications using widgets\n",
    "- [Setting up callbacks and links](https://panel.holoviz.org/how_to/links/index.html) - Connect parameters between components and create reactive interfaces\n",
    "- [Declarative UIs with Param](https://panel.holoviz.org/how_to/param/index.html) - Build parameter-driven applications\n",
    "\n",
    "**Material UI Switch:**\n",
    "\n",
    "- [Material UI Switch Reference](https://mui.com/material-ui/react-switch/) - Complete documentation for the underlying Material UI component\n",
    "- [Material UI Switch API](https://mui.com/material-ui/api/switch/) - 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.9"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}