Modal Components

class Modal:
    """
    Modal dialog component for overlay content.
    
    Args:
        children: Modal content (ModalHeader, ModalBody, ModalFooter)
        id (str): Component identifier for callbacks
        is_open (bool): Control modal visibility
        style (dict): Inline CSS styles
        class_name (str): Additional CSS classes
        centered (bool): Center modal vertically in viewport
        fade (bool): Enable fade animation
        backdrop (bool|str): Backdrop behavior - True (clickable), False (none), "static" (non-clickable)
        keyboard (bool): Close modal with Escape key
        size (str): Modal size - "sm", "lg", "xl"
        fullscreen (bool|str): Fullscreen modal - True (always), "sm-down", "md-down", "lg-down", "xl-down", "xxl-down"
        scrollable (bool): Enable scrolling within modal body
        zindex (int): CSS z-index for modal
    """
    def __init__(self, children=None, id=None, is_open=False, style=None, class_name=None,
                 centered=False, fade=True, backdrop=True, keyboard=True, size=None,
                 fullscreen=False, scrollable=False, zindex=None, **kwargs): ...

class ModalHeader:
    """
    Header section for modals with optional close button.
    
    Args:
        children: Header content (typically ModalTitle)
        id (str): Component identifier
        style (dict): Inline CSS styles
        class_name (str): Additional CSS classes
        close_button (bool): Show close button (X)
        tag (str): HTML tag for header element
    """
    def __init__(self, children=None, id=None, style=None, class_name=None,
                 close_button=True, tag="div", **kwargs): ...

class ModalTitle:
    """
    Title component for modal headers.
    
    Args:
        children: Title text or content
        id (str): Component identifier
        style (dict): Inline CSS styles
        class_name (str): Additional CSS classes
        tag (str): HTML tag for title element
    """
    def __init__(self, children=None, id=None, style=None, class_name=None,
                 tag="h5", **kwargs): ...

class ModalBody:
    """
    Main content area for modals.
    
    Args:
        children: Body content
        id (str): Component identifier
        style (dict): Inline CSS styles
        class_name (str): Additional CSS classes
    """
    def __init__(self, children=None, id=None, style=None, class_name=None, **kwargs): ...

class ModalFooter:
    """
    Footer section for modals with action buttons.
    
    Args:
        children: Footer content (typically buttons)
        id (str): Component identifier
        style (dict): Inline CSS styles
        class_name (str): Additional CSS classes
    """
    def __init__(self, children=None, id=None, style=None, class_name=None, **kwargs): ...

import dash_bootstrap_components as dbc
from dash import html, callback, Input, Output, State

# Basic modal with trigger button
modal_content = html.Div([
    dbc.Button("Open Modal", id="open-modal", color="primary"),
    dbc.Modal([
        dbc.ModalHeader([
            dbc.ModalTitle("Modal Title")
        ]),
        dbc.ModalBody("This is the modal body content."),
        dbc.ModalFooter([
            dbc.Button("Close", id="close-modal", color="secondary"),
            dbc.Button("Save", color="primary"),
        ]),
    ], id="modal", is_open=False),
])

@callback(
    Output("modal", "is_open"),
    [Input("open-modal", "n_clicks"), Input("close-modal", "n_clicks")],
    [State("modal", "is_open")],
)
def toggle_modal(open_clicks, close_clicks, is_open):
    if open_clicks or close_clicks:
        return not is_open
    return is_open

from dash import callback, Input, Output, State

# Confirmation dialog
confirmation_modal = html.Div([
    dbc.Button("Delete Item", id="delete-btn", color="danger"),
    html.Div(id="delete-result"),
    dbc.Modal([
        dbc.ModalHeader([
            dbc.ModalTitle("Confirm Deletion")
        ]),
        dbc.ModalBody([
            html.P("Are you sure you want to delete this item?"),
            html.P("This action cannot be undone.", className="text-danger"),
        ]),
        dbc.ModalFooter([
            dbc.Button("Cancel", id="cancel-delete", color="secondary"),
            dbc.Button("Delete", id="confirm-delete", color="danger"),
        ]),
    ], id="confirm-modal", is_open=False),
])

@callback(
    Output("confirm-modal", "is_open"),
    [Input("delete-btn", "n_clicks"), Input("cancel-delete", "n_clicks"), Input("confirm-delete", "n_clicks")],
    [State("confirm-modal", "is_open")],
)
def toggle_confirmation(delete_clicks, cancel_clicks, confirm_clicks, is_open):
    if delete_clicks or cancel_clicks or confirm_clicks:
        return not is_open
    return is_open

@callback(
    Output("delete-result", "children"),
    [Input("confirm-delete", "n_clicks")],
    prevent_initial_call=True
)
def handle_delete(n_clicks):
    if n_clicks:
        return dbc.Alert("Item deleted successfully!", color="success", dismissable=True)
    return ""

