defmodule SurfaceBootstrap.Form.NumberInput do
  @moduledoc """
  The number input element as defined here:
  - https://hexdocs.pm/phoenix_html/Phoenix.HTML.Form.html#number_input/3
  - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number
  """

  use Surface.Component
  use SurfaceBootstrap.Form.TextInputBase

  alias Surface.Components.Form.NumberInput

  @doc "Largest number allowed, as enforced by client browser. Not validated by Elixir."
  prop max, :integer

  @doc "Smallest number allowed, as enforced by client browser. Not validated by Elixir."
  prop min, :integer

  @doc "A stepping interval to use when using up and down arrows to adjust the value, as well as for validation"
  prop step, :integer

  def render(assigns) do
    ~F"""
    <FieldContext name={@field}>
      {raw(optional_div(assigns))}
      <Label :if={@label && !@in_group && !@floating_label} class="form-label">{@label}</Label>
      <NumberInput
        class={input_classes(assigns) ++ @class}
        field={@field}
        value={@value}
        :props={default_surface_input_props(assigns)}
        opts={default_core_input_opts(assigns) ++ @opts}
      />
      <BootstrapErrorTag has_error={has_error?(assigns)} has_change={has_change?(assigns)} />
      {help_text(assigns)}
      <#Raw :if={!@in_group}></div></#Raw>
    </FieldContext>
    """
  end
end
