defmodule MvWeb.Layouts.Navbar do
  @moduledoc """
  Navbar that is used in the rootlayout shown on every page
  """
  use Phoenix.Component
  use Gettext, backend: MvWeb.Gettext
  use MvWeb, :verified_routes

  attr :current_user, :map,
    required: true,
    doc: "The current user - navbar is only shown when user is present"

  def navbar(assigns) do
    ~H"""
    <header class="navbar bg-base-100 shadow-sm">
      <div class="flex-1">
        <a class="btn btn-ghost text-xl">Mitgliederverwaltung</a>
        <ul class="menu menu-horizontal bg-base-200">
          <li><.link navigate="/members">{gettext("Members")}</.link></li>
          <li><.link navigate="/users">{gettext("Users")}</.link></li>
        </ul>
      </div>
      <div class="flex gap-2">
        <form method="post" action="/set_locale" class="mr-4">
          <input type="hidden" name="_csrf_token" value={Plug.CSRFProtection.get_csrf_token()} />
          <label class="sr-only" for="locale-select">{gettext("Select language")}</label>
          <select
            id="locale-select"
            name="locale"
            onchange="this.form.submit()"
            class="select select-sm"
            aria-label={gettext("Select language")}
          >
            <option value="de" selected={Gettext.get_locale() == "de"}>Deutsch</option>
            <option value="en" selected={Gettext.get_locale() == "en"}>English</option>
          </select>
        </form>
        <!-- Daisy UI Theme Toggle for dark and light mode-->
        <label class="flex cursor-pointer gap-2" aria-label={gettext("Toggle dark mode")}>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            aria-hidden="true"
          >
            <circle cx="12" cy="12" r="5" />
            <path d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4" />
          </svg>
          <input
            type="checkbox"
            value="dark"
            class="toggle theme-controller"
            aria-label={gettext("Toggle dark mode")}
          />
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            aria-hidden="true"
          >
            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
          </svg>
        </label>
        <div class="dropdown dropdown-end">
          <div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar avatar-placeholder">
            <div class="bg-neutral text-neutral-content w-12 rounded-full">
              <span>AA</span>
            </div>
          </div>
          <ul
            tabindex="0"
            class="menu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow"
          >
            <li>
              <.link navigate={~p"/users/#{@current_user.id}"}>
                {gettext("Profil")}
              </.link>
            </li>
            <li><a>{gettext("Settings")}</a></li>
            <li>
              <.link href={~p"/sign-out"}>{gettext("Logout")}</.link>
            </li>
          </ul>
        </div>
      </div>
    </header>
    """
  end
end