"""
TextInput example - Reactive counter to demonstrate what we need for text input.

Current limitations exposed by this example:
1. No oninput event (only onclick) - need generalized event handling
2. No string signals (only i32) - need type system
3. No f-string interpolation with signals in text nodes
4. No event value passing (onclick doesn't pass event data)
5. No string operations (len, concat, etc.)

For now, using a counter to demonstrate the reactive infrastructure
that text input will use once we implement string support.
"""

from ritz.syntax import *


@component
def TextInput():
    """Counter that demonstrates reactive updates (placeholder for text input)."""
    count = signal(0)  # Integer signal - works!

    def increment():
        """Increment counter."""
        count = count + 1

    def decrement():
        """Decrement counter."""
        count = count - 1

    with Div(class_="container"):
        with H1():
            yield "Reactive Counter"

        with P(class_="instructions"):
            yield "Click buttons to see reactive updates (text input coming soon!):"

        # Buttons (placeholder for text input)
        with Div(class_="button-group"):
            with Button(onclick=decrement):
                yield "−"

            with P(class_="counter-display"):
                yield f"Count: {count}"

            with Button(onclick=increment):
                yield "+"

        # Info about what we need
        with P(class_="todo"):
            yield "TODO: Replace with text input once we implement:"
        with Ul(class_="todo-list"):
            with Li():
                yield "1. String signals (i8* not i32)"
            with Li():
                yield "2. oninput event handler"
            with Li():
                yield "3. Event value passing"
            with Li():
                yield "4. F-string interpolation with signals"