defmodule FreediveWeb.HomeLive do
  use FreediveWeb.LiliformLive

  def render(assigns) do
    ~H"""
    <.page name="Home" filters={@filters} details={@details}>
      <FreediveWeb.HomeLive.Components.items_block
        items={@items}
        selected_item={@selected_item}
        details={@details}
      />
    </.page>
    """
  end

  def on_mount_connected(socket) do
    {:ok, socket}
  end

  def items() do
    %{
      "services" => %{
        name: "Services",
        path: "/services",
        icon: "blocks",
        description: "Manage system services",
        system: true,
        account: false,
        compute: false,
        storage: false,
        network: false
      },
      "accounts" => %{
        name: "Account settings",
        path: "/users/settings",
        icon: "user-cog",
        description: "Manage user accounts",
        system: false,
        account: true,
        compute: false,
        storage: false,
        network: false
      }
    }
  end

  def filters() do
    [
      %{
        title: "System",
        key: :system,
        icon: "system",
        active: true
      },
      %{
        title: "Account",
        key: :account,
        icon: "account",
        active: false
      }
      # %{
      #   title: "Compute",
      #   key: :compute,
      #   icon: "compute",
      #   active: false
      # },
      # %{
      #   title: "Storage",
      #   key: :storage,
      #   icon: "storage",
      #   active: false
      # },
      # %{
      #   title: "Network",
      #   key: :network,
      #   icon: "network",
      #   active: false
      # }
    ]
  end

  def search(items, query) do
    Enum.filter(items, fn {_, item} ->
      String.contains?(String.downcase(item.name), String.downcase(query))
    end)
    |> Enum.into(%{}, fn {name, item} -> {name, item} end)
  end
end

defmodule FreediveWeb.HomeLive.Components do
  use Liliform.Component
  import Liliform.Icon

  def items_block(assigns) do
    ~H"""
    <%= for {_name, item} <- @items do %>
      <.link class="panel-block pt-1" navigate={item.path}>
        <span class="panel-icon">
          <.icon for={item.icon} color="auto" aria-hidden="true" />
        </span>
        <div class="mt-2 ml-2"><%= item.name %></div>
      </.link>
    <% end %>
    """
  end
end