<script lang="ts">
  import { goto } from '$app/navigation'
  import { persistentSettings } from '$lib/persistent-store'
  import i18n from '$lib/i18n'
  let { children } = $props()

  if (!$persistentSettings.loggedIn) {
    goto('/login')
  }

  let drawerOpen = $state(false)
</script>

<div class="w-full h-full p-4 flex flex-col bg-base-200">
  <div class="navbar w-auto mb-4 pr-4 bg-base-100 shadow-md rounded-md">
    <div class="drawer navbar-start">
      <input bind:checked={drawerOpen} id="nav-drawer" type="checkbox" class="drawer-toggle" />
      <div class="drawer-content">
        <label for="nav-drawer" class="btn btn-ghost btn-circle drawer-button">
          <i class="bi bi-list text-2xl"></i>
        </label>
      </div>
      <div class="drawer-side z-10">
        <label for="nav-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
        <ul class="menu bg-base-100 text-base min-h-full w-80 p-4">
          <li class="mb-4">
            <a class="btn btn-ghost text-xl" href="/">LibreCharge</a>
          </li>
          <li>
            <a
              onclick={() => {
                drawerOpen = !drawerOpen
              }}
              href="/"
            >
              <i class="bi bi-graph-up text-xl"></i>
              <span>Dashboard</span>
            </a>
          </li>
          <li>
            <a
              onclick={() => {
                drawerOpen = !drawerOpen
              }}
              href="/idtoken"
            >
              <i class="bi bi-credit-card-fill text-xl"></i>
              <span>{$i18n.t('common:navbar.link.idtoken')}</span>
            </a>
          </li>
          <li>
            <a
              onclick={() => {
                drawerOpen = !drawerOpen
              }}
              href="/transaction"
            >
              <i class="bi bi-battery-charging text-xl"></i>
              <span>{$i18n.t('common:navbar.link.transaction')}</span>
            </a>
          </li>
          <li>
            <a
              onclick={() => {
                drawerOpen = !drawerOpen
              }}
              href="/chargepoint"
            >
              <i class="bi bi-plug-fill text-xl"></i>
              <span>{$i18n.t('common:navbar.link.chargepoint')}</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div class="navbar-center">
      <a class="btn btn-ghost text-xl" href="/">LibreCharge</a>
    </div>
    <div class="navbar-end">
      <div class="dropdown dropdown-end">
        <div tabindex="0" role="button" class="btn btn-ghost btn-circle">
          <i class="bi bi-person-circle text-2xl"></i>
        </div>
        <ul
          tabindex="-1"
          class="menu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow"
        >
          <li><a href="/profile">{$i18n.t('common:navbar.link.profile')}</a></li>
          <li><a href="/login?logout">{$i18n.t('common:navbar.link.logout')}</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="w-full h-full flex flex-col">
    {@render children()}
  </div>
</div>
