Autocomplete

<.autocomplete
  name="provider"
  label="Watch Provider"
  options={[
    {"Netflix", "netflix"},
    {"Amazon Prime Video", "amazon"},
    {"HBO Max", "hbo"}
  ]}
/>

<div class="w-[400px]">
  <.autocomplete
    name="autocomplete_role"
    label="Job Role"
    sublabel="Select your primary role"
    description="Choose your role to customize your experience"
    help_text="Affects available features and reports"
    options={[
      {"Software Engineer", "engineer"},
      {"Product Manager", "product_manager"},
      {"UX Designer", "designer"},
      {"Data Analyst", "analyst"},
      {"Marketing Manager", "marketing"},
      {"Sales Representative", "sales"},
      {"Human Resources", "hr"},
      {"Project Manager", "project_manager"}
    ]}
  />
</div>

<.autocomplete
  name="genre_xs"
  size="xs"
  label="Genre (XS)"
  placeholder="Extra small size"
  options={[
    {"Action", "action"},
    {"Comedy", "comedy"},
    {"Drama", "drama"}
  ]}
/>

<.autocomplete
  name="genre_lg"
  size="lg"
  label="Genre (LG)"
  placeholder="Large size"
  options={[
    {"Action", "action"},
    {"Comedy", "comedy"},
    {"Drama", "drama"}
  ]}
/>

<.autocomplete
  name="string_options"
  label="Movie Themes (String)"
  placeholder="Search themes..."
  options={[
    "Love",
    "Revenge",
    "Redemption",
    "Coming of Age",
    "Good vs Evil"
  ]}
/>

<.autocomplete
  name="tuple_options"
  label="Movie Franchises (Tuple)"
  placeholder="Search franchises..."
  options={[
    {"Marvel Cinematic Universe", "mcu"},
    {"DC Extended Universe", "dceu"},
    {"Star Wars", "star_wars"}
  ]}
/>

<div class="w-[300px]">
  <.autocomplete
    name="framework"
    label="Frontend Framework"
    placeholder="Search frameworks..."
    options={[
      [key: "React", value: "react"],
      [key: "Vue", value: "vue"],
      [key: "Angular", value: "angular", disabled: true],
      [key: "Svelte", value: "svelte"],
      [key: "Ember", value: "ember", disabled: true],
      [key: "Solid", value: "solid"]
    ]}
  />
</div>

<.autocomplete
  name="contains_search"
  label="Contains Search"
  search_mode="contains"
  placeholder="Type any part of the movie title..."
  options={[
    {"The Dark Knight", "dark_knight"},
    {"Batman Begins", "batman_begins"},
    {"The Dark Knight Rises", "dark_knight_rises"}
  ]}
/>

<.autocomplete
  name="starts_with_search"
  label="Starts With Search"
  search_mode="starts-with"
  placeholder="Type beginning of movie title..."
  options={[
    {"The Dark Knight", "dark_knight"},
    {"The Avengers", "avengers"},
    {"The Matrix", "matrix"}
  ]}
/>

<.autocomplete
  name="threshold_0"
  label="Immediate Search"
  search_threshold={0}
  placeholder="Search immediately..."
  options={[
    {"Robert Downey Jr.", "rdj"},
    {"Chris Evans", "chris_evans"},
    {"Scarlett Johansson", "scarlett"}
  ]}
/>

<.autocomplete
  name="threshold_3"
  label="3 Character Minimum"
  search_threshold={3}
  placeholder="Type 3+ characters..."
  options={[
    {"Christian Bale", "christian_bale"},
    {"Margot Robbie", "margot_robbie"},
    {"Ryan Gosling", "ryan_gosling"}
  ]}
/>

<.autocomplete
  name="genre"
  label="Genre"
  search_mode="starts-with"
  options={[
    {"Action", "action"},
    {"Comedy", "comedy"},
    {"Drama", "drama"}
  ]}
/>

<.autocomplete
  name="movie"
  label="Movies"
  class="max-w-[400px] max-h-[400px]"
  options={Enum.map(@movies, &{&1.title, &1.id})}
  on_search="search_movies"
/>

<!--
# LiveView implementation example:
def mount(socket) do
  {:ok,
   socket
   |> assign(movies: [])
   |> start_async(:initial_movies, fn -> MyApp.Movies.search("batman") end)}
end

def handle_async(:initial_movies, {:ok, movies}, socket) do
  {:noreply, assign(socket, movies: movies)}
end

def handle_event("search_movies", %{"query" => query}, socket) do
  {:ok, movies} = MyApp.Movies.search(query)
  {:noreply, socket |> assign(movies: movies)}
end
-->

