defmodule MvWeb.Layouts.Sidebar do
  @moduledoc """
  Sidebar navigation component used in the drawer layout
  """
  use MvWeb, :html

  attr :current_user, :map, default: nil, doc: "The current user"
  attr :club_name, :string, required: true, doc: "The name of the club"

  def sidebar(assigns) do
    ~H"""
    <div class="drawer-side is-drawer-close:overflow-visible">
      <label for="main-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
      <div class="flex flex-col items-start min-h-full bg-base-200 is-drawer-close:w-14 is-drawer-open:w-64">
        <ul class="w-64 menu">
          <li>
            <h1 class="mb-2 text-lg font-bold menu-title is-drawer-close:hidden">{@club_name}</h1>
          </li>
          <%= if @current_user do %>
            <li>
              <.link
                navigate="/members"
                class={[
                  "is-drawer-close:tooltip is-drawer-close:tooltip-right"
                ]}
                data-tip={gettext("Members")}
              >
                <.icon name="hero-users" class="size-5" />
                <span class="is-drawer-close:hidden">{gettext("Members")}</span>
              </.link>
            </li>
            <li>
              <.link
                navigate="/users"
                class={[
                  "is-drawer-close:tooltip is-drawer-close:tooltip-right"
                ]}
                data-tip={gettext("Users")}
              >
                <.icon name="hero-user-circle" class="size-5" />
                <span class="is-drawer-close:hidden">{gettext("Users")}</span>
              </.link>
            </li>
            <li class="is-drawer-close:hidden">
              <h2 class="flex items-center gap-2 menu-title">
                <.icon name="hero-currency-dollar" class="size-5" />
                {gettext("Contributions")}
              </h2>
              <ul>
                <li class="is-drawer-close:hidden">
                  <.link navigate="/contribution_types">
                    {gettext("Plans")}
                  </.link>
                </li>
                <li class="is-drawer-close:hidden">
                  <.link navigate="/contribution_settings">
                    {gettext("Settings")}
                  </.link>
                </li>
              </ul>
            </li>
            <li>
              <.link
                navigate="/settings"
                class={[
                  "is-drawer-close:tooltip is-drawer-close:tooltip-right"
                ]}
                data-tip={gettext("Settings")}
              >
                <.icon name="hero-cog-6-tooth" class="size-5" />
                <span class="is-drawer-close:hidden">{gettext("Settings")}</span>
              </.link>
            </li>
          <% end %>
        </ul>
      </div>
    </div>
    """
  end
end