defmodule LiveAntd.Components.SearchForm do
  @moduledoc """
  search component.

  ## API

    * [x] `fields`: form fileds properties
    * [x] `onSubmit`: submit event.
    * [x] `onChange`: form fields change.

  ## Example

    fields = [
      %{
        label: "event_name",
        title: "AA",
        type: "string",
        default: false,
        name: "aa",
        "x-component": "select"
        enum: [
         {
           "label": "visible",
           "value": true
         },
         {
           "label": "hidden",
           "value": false
         }
       ],
      }
    ]

    <SearchForm
      onSubmit={{@onSubmit}}
      onChange={{@onChange}}
      fields={{@fields}}
    />

  """

  use Surface.Component

  alias Surface.Components.Form
  alias Surface.Components.Form.Field
  alias Surface.Components.Form.Label
  alias Surface.Components.Form.TextInput
  alias Surface.Components.Form.Select
  alias Surface.Components.Form.Submit

  alias LiveAntd.Components.Card

  # event
  prop(onSubmit, :event)
  prop(onChange, :event)

  # api properties
  prop(fields, :list, required: true)
  prop(filter, :map, default: %{})

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

  def render(assigns) do
    ~H"""
    <Card>
      <Form for={{ :filter }} change={{ @onChange }} submit={{ @onSubmit }} opts={{ autocomplete: "true", class: "ant-form ant-form-horizontal" }}>
        <div class="ant-row">
          <div class="ant-col ant-col-6" style="margin-right: 12px" :for={{ item <- @fields }}>
            <Field name={{ :"#{item.name}" }}>
              <div class="ant-form-item-label">
                <Label>{{ item.title }}</Label>
              </div>
              <div class="ant-form-item-control">
                <TextInput value={{Map.get(@filter, item.name)}} />
              </div>
            </Field>
          </div>
          <div class="ant-col ant-col-6" style="margin-right: 12px">
            <Field name="submit">
              <Submit class="ant-btn ant-btn-primary"><span>提交</span></Submit>
            </Field>
          </div>
        </div>
      </Form>
    </Card>
    """
  end

  # def get_field_control(assigns, item) do
  #   case item.component do
  #     "TextInput" -> do_text_intput_view(assigns, item)
  #     "Select" -> do_select_view(assigns, item)
  #     _ -> do_text_intput_view(assigns, item)
  #   end
  # end

  # defp do_select_view(assigns, item) do
  #   ~H"""
  #     <Select options={{ item.options }} />
  #   """
  # end

  # defp do_text_intput_view(assigns, item) do
  #   ~H"""
  #     <TextInput value={{Map.get(@record, item.name)}} />
  #   """
  # end
end