class ClipboardBasicState(rx.State):
    items: list[str] = []

    @rx.event
    def on_paste(self, data: list[tuple[str, str]]):
        self.items = [f"{mime_type}: {item[:60]}" for mime_type, item in data]


rx.vstack(
    rx.clipboard(
        rx.input(placeholder="Copy some text, then paste here"),
        on_paste=ClipboardBasicState.on_paste,
    ),
    rx.foreach(ClipboardBasicState.items, lambda line: rx.code(line, size="1")),
    width="100%",
    max_width="420px",
)

class ClipboardTypesState(rx.State):
    count: int = 0
    types: list[str] = []

    @rx.event
    def on_paste(self, data: list[tuple[str, str]]):
        self.count += 1
        self.types = [mime_type for mime_type, _ in data]


rx.card(
    rx.clipboard(
        rx.text_area(placeholder="Paste text, an image, or a copied web page", rows="3"),
        on_paste=ClipboardTypesState.on_paste,
    ),
    rx.text("Paste events: ", ClipboardTypesState.count, size="2", margin_top="8px"),
    rx.flex(rx.foreach(ClipboardTypesState.types, lambda t: rx.badge(t)), spacing="2", wrap="wrap", margin_top="6px"),
    max_width="420px",
)

class ClipboardImageState(rx.State):
    last_image_uri: str = ""

    @rx.event
    def on_paste(self, data: list[tuple[str, str]]):
        for mime_type, item in data:
            if mime_type.startswith("image/"):
                if len(item) > 2_000_000:
                    return rx.toast("This image is too large for the demo")
                self.last_image_uri = item
                break
        else:
            return rx.toast("Did not find an image in the pasted data")


rx.vstack(
    rx.clipboard(
        rx.input(placeholder="Paste Image (stop propagation)"),
        on_paste=ClipboardImageState.on_paste.stop_propagation,
    ),
    rx.clipboard(
        rx.input(placeholder="Paste Image (prevent default)"),
        on_paste=ClipboardImageState.on_paste.prevent_default,
    ),
    rx.cond(
        ClipboardImageState.last_image_uri != "",
        rx.image(src=ClipboardImageState.last_image_uri, alt="Image pasted from clipboard", max_width="240px", border_radius="6px"),
        rx.text("No image yet. Copy an image (or take a screenshot) and paste above.", size="2", color_scheme="gray"),
    ),
    width="100%",
    max_width="420px",
)

class ClipboardTargetState(rx.State):
    pasted_chars: int = 0

    @rx.event
    def on_paste(self, data: list[tuple[str, str]]):
        self.pasted_chars += sum(len(item) for mime_type, item in data if mime_type == "text/plain")


rx.vstack(
    rx.clipboard(on_paste=ClipboardTargetState.on_paste, targets=["clipboard_target_note"]),
    rx.text_area(id="clipboard_target_note", placeholder="Only this box is watched", rows="2"),
    rx.input(placeholder="This box is not watched"),
    rx.text("Pasted characters: ", ClipboardTargetState.pasted_chars, size="2"),
    width="100%",
    max_width="420px",
)

class ClipboardTicketState(rx.State):
    shot: str = ""
    note: str = ""

    @rx.event
    def on_paste(self, data: list[tuple[str, str]]):
        for mime_type, item in data:
            if mime_type.startswith("image/") and len(item) <= 2_000_000:
                self.shot = item
                return
        return rx.toast("Paste a screenshot (an image) here")

    @rx.event
    def change_note(self, value: str):
        self.note = value

    @rx.event
    def clear_shot(self):
        self.shot = ""


rx.card(
    rx.heading("Bug report", size="3"),
    rx.text_area(
        value=ClipboardTicketState.note,
        on_change=ClipboardTicketState.change_note,
        placeholder="What went wrong?",
        rows="2",
        margin_y="8px",
    ),
    rx.clipboard(
        rx.box(
            rx.cond(
                ClipboardTicketState.shot != "",
                rx.image(src=ClipboardTicketState.shot, alt="Pasted screenshot", max_height="160px"),
                rx.text("Click here, then paste a screenshot (Ctrl + V)", size="2", color_scheme="gray"),
            ),
            tab_index=0,
            padding="16px",
            border=f"2px dashed {rx.color('gray', 7)}",
            border_radius="8px",
            text_align="center",
        ),
        on_paste=ClipboardTicketState.on_paste.prevent_default.stop_propagation,
    ),
    rx.button("Remove screenshot", on_click=ClipboardTicketState.clear_shot, variant="soft", color_scheme="gray", size="1", margin_top="8px"),
    max_width="420px",
)