defmodule MoonWeb.Components.SearchButton do
  @moduledoc false

  use MoonWeb, :stateful_component

  alias Moon.Design.Search
  alias Moon.Design.Dropdown

  import Moon.Helpers.Form, only: [filter_options: 2, input_classes_light: 1]

  prop(options, :list, default: MoonWeb.Schema.Link.titles())
  prop(filter, :string, default: "")
  prop(on_keyup, :event)

  def handle_event("change_filter", %{"value" => filter}, socket) do
    {:noreply, assign(socket, filter: filter)}
  end

  def render(assigns) do
    ~F"""
    <div>
      <Search
        id="moon-search"
        {=@filter}
        on_keyup="change_filter"
        options={@options |> page_to_href() |> filter_options(@filter)}
        class="focus:bg-heles"
      >
        <:trigger :let={is_open: is_open}>
          <Dropdown.Input
            placeholder="Search..."
            on_keyup="change_filter"
            value={@filter}
            class={
              "ps-[2.5rem] bg-goku hover:border-trunks h-10",
              input_classes_light(assigns),
              "rounded-bl-none rounded-br-none": is_open
            }
          >
            <Search.Icon class="start-[9px] text-moon-24" />
            <Search.Button on_click={@on_keyup} />
          </Dropdown.Input>
        </:trigger>
      </Search>
    </div>
    """
  end

  defp page_to_href(options) do
    options |> Enum.map(&Keyword.put(&1, :page, live_path(MoonWeb.Endpoint, &1[:page])))
  end
end