live_antd

defmodule LiveAntd.Components.Button do
  @moduledoc """
  Button Component.

  ## API

    * [x] `block`: Option to fit button width to its parent width
    * [x] `danger`: Set the danger status of button
    * [x] `disabled`: Disabled state of button
    * [x] `ghost`: Make background transparent and invert text and border colors
    * [ ] `href`: Redirect url of link button
    * [ ] `htmlType`: Set the original html type of button, see: MDN
    * [ ] `icon`: Set the icon component of button
    * [x] `shape`: Can be set button shape
    * [x] `loading`: Set the loading status of button
    * [x] `size`: Set the size of button
    * [ ] `target`: Same as target attribute of a, works when href is specified
    * [x] `type`: Can be set to `primary` `ghost` `dashed` `link` `text` `default`
    * [x] `onClick`:	Set the handler to handle click event

  ## Example

    <Button
      type="primary"
      onClick=""
    >
      Button Name
    </Button>

  """

  use Surface.Component

  # event
  prop(onClick, :event)

  # api property
  prop(type, :string, values: ~w(primary dashed default text link), default: "default")
  prop(size, :string, values: ~w(large small middle), default: "middle")
  prop(shape, :string, values: ~w(circle round))
  prop(disabled, :boolean)
  prop(loading, :boolean, default: false)
  prop(block, :boolean, default: false)
  prop(ghost, :boolean, default: false)
  prop(danger, :boolean, default: false)

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

  # slot
  slot(default, required: true)

  def render(assigns) do
    ~H"""
    <button
      type="button"
      disabled={{ @disabled }}
      :on-click={{ @onClick }}
      class={{
        "ant-btn",
        class_value(@class),
        "ant-btn-#{@type}": @type,
        "ant-btn-middle": String.equivalent?(@size, "middle"),
        "ant-btn-lg": String.equivalent?(@size, "large"),
        "ant-btn-sm": String.equivalent?(@size, "small"),
        "ant-btn-loading": @loading,
        "ant-btn-block": @block,
        "ant-btn-background-ghost": @ghost,
        "ant-btn-dangerous": @danger,
        "ant-btn-#{@shape}": @shape
      }}
      style="{{ @style }}"
    >
      <slot/>
    </button>
    """
  end

  defp class_value(class) do
    class || get_config(:default_class)
  end
end