live_antd

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

  ## API

  ### Radio/Radio.Button

    * [ ] `autoFocus`:	Whether get focus when component mounted	boolean	false
    * [ ] `checked`:	Specifies whether the radio is selected	boolean	false
    * [ ] `defaultChecked`:	Specifies the initial state: whether or not the radio is selected	boolean	false
    * [ ] `disabled`:	Disable radio	boolean	false
    * [ ] `value`: According to value for comparison, to determine whether the selected

  ### RadioGroup

    * [ ] `buttonStyle`:	The style type of radio button	outline | solid	outline
    * [ ] `defaultValue`:	Default selected value	any	-
    * [ ] `disabled`:	Disable all radio buttons	boolean	false
    * [ ] `name`:	The name property of all input[type="radio"] children	string	-
    * [ ] `options`:	Set children optional	string[] | Array<{ label: string value: string disabled?: boolean }>	-
    * [ ] `optionType`:	Set Radio optionType	default | button	default	4.4.0
    * [ ] `size`:	The size of radio button style	large | middle | small	-
    * [ ] `value`:	Used for setting the currently selected value	any	-
    * [ ] `onChange`:	The callback function that is triggered when the state changes

  ## Example

    <Radio>Radio</Radio>

    <Radio.Group onChange={onChange} value={value}>
      <Radio value={1}>A</Radio>
      <Radio value={2}>B</Radio>
      <Radio value={3}>C</Radio>
      <Radio value={4}>D</Radio>
    </Radio.Group>

  """

  use Surface.Component

  prop(click, :event)

  prop(checked, :boolean)
  # prop(defaultChecked, :string)
  # prop(disabled, :boolean)
  # prop(value, :string)

  def render(assigns) do
    ~H"""
    <label class="ant-radio-wrapper">
      <span
        :on-click={{ @click }}
        class={{
          "ant-radio",
          "ant-radio-checked": @checked
        }}
      >
        <input type="radio" class="ant-radio-input" value="">
        <span class="ant-radio-inner"></span>
      </span>
      <span>
        <slot>Radio</slot>
      </span>
    </label>
    """
  end
end