From 10fd6952f4e4560a0b05f60df43d0deacd98f3a1 Mon Sep 17 00:00:00 2001
From: Luc Vachon <lvachon1@mbta.com>
Date: Wed, 8 Jul 2026 15:36:49 -0400
Subject: [PATCH] Initial commit of my attempt to create a LiveComponent
 autocomplete thingy for the location search.  I'm still learning about all
 the liveview/livecomponent stuff and any differences between them.

---
 lib/dotcom_web/components/location_search.ex  | 112 ++++++++++++++++++
 .../components/trip_planner/input_form.ex     |  46 +++----
 2 files changed, 138 insertions(+), 20 deletions(-)
 create mode 100644 lib/dotcom_web/components/location_search.ex

diff --git a/lib/dotcom_web/components/location_search.ex b/lib/dotcom_web/components/location_search.ex
new file mode 100644
index 0000000000..d48b84ef4e
--- /dev/null
+++ b/lib/dotcom_web/components/location_search.ex
@@ -0,0 +1,112 @@
+defmodule DotcomWeb.Components.LocationSearch do
+  @moduledoc """
+  A live component that renders a date picker using Flatpickr.
+
+  You must pass in the following assigns:
+
+    * `:id`
+    * `:field` - A form field struct retrieved from a form, for example: @form[:datetime].
+    * `:label`
+
+  You can optionally pass in a `:config` map:
+    * `:default_date` - The default date that should be selected.
+    * `:enable_time` - A boolean that determines if the time picker should be enabled.
+    * `:locale` - A two letter localization code like "es" or "zh."
+    * `:max_date` - The maximum date that can be selected.
+    * `:min_date` - The minimum date that can be selected.
+  """
+
+  use Phoenix.LiveComponent
+
+  @mockResults [
+    %{
+      name: "Park Street",
+      stop_id: "place-prktm",
+      lat: 42,
+      lon: -71,
+      features: [],
+      city: "Boston",
+      state: "MA"
+    }
+  ]
+  def mount(socket) do
+    config = Map.get(socket.assigns, :config, %{})
+    {locale, new_config} = Map.pop(config, :locale, "en")
+
+    new_socket =
+      assign(socket, config: new_config, locale: locale)
+      |> assign(:name, nil)
+      |> assign(:lat, nil)
+      |> assign(:lon, nil)
+      |> assign(:stop_id, nil)
+      |> assign(:query, nil)
+      |> assign(:value, nil)
+      |> assign(:results, [])
+
+    {:ok, new_socket}
+  end
+
+  @doc """
+  Renders the date picker component.
+  """
+  def render(assigns) do
+    dbg(assigns.value)
+
+    ~H"""
+    <div class="location_search--container">
+      <input
+        value={@value}
+        name={@name}
+        phx-change="query"
+        id={@id}
+        phx-target={@myself}
+      />
+      <div class="location_search--results_list" id={@id<>"--results"}>
+        <ul :if={@results |> Enum.count() > 0}>
+          <li
+            :for={result <- @results}
+            phx-click={Phoenix.LiveView.JS.push("choose", value: result)}
+            phx-target={@myself}
+          >
+            {result.name}
+          </li>
+        </ul>
+      </div>
+    </div>
+    """
+  end
+
+  def handle_event("query", %{"input_form" => %{"to" => value}}, socket) do
+    {:noreply,
+     socket
+     |> assign(:query, value)
+     |> assign(:value, value)
+     |> assign(:results, @mockResults)}
+  end
+
+  def handle_event("query", %{"input_form" => %{"from" => value}}, socket) do
+    {:noreply,
+     socket
+     |> assign(:query, value)
+     |> assign(:value, value)
+     |> assign(:results, @mockResults)}
+  end
+
+  def assign_params(socket, params) do
+    socket
+    |> assign(:value, params["name"])
+    |> assign(:lat, params["lat"])
+    |> assign(:lon, params["lon"])
+    |> assign(:stop_id, params["stop_id"])
+  end
+
+  def handle_event("choose", params, socket) do
+    dbg(params)
+    {:noreply, socket |> assign(:results, []) |> assign_params(params)}
+  end
+
+  def handle_event(event, params, socket) do
+    dbg({event, params})
+    {:noreply, socket}
+  end
+end
diff --git a/lib/dotcom_web/components/trip_planner/input_form.ex b/lib/dotcom_web/components/trip_planner/input_form.ex
index 6ddc113657..d2a9411c17 100644
--- a/lib/dotcom_web/components/trip_planner/input_form.ex
+++ b/lib/dotcom_web/components/trip_planner/input_form.ex
@@ -157,26 +157,32 @@ defmodule DotcomWeb.Components.TripPlanner.InputForm do
     ~H"""
     <fieldset class={"mb-sm -mt-md #{if(@has_error?, do: "text-danger")}"} id={"#{@name}-wrapper"}>
       <legend class="text-charcoal-40 m-0 py-sm">{@field_label}</legend>
-      <.algolia_autocomplete config_type="trip-planner" placeholder={@placeholder} id={@name}>
-        <.inputs_for :let={location_f} field={@field} skip_hidden={true}>
-          <input
-            :for={subfield <- @location_keys}
-            type="hidden"
-            id={location_f[subfield].id}
-            value={location_f[subfield].value}
-            name={location_f[subfield].name}
-          />
-        </.inputs_for>
-        <.feedback :for={{msg, _} <- @field.errors} :if={@has_error?} kind={:error}>
-          <label
-            aria-live
-            role="alert"
-            for={if @field.field == :from, do: "autocomplete-2-input", else: "autocomplete-3-input"}
-          >
-            {msg}
-          </label>
-        </.feedback>
-      </.algolia_autocomplete>
+      <.live_component
+        module={DotcomWeb.Components.LocationSearch}
+        locale={Gettext.get_locale(Dotcom.Gettext)}
+        field={@field}
+        id={@field.id}
+        name={@field.name}
+      />
+
+      <.inputs_for :let={location_f} field={@field} skip_hidden={true}>
+        <input
+          :for={subfield <- @location_keys}
+          type="hidden"
+          id={location_f[subfield].id}
+          value={location_f[subfield].value}
+          name={location_f[subfield].name}
+        />
+      </.inputs_for>
+      <.feedback :for={{msg, _} <- @field.errors} :if={@has_error?} kind={:error}>
+        <label
+          aria-live
+          role="alert"
+          for={if @field.field == :from, do: "autocomplete-2-input", else: "autocomplete-3-input"}
+        >
+          {msg}
+        </label>
+      </.feedback>
     </fieldset>
     """
   end