raxol

defmodule Examples.SvelteCounter do
  @moduledoc """
  A simple counter component demonstrating Svelte-style patterns in Raxol.

  Features:
  - Reactive state management
  - Reactive computed values
  - Event handling
  - Compile-time optimization

  Usage:
    terminal = Raxol.Terminal.new()
    counter = Examples.SvelteCounter.mount(terminal)
  """

  use Raxol.Svelte.Component, optimize: :compile_time
  use Raxol.Svelte.Reactive

  # State variables
  state(:count, 0)
  state(:step, 1)
  state(:name, "World")

  # Reactive computed values (like Svelte's derived stores)
  reactive :doubled do
    @count * 2
  end

  reactive :tripled do
    @doubled + @count
  end

  reactive :greeting do
    "Hello, #{@name}!"
  end

  # Reactive statements (like Svelte's $: declarations)
  reactive_block do
    # These run automatically when dependencies change
    reactive_stmt(is_even = rem(@count, 2) == 0)

    reactive_stmt(
      magnitude =
        cond do
          @count < 0 -> "negative"
          @count == 0 -> "zero"
          @count < 10 -> "small"
          @count < 100 -> "medium"
          true -> "large"
        end
    )

    reactive_stmt(
      status_message =
        "Count is #{magnitude} and #{if is_even, do: "even", else: "odd"}"
    )

    # Side effects
    reactive_stmt(
      if @count > 10 do
        IO.puts("Warning: Count is getting high!")
      end
    )
  end

  # Event handlers
  def increment do
    update_state(:count, &(&1 + get_state(:step)))
  end

  def decrement do
    update_state(:count, &(&1 - get_state(:step)))
  end

  def reset do
    set_state(:count, 0)
  end

  def set_step(new_step) do
    set_state(:step, new_step)
  end

  def set_name(new_name) do
    set_state(:name, new_name)
  end

  # Render function with template (compile-time optimized)
  def render(assigns) do
    ~H"""
    <Box padding={2} border="double" title="Svelte Counter">
      <Text color="blue" bold>{@greeting}</Text>
      <Text>Count: {@count}</Text>
      <Text>Doubled: {@doubled}</Text>
      <Text>Tripled: {@tripled}</Text>
      <Text color={if @count < 0, do: "red", else: "green"}>{status_message}</Text>
      
      <Row spacing={1}>
        <Button on_click={&decrement/0}>-{@step}</Button>
        <Button on_click={&increment/0}>+{@step}</Button>
        <Button on_click={&reset/0}>Reset</Button>
      </Row>
      
      <Row spacing={1}>
        <Text>Step:</Text>
        <Button on_click={fn -> set_step(1) end} active={@step == 1}>1</Button>
        <Button on_click={fn -> set_step(5) end} active={@step == 5}>5</Button>
        <Button on_click={fn -> set_step(10) end} active={@step == 10}>10</Button>
      </Row>
      
      <TextInput 
        value={@name} 
        placeholder="Enter your name"
        on_change={&set_name/1}
      />
    </Box>
    """
  end
end