# Modal with form content
form_modal = html.Div([
    dbc.Button("Add User", id="add-user-btn", color="success"),
    dbc.Modal([
        dbc.ModalHeader([
            dbc.ModalTitle("Add New User")
        ]),
        dbc.ModalBody([
            dbc.Form([
                dbc.Row([
                    dbc.Label("Name", html_for="user-name", width=3),
                    dbc.Col([
                        dbc.Input(id="user-name", placeholder="Enter name"),
                    ], width=9),
                ], className="mb-3"),
                dbc.Row([
                    dbc.Label("Email", html_for="user-email", width=3),
                    dbc.Col([
                        dbc.Input(id="user-email", type="email", placeholder="Enter email"),
                    ], width=9),
                ], className="mb-3"),
                dbc.Row([
                    dbc.Label("Role", html_for="user-role", width=3),
                    dbc.Col([
                        dbc.Select(
                            id="user-role",
                            options=[
                                {"label": "User", "value": "user"},
                                {"label": "Admin", "value": "admin"},
                                {"label": "Manager", "value": "manager"},
                            ],
                            value="user",
                        ),
                    ], width=9),
                ], className="mb-3"),
            ])
        ]),
        dbc.ModalFooter([
            dbc.Button("Cancel", id="cancel-add-user", color="secondary"),
            dbc.Button("Add User", id="submit-add-user", color="success"),
        ]),
    ], id="form-modal", is_open=False),
])

@callback(
    Output("form-modal", "is_open"),
    [Input("add-user-btn", "n_clicks"), Input("cancel-add-user", "n_clicks"), Input("submit-add-user", "n_clicks")],
    [State("form-modal", "is_open")],
)
def toggle_form_modal(add_clicks, cancel_clicks, submit_clicks, is_open):
    if add_clicks or cancel_clicks or submit_clicks:
        return not is_open
    return is_open

# Modals with different sizes
modal_sizes = html.Div([
    dbc.Button("Small Modal", id="sm-modal-btn", color="info", className="me-2"),
    dbc.Button("Large Modal", id="lg-modal-btn", color="warning", className="me-2"),
    dbc.Button("Extra Large", id="xl-modal-btn", color="danger"),
    
    # Small modal
    dbc.Modal([
        dbc.ModalHeader("Small Modal"),
        dbc.ModalBody("This is a small modal."),
        dbc.ModalFooter(dbc.Button("Close", id="close-sm-modal", color="secondary")),
    ], id="sm-modal", size="sm", is_open=False),
    
    # Large modal
    dbc.Modal([
        dbc.ModalHeader("Large Modal"),
        dbc.ModalBody("This is a large modal with more space for content."),
        dbc.ModalFooter(dbc.Button("Close", id="close-lg-modal", color="secondary")),
    ], id="lg-modal", size="lg", is_open=False),
    
    # Extra large modal
    dbc.Modal([
        dbc.ModalHeader("Extra Large Modal"),
        dbc.ModalBody("This is an extra large modal for complex content."),
        dbc.ModalFooter(dbc.Button("Close", id="close-xl-modal", color="secondary")),
    ], id="xl-modal", size="xl", is_open=False),
])

# Modal with scrollable content
scrollable_modal = html.Div([
    dbc.Button("Scrollable Modal", id="scroll-modal-btn", color="primary"),
    dbc.Modal([
        dbc.ModalHeader("Scrollable Modal"),
        dbc.ModalBody([
            html.P("This modal has a lot of content that requires scrolling."),
            *[html.P(f"Paragraph {i+1}: Lorem ipsum dolor sit amet, consectetur adipiscing elit.") for i in range(20)],
        ]),
        dbc.ModalFooter(dbc.Button("Close", id="close-scroll-modal", color="secondary")),
    ], id="scroll-modal", scrollable=True, is_open=False),
])

# Vertically centered modal
centered_modal = html.Div([
    dbc.Button("Centered Modal", id="center-modal-btn", color="success"),
    dbc.Modal([
        dbc.ModalHeader("Centered Modal"),
        dbc.ModalBody("This modal is vertically centered in the viewport."),
        dbc.ModalFooter(dbc.Button("Close", id="close-center-modal", color="secondary")),
    ], id="center-modal", centered=True, is_open=False),
])

# Modal with static backdrop (cannot be closed by clicking backdrop)
static_modal = html.Div([
    dbc.Button("Static Modal", id="static-modal-btn", color="warning"),
    dbc.Modal([
        dbc.ModalHeader("Static Backdrop Modal"),
        dbc.ModalBody("This modal cannot be closed by clicking the backdrop."),
        dbc.ModalFooter(dbc.Button("Close", id="close-static-modal", color="secondary")),
    ], id="static-modal", backdrop="static", is_open=False),
])

# Fullscreen modal
fullscreen_modal = html.Div([
    dbc.Button("Fullscreen Modal", id="fs-modal-btn", color="dark"),
    dbc.Modal([
        dbc.ModalHeader("Fullscreen Modal"),
        dbc.ModalBody([
            html.H3("Fullscreen Content"),
            html.P("This modal takes up the entire viewport."),
            html.P("It's useful for immersive experiences or complex forms."),
        ]),
        dbc.ModalFooter(dbc.Button("Close", id="close-fs-modal", color="secondary")),
    ], id="fs-modal", fullscreen=True, is_open=False),
])

# Modal for displaying images
image_modal = html.Div([
    html.Img(
        src="/static/images/thumbnail.jpg",
        id="image-thumb",
        style={"width": "150px", "cursor": "pointer"},
        className="img-thumbnail"
    ),
    dbc.Modal([
        dbc.ModalBody([
            html.Img(
                src="/static/images/full-size.jpg",
                style={"width": "100%"},
                className="img-fluid"
            )
        ], style={"padding": "0"}),
    ], id="image-modal", size="lg", is_open=False),
])

@callback(
    Output("image-modal", "is_open"),
    [Input("image-thumb", "n_clicks")],
    [State("image-modal", "is_open")],
)
def toggle_image_modal(n_clicks, is_open):
    if n_clicks:
        return not is_open
    return is_open