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

  attr :current_user, :map, default: nil

  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><a href="/members">{gettext("Members")}</a></li>
          <li><a>Transaktionen</a></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()} />
          <select name="locale" onchange="this.form.submit()" class="select select-sm">
            <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">
          <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"
          >
            <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" />
          <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"
          >
            <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>
              <a :if={@current_user} href={"/users/#{@current_user.id}"}>
                {gettext("Profil")}
              </a>
            </li>
            <li><a>{gettext("Settings")}</a></li>
            <li><a href="sign-out">{gettext("Logout")}</a></li>
          </ul>
        </div>
      </div>
    </header>
    """
  end
end