defmodule MvWeb.Components.SearchBarComponent do
  @moduledoc """
  Provides the SearchBar Live-Component.

  - uses the DaisyUI search input field
  - sends search_changed event to parent live view with a query
  """
  use MvWeb, :live_component

  @impl true
  def update(_assigns, socket) do
    socket =
      socket
      |> assign_new(:query, fn -> "" end)
      |> assign_new(:placeholder, fn -> gettext("Search...") end)

    {:ok, socket}
  end

  @impl true
  def render(assigns) do
    ~H"""
    <form phx-change="search" phx-target={@myself} class="flex" role="search" aria-label="Search">
      <label class="input">
        <svg
          class="h-[1em] opacity-50"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          aria-hidden="true"
        >
          <g
            stroke-linejoin="round"
            stroke-linecap="round"
            stroke-width="2.5"
            fill="none"
            stroke="currentColor"
          >
            <circle cx="11" cy="11" r="8"></circle>
            <path d="m21 21-4.3-4.3"></path>
          </g>
        </svg>
        <input
          type="search"
          placeholder={@placeholder}
          value={@query}
          name="query"
          phx-debounce="300"
        />
      </label>
    </form>
    """
  end

  @impl true
  # Function to handle the search
  def handle_event("search", %{"query" => q}, socket) do
    # Forward a high level message to the parent
    send(self(), {:search_changed, q})
    {:noreply, assign(socket, :query, q)}
  end
end