{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "a37ac4b2-78f7-4fb6-8f53-5b8cbdedbf20",
   "metadata": {},
   "outputs": [],
   "source": [
    "import panel as pn\n",
    "from panel_material_ui import (\n",
    "    COLORS, BreakpointSwitcher, Column, RadioButtonGroup, Select\n",
    ")\n",
    "\n",
    "pn.extension()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "01e701e1-808e-4fba-91ad-feb760a41acd",
   "metadata": {},
   "source": [
    "The `BreakpointSwitcher` component allows switching between two component implementations based on the declared breakpoint or media-query. This is useful for rendering different components, e.g. two different widgets depending on the current viewport size, e.g. to achieve a more compact layout on mobile devices.\n",
    "\n",
    "As a reminder, the default breakpoints are defined as:\n",
    "\n",
    "- `xs`, extra-small: 0px\n",
    "- `sm`, small: 600px\n",
    "- `md`, medium: 900px\n",
    "- `lg`, large: 1200px\n",
    "- `xl`, extra-large: 1536px\n",
    "\n",
    "## Parameters:\n",
    "\n",
    "### Core\n",
    "\n",
    "* **`breakpoint`** (`Literal[\"xs\", \"sm\", \"md\", \"lg\", \"xl\"]`): The breakpoint at which to switch from rendering the `small` to the `large` component.\n",
    "* **`current`** (`Any`): The currently displayed object.\n",
    "* **`media_query`** (str | None): Media query to use for the breakpoint (takes precedence over breakpoint).\n",
    "* **`small`** (`Any`): The component to render if the current viewport is smaller than the configured `breakpoint`.\n",
    "* **`large`** (`Any`): The component to render if the current viewport is larger or equal to the configured `breakpoint`.\n",
    "\n",
    "---"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "5f8a95cf-33b1-498f-bd99-65345f4e80ff",
   "metadata": {},
   "source": [
    "Let us create a switcher that switches between a `Select` and a `RadioButtonGroup` widget when the viewport grows larger than the `sm` breakpoint.\n",
    "\n",
    "The `preview` method will create two separate iframes, one with a width just under the breakpoint value and one just above:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "ce4a6c12-733c-4923-b863-0f31691a9da6",
   "metadata": {},
   "outputs": [],
   "source": [
    "switcher = BreakpointSwitcher(\n",
    "    breakpoint='md',\n",
    "    small=Select(options=COLORS),\n",
    "    large=RadioButtonGroup(options=COLORS),\n",
    ")\n",
    "\n",
    "Column(\n",
    "    switcher.preview(width=899, height=100, border='none'),\n",
    "    switcher.preview(width=900, height=100, border='none')\n",
    ")   "
   ]
  },
  {
   "cell_type": "markdown",
   "id": "1e43a124-8453-40ad-bc22-5610e6388715",
   "metadata": {},
   "source": [
    "When switching between two widgets like this we recommend using `.jslink` to keep them synchronized:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "98117e77-8c2c-4242-882e-adf4e8d67067",
   "metadata": {},
   "outputs": [],
   "source": [
    "small = Select(options=COLORS)\n",
    "large = RadioButtonGroup(options=COLORS)\n",
    "\n",
    "small.jslink(large, value='value', bidirectional=True);"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "9c10f3a4-fb2f-4175-a211-447884f06a44",
   "metadata": {},
   "source": [
    "You may also define a custom `media_query` to override the default `breakpoint` based behavior:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "c7c7247d-d3db-4152-b7db-5acaf65484cd",
   "metadata": {},
   "outputs": [],
   "source": [
    "switcher = BreakpointSwitcher(\n",
    "    media_query='(min-width: 800px)',\n",
    "    small=small,\n",
    "    large=large,\n",
    ")\n",
    "\n",
    "switcher.preview(styles={'resize': 'horizontal', 'overflow': 'hidden'}, sizing_mode='stretch_width', max_width=850, height=100)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "30291be3-6514-4b5c-85ba-52a983ee1282",
   "metadata": {},
   "source": [
    "Try resizing the iframe and watch the widget switch."
   ]
  }
 ],
 "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
}