defmodule LiveAntd.Components.Form do
  @moduledoc """
  Defines a form field.

  The `Field` component sets the provided field name into the context so child
  components like input fields and labels can retrieve it and use it as
  the default field.

  ## API

    * [ ] `colon`:	Configure the default value of colon for Form.Item. Indicates whether the colon after the label is displayed (only effective when prop layout is horizontal)	boolean	true
    * [ ] `component`:	Set the Form rendering element. Do not create a DOM node for false	ComponentType | false	form
    * [ ] `fields`:	Control of form fields through state management (such as redux). Not recommended for non-strong demand. View example	FieldData[]	-
    * [ ] `form`:	Form control instance created by Form.useForm(). Automatically created when not provided	FormInstance	-
    * [ ] `initialValues`:	Set value by Form initialization or reset	object	-
    * [ ] `labelAlign`:	The text align of label of all items	left | right	right
    * [ ] `labelCol`:	Label layout, like <Col> component. Set span offset value like {span: 3, offset: 12} or sm: {span: 3, offset: 12}	object	-
    * [ ] `layout`:	Form layout	horizontal | vertical | inline	horizontal
    * [ ] `name`:	Form name. Will be the prefix of Field id	string	-
    * [ ] `preserve`:	Keep field value even when field removed	boolean	true	4.4.0
    * [ ] `requiredMark`:	Required mark style. Can use required mark or optional mark. You can not config to single Form.Item since this is a Form level config	boolean | optional	true	4.6.0
    * [ ] `scrollToFirstError`:	Auto scroll to first failed field when submit	boolean	false
    * [ ] `size`:	Set field component size (antd components only)	small | middle | large	-
    * [ ] `validateMessages`:	Validation prompt template, description see below	ValidateMessages	-
    * [ ] `validateTrigger`:	Config field validate trigger	string | string[]	onChange	4.3.0
    * [ ] `wrapperCol`:	The layout for input controls, same as labelCol	object	-
    * [ ] `onFieldsChange`:	Trigger when field updated	function(changedFields, allFields)	-
    * [ ] `onFinish`:	Trigger after submitting the form and verifying data successfully	function(values)	-
    * [ ] `onFinishFailed`:	Trigger after submitting the form and verifying data failed	function({ values, errorFields, outOfDate })	-
    * [ ] `onValuesChange`:	Trigger when value updated

  ## Example

    <Form
      name="basic"
      initialValues={{ remember: true }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
    >
      <Form.Item
        label="Username"
        name="username"
        rules={[{ required: true, message: 'Please input your username!' }]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="Password"
        name="password"
        rules={[{ required: true, message: 'Please input your password!' }]}
      >
        <Input.Password />
      </Form.Item>

      <Form.Item name="remember" valuePropName="checked">
        <Checkbox>Remember me</Checkbox>
      </Form.Item>

      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>

  """

  use Surface.Component

  @doc "The field name"
  prop(name, :atom, required: true)

  @doc "The CSS class for the generated `<div>` element"
  prop(class, :css_class)

  @doc """
  The content for the field
  """
  slot(default, required: true)

  def render(assigns) do
    ~H"""
    <div class={{ class_value(@class) }}>
      <Context put={{ __MODULE__, field: @name }}>
        <slot/>
      </Context>
    </div>
    """
  end

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