defmodule Moon.Design.Dropdown.Input do
  @moduledoc "Element that triggers Dropdown component, renders as a HTML input inside div with some addons"

  use Moon.StatelessComponent, slot: "trigger"

  @doc "Data-testid attribute for html tag"
  prop(testid, :string)
  @doc "Id attribute for html tag"
  prop(id, :string)
  @doc "Additional CSS classes for the html tag"
  prop(class, :css_class)
  @doc "Additional classes for the <input> tag in case of floating label or Group"
  prop(field_class, :css_class, from_context: :field_class)

  @doc "Text to be shown when no value given"
  prop(placeholder, :string)
  @doc "Value to be shown"
  prop(value, :string)
  @doc "Some additional styling will be set to indicate field is iinvalid"
  prop(error, :boolean, from_context: :error)
  @doc "Site of the select"
  prop(size, :string, values!: ~w(sm md lg), from_context: :size)
  @doc "If the item should be marked as disabled"
  prop(disabled, :boolean, from_context: :disabled)
  @doc "Dropdown opening action, only from context"
  prop(open_me, :event, from_context: :open_me)
  @doc "Actually - on_keyup event for the input, use it for filter options with new user input"
  prop(on_keyup, :event)
  @doc "Event that fired when trigger is clicked"
  prop(on_trigger, :event, from_context: :on_trigger)
  @doc "If the open indicator is active or not"
  prop(is_open, :boolean, from_context: :is_open)
  @doc "Keyword | Map of additional attributes for the input"
  prop(attrs, :any, default: %{})

  prop(on_focus, :event)
  prop(on_blur, :event)

  @doc "Some buttons and icons over the input"
  slot(default)

  def render(assigns) do
    ~F"""
    <div class="relative w-full">
      <input
        {=@value}
        {=@id}
        {=@placeholder}
        data-testid={@testid}
        :on-keyup={@on_keyup}
        :on-focus={@open_me}
        {=@on_focus}
        {=@on_blur}
        {=@error}
        {=@disabled}
        autocomplete="off"
        class={"moon-comboinput", @field_class, @class}
        {...@attrs}
      />
      <#slot />
    </div>
    """
  end
end
