import itertools

import gradio as gr

counter = itertools.count(1)

with gr.Blocks() as demo:
    gr.Markdown(
        "# ColorPicker blur/submit demo (before fix)\n"
        "Reproduces https://github.com/gradio-app/gradio/issues/12896.\n\n"
        "1. Click the swatch to open the picker (a `focus` toast appears).\n"
        "2. Click inside the dialog (gradient, hue slider, or the hex input). "
        "**Bug:** a `blur` toast appears here, while you are still using the picker.\n"
        "3. Type a color in the hex input and press Enter (`submit` toast).\n"
        "4. Click outside the picker. Because the focused element is removed "
        "with the dialog, no `blur` toast appears here at all.\n\n"
        "Toasts are numbered so repeated events stay distinguishable."
    )

    cp = gr.ColorPicker(label="Color Picker")

    cp.focus(fn=lambda: gr.Info(f"{next(counter)}: focus"))
    cp.blur(fn=lambda: gr.Info(f"{next(counter)}: blur"))
    cp.submit(fn=lambda: gr.Info(f"{next(counter)}: submit"))

# SSR is disabled because preview wheels built from current main fail to
# start the SSR node server (missing bundled postcss); the ColorPicker
# behavior under test does not involve SSR. Kept identical in both Spaces.
demo.launch(ssr_mode=False)