<.autocomplete
  name="location_search"
  label="Filming Location"
  placeholder="Search filming locations..."
  debounce={1000}
  options={@location_options}
  on_search="search_locations"
/>

<!--
def handle_event("search_locations", %{"query" => query}, socket) do
  send(self(), {:search_locations, query})
  {:noreply, socket |> assign(searching_locations: true)}
end

def handle_info({:search_locations, query}, socket) do
  locations = YourApp.Movies.search_locations(query)
  {:noreply, socket |> assign(location_options: locations, searching_locations: false)}
end
-->

<div class="w-[300px]">
  <.autocomplete
    name="grouped_country"
    label="Production Company"
    options={[
      {"United States",
       [
         {"Walt Disney Pictures", "disney"},
         {"Warner Bros. Pictures", "warner"},
         {"Universal Pictures", "universal"},
         {"Paramount Pictures", "paramount"}
       ]},
      {"United Kingdom",
       [
         {"Working Title Films", "working_title"},
         {"BBC Films", "bbc"},
         {"Film4 Productions", "film4"}
       ]},
      {"Japan",
       [
         {"Studio Ghibli", "ghibli"},
         {"Toho Studios", "toho"}
       ]}
    ]}
  />
</div>

<div class="space-y-6">
  <div class="w-[300px]">
    <.autocomplete
      name="with_inner_prefix"
      label="Inner Prefix"
      placeholder="Search streaming services..."
      options={[
        {"Netflix", "netflix"},
        {"Disney+", "disney"},
        {"HBO Max", "hbo"},
        {"Amazon Prime", "amazon"},
        {"Apple TV+", "apple"}
      ]}
    >
      <:inner_prefix>
        <.icon name="hero-magnifying-glass" class="icon" />
      </:inner_prefix>
    </.autocomplete>
  </div>

  <div class="w-[300px]">
    <.autocomplete
      name="with_outer_prefix"
      label="Outer Prefix (Button)"
      placeholder="Search streaming services..."
      options={[
        {"Netflix", "netflix"},
        {"Disney+", "disney"},
        {"HBO Max", "hbo"},
        {"Amazon Prime", "amazon"},
        {"Apple TV+", "apple"}
      ]}
    >
      <:outer_prefix class="px-2 font-semibold text-foreground bg-accent/50">
        Service
      </:outer_prefix>
    </.autocomplete>
  </div>

  <div class="w-[300px]">
    <.autocomplete
      name="with_inner_suffix"
      label="Inner Suffix"
      placeholder="Choose streaming service..."
      options={[
        {"Netflix", "netflix"},
        {"Disney+", "disney"},
        {"HBO Max", "hbo"},
        {"Amazon Prime", "amazon"},
        {"Paramount+", "paramount"}
      ]}
    >
      <:inner_suffix>
        <.icon name="hero-tv" class="icon" />
      </:inner_suffix>
    </.autocomplete>
  </div>

  <div class="w-[300px]">
    <.autocomplete
      name="with_outer_suffix"
      label="Outer Suffix (Text)"
      placeholder="Choose streaming service..."
      options={[
        {"Netflix", "netflix"},
        {"Disney+", "disney"},
        {"HBO Max", "hbo"},
        {"Amazon Prime", "amazon"},
        {"Paramount+", "paramount"}
      ]}
    >
      <:outer_suffix>
        <.button>
          <.icon name="hero-plus" class="icon" /> Add
        </.button>
      </:outer_suffix>
    </.autocomplete>
  </div>

  <div class="w-[300px]">
    <.autocomplete
      name="with_both_inner_affixes"
      label="Both Inner Affixes"
      placeholder="Search movie platforms..."
      options={[
        {"Netflix", "netflix"},
        {"Disney+", "disney"},
        {"HBO Max", "hbo"},
        {"Amazon Prime", "amazon"}
      ]}
    >
      <:inner_prefix>
        <.icon name="hero-magnifying-glass" class="icon" />
      </:inner_prefix>
      <:inner_suffix>
        <.icon name="hero-play" class="icon" />
      </:inner_suffix>
    </.autocomplete>
  </div>
</div>

<div class="w-[300px]">
  <.autocomplete
    name="studio"
    label="Film Studio"
    options={[
      {"Warner Bros.", "warner"},
      {"Universal Pictures", "universal"},
      {"Paramount Pictures", "paramount"},
      {"Walt Disney Studios", "disney"},
      {"Sony Pictures", "sony"},
      {"20th Century Studios", "20th_century"},
      {"A24", "a24"},
      {"Lionsgate", "lionsgate"}
    ]}
  >
    <:header class="p-2 text-sm text-zinc-500 pb-0">
      <.button size="xs" class="rounded-full">Major Studios</.button>
      <.button size="xs" class="rounded-full">Independent</.button>
      <.button size="xs" class="rounded-full">Animation</.button>
    </:header>
    <:footer class="p-2 border-t border-zinc-200 text-center">
      <.button type="button" size="sm" class="w-full">
        <.icon name="hero-plus" class="icon" /> Add Studio
      </.button>
    </:footer>
  </.autocomplete>
