defmodule Liliform.Page do
  use Liliform.Component
  import Liliform.Block
  import Liliform.Icon
  import Liliform.Panel
  import Liliform.Control

  @doc """
  Renders a panel as page.
  """
  attr :name, :string, required: true, doc: "page name"
  attr :class, :string, default: "", doc: "additional classes"
  attr :filters, :list, default: [], doc: "filters"
  attr :details, :string, default: nil, doc: "details"
  attr :query, :string, default: "", doc: "search query"
  attr :rest, :global

  slot :inner_block, required: true

  def page(assigns) do
    assigns =
      assigns
      |> set_bulma_classes()

    ~H"""
    <.block class="px-2 py-4">
      <.panel class={@class} {@rest} is-info>
        <.panel_heading>
          <%= @name %>
        </.panel_heading>

        <%= if @details == nil do %>
          <.panel_tabs is-hidden-mobile>
            <%= for filter <- @filters do %>
              <a
                class={if filter.active, do: "is-active"}
                phx-click="filter"
                phx-value-key={filter.key}
              >
                <%= filter.title %>
              </a>
            <% end %>
          </.panel_tabs>

          <.panel_tabs is-hidden-tablet>
            <%= for filter <- @filters do %>
              <a
                title={filter.title}
                class={if filter.active, do: "is-active"}
                phx-click="filter"
                phx-value-key={filter.key}
              >
                <.icon for={filter.icon} color="auto" />
              </a>
            <% end %>
          </.panel_tabs>
        <% end %>
        <.panel_block>
          <.control has-icons-left>
            <input
              class="input is-info"
              type="text"
              placeholder="Search"
              name="search"
              value={@query}
              phx-keyup="search"
            />
            <.icon for="search" size="1.5rem" aria-hidden="true" is-left />
          </.control>
        </.panel_block>
        <%= render_slot(@inner_block) %>
      </.panel>
    </.block>
    """
  end
end