surface_bulma

defmodule SurfaceBulma.Catalogue.Form.Example04 do
  @moduledoc ""
  use Surface.Catalogue.Example,
    subject: SurfaceBulma.Form,
    catalogue: SurfaceBulma.Catalogue,
    title: "Various form controls",
    height: "1000px"

  alias SurfaceBulma.Form.{
    ColorInput,
    DateInput,
    DateTimeLocalInput,
    NumberInput,
    PasswordInput,
    RangeInput,
    Select
  }

  alias SurfaceBulma.{Button}
  alias Surface.Components.{Form}
  alias SurfaceBulma.Catalogue.Form.SampleModel

  data(changeset, :map,
    default:
      SampleModel.changeset(%SampleModel{}, %{
        "username" => "bulma",
        "email" => "hello@"
      })
      |> Map.put(:action, :insert)
  )

  def render(assigns) do
    ~F"""
    <Form
    for={@changeset}
    change={"change"}
    submit={"submit"}
    opts={autocomplete: "off"}>
    <ColorInput
      field={:example_04_color}
      label="Color"
      placeholder="Text input"
      value="#c33c3c">
      <:right_addon>
      <Button color="primary" >Select</Button>
      </:right_addon>
    </ColorInput>
    <DateInput
      field={:example_04_date}
      label="Datetime local"/>
    <DateTimeLocalInput
      field={:example_04_datetime_local}
      label="Date"
      step="3600"
      />
    <Select
      field={:example_04_multiple_select}
      options={
        [
          "Option 1",
          "Option 2",
          "Option 3"
        ]
      }
      multiple
      expanded
      rounded/>
      <NumberInput
        field={:example_04_number}
        step="5"/>
      <PasswordInput
        field={:example_04_password}
        placeholder="Your password"
        icon_left="key"/>
      <RangeInput
        field={:example_04_range}
        min="0"
        max="10"
        value="7"
        label="Range"/>
    </Form>
    """
  end

  def handle_event("change", %{"sample_model" => changes}, socket) do
    cs =
      SampleModel.changeset(%SampleModel{}, changes)
      |> Map.put(:action, :insert)

    socket = assign(socket, :changeset, cs)
    {:noreply, socket}
  end
end