</div>

<.autocomplete field={f[:user_id]} options={Enum.map(@users, &{&1.full_name, &1.id})} on_search="search_users">
  <:option :let={{label, value}}>
    <div class="flex items-center gap-3 p-2 rounded-lg in-data-highlighted:bg-zinc-100 in-data-selected:bg-blue-100">
      <img src={"https://i.pravatar.cc/150?u=#{value}"} class="size-8 rounded-full" />
      <div>
        <div class="font-medium text-sm">{label}</div>
        <div class="text-xs text-zinc-500">{user_by_id(value, @users).email}</div>
      </div>
    </div>
  </:option>
</.autocomplete>

<.modal id="new-department">
  <!-- form submits to save_department -->
</.modal>

<.form for={@form} phx-submit="save">
  <.autocomplete
    field={@form[:department]}
    label="Department"
    placeholder="Select a department"
    description="Search company departments"
    options={@departments}
  >
    <:empty_state>
      <.button class="w-full" variant="ghost" size="sm" type="button" phx-click={Fluxon.open_dialog("new-department")}>
        <.icon name="hero-plus" class="size-4" /> Create new department
      </.button>
    </:empty_state>
  </.autocomplete>
</.form>

<!--
def handle_event("save_department", %{"name" => name}, socket) do
  departments = [...] # Save and update the list to include the new department.
  form = to_form(...) # Update the form to reflect the newly created department.

  {:noreply,
    socket
    |> assign(departments: departments, form: form)
    |> Fluxon.close_dialog("new-department")}
end
-->

<div class="w-[300px]">
  <.autocomplete
    name="disabled"
    label="Disabled Autocomplete"
    placeholder="Cannot interact..."
    disabled
    options={[
      {"Academy Award", "oscar"},
      {"Golden Globe", "golden_globe"},
      {"BAFTA", "bafta"},
      {"Screen Actors Guild", "sag"},
      {"Critics Choice", "critics_choice"}
    ]}
  />
</div>

<div class="w-[300px]">
  <.autocomplete
    name="director"
    label="Director"
    value="nolan"
    clearable
    options={[
      {"Christopher Nolan", "nolan"},
      {"Steven Spielberg", "spielberg"},
      {"Quentin Tarantino", "tarantino"},
      {"Martin Scorsese", "scorsese"},
      {"Greta Gerwig", "gerwig"},
      {"Denis Villeneuve", "villeneuve"},
      {"Wes Anderson", "anderson"},
      {"Bong Joon-ho", "bong"}
    ]}
  />
</div>

<div class="w-[300px]">
  <.autocomplete
    name="cinematographer"
    label="Cinematographer"
    open_on_focus
    options={[
      {"Roger Deakins", "deakins"},
      {"Emmanuel Lubezki", "lubezki"},
      {"Robert Richardson", "richardson"},
      {"Janusz Kamiński", "kaminski"},
      {"Rachel Morrison", "morrison"},
      {"Hoyte van Hoytema", "hoytema"},
      {"Darius Khondji", "khondji"},
      {"Bradford Young", "young"}
    ]}
  />
</div>

<.form :let={f} for={@form} phx-change="validate" phx-submit="save">
  <.autocomplete
    field={f[:genre]}
    label="Movie Genre"
    options={@genres}
    placeholder="Select genre..."
  />

  <.autocomplete
    field={f[:studio]}
    label="Production Studio"
    options={@studios}
    placeholder="Choose studio..."
  />

  <.button type="submit">Save Movie</.button>
</.form>

<!--
def handle_event("validate", params, socket) do
  changeset = MyApp.Movies.change_movie(%MyApp.Movies.Movie{}, params)
  {:noreply, assign(socket, changeset: changeset)}
end
-->

<.autocomplete
  name="with_error"
  label="Movie Rating"
  placeholder="Select rating..."
  options={[
    {"G - General Audiences", "g"},
    {"PG - Parental Guidance", "pg"},
    {"PG-13 - Parents Strongly Cautioned", "pg13"}
  ]}
  errors={["This field is required"]}
/>

<.autocomplete
  name="multiple_errors"
  label="Content Advisory"
  placeholder="Choose carefully..."
  options={[
    {"No Advisory", "none"},
    {"Mild Language", "mild"},
    {"Strong Language", "strong"}
  ]}
  errors={["This field is required", "Please select a valid content advisory"]}
/>