live_antd

defmodule LiveAntd.Components.Input do
  @moduledoc """
  A basic widget for getting the user input is a text field. Keyboard and mouse can be used for providing or changing data.

  ## API

    * [ ] `addonAfter`:	The label text displayed after (on the right side of) the input field	ReactNode	-
    * [ ] `addonBefore`:	The label text displayed before (on the left side of) the input field	ReactNode	-
    * [ ] `allowClear`:	If allow to remove input content with clear icon	boolean	false
    * [x] `bordered`:	Whether has border style boolean	true	4.5.0
    * [x] `defaultValue`:	The initial input content	string	-
    * [x] `disabled`:	Whether the input is disabled	boolean	false
    * [x] `id`:	The ID for input	string	-
    * [ ] `maxLength`:	The max length number
    * [x] `placeholder`: input placeholder.
    * [x] `prefix`:	The prefix icon for the Input	ReactNode	-
    * [x] `suffix`:	The suffix icon for the Input
    * [x] `size`:	The size of the input box. Note: in the context of a form, the large size is used	large | middle | small	-
    * [ ] `type`:	The type of input, see: MDN( use Input.TextArea instead of type="textarea")	string	text
    * [x] `value`:	The input content value	string	-
    * [x] `onChange`:	Callback when user input	function(e)	-
    * [x] `onPressEnter`: The callback function that is triggered when Enter key is pressed	function(e)

  ## Example

    <Input
      disabled
      value={{@value}}
      size={{@size}}
    >
  """

  # use Surface.LiveComponent
  use Surface.Component

  # event
  prop(onChange, :event)
  prop(onPressEnter, :event)
  #
  prop(bordered, :boolean, default: true)
  prop(defaultValue, :string)
  prop(disabled, :boolean, default: false)
  prop(allowClear, :boolean)

  # integer or string
  prop(id, :any)

  # prop(maxLength)
  prop(size, :string, values: ~w(lg sm middle), default: "middle")
  prop(prefix, :any)
  prop(suffix, :any)
  # prop(type)
  prop(placeholder, :string, default: "input...")
  prop(value, :string)

  # basic property
  prop(class, :css_class)
  prop(style, :string)

  def render(assigns) do
    if assigns.prefix || assigns.suffix do
      ~H"""
      <span class="ant-input-affix-wrapper">
        <span class="ant-input-prefix" :if={{ @prefix }}>{{ @prefix }}</span>
        {{ render_basic_input(assigns) }}
        <span class="ant-input-suffix" :if={{ @suffix }}>{{ @suffix }}</span>
      </span>
      """
    else
      render_basic_input(assigns)
    end
  end

  def render_basic_input(assigns) do
    ~H"""
    <input
      id={{ @id }}
      disabled={{ @disabled }}
      placeholder={{ @placeholder }}
      :on-change={{ @onChange }}
      :on-keydown={{ @onPressEnter }}
      type="text"
      class={{
        "ant-input",
        "ant-input-lg": String.equivalent?(@size, "large"),
        "ant-input-sm": String.equivalent?(@size, "small"),
        "ant-input-middle": String.equivalent?(@size, "middle"),
        "ant-input-borderless": !@bordered
      }}
      value={{ @value || @defaultValue }}
    >
    """
  end
end