---
import '@styles/adminLayout.css';
import BaseLayout from '../BaseLayout.astro';
import { ClientRouter } from 'astro:transitions';
import Popup from '@components/popup/Popup.svelte';
import ConfirmPopup from '@components/popup/ConfirmPopup.svelte';
import { Session } from '@util/session.ts';

interface Props {
  title: string;
}

const { title } = Astro.props;

const session = Session.sessionFromCookies(Astro.cookies);

const preTabs = [
  {
    href: '',
    name: 'Startseite',
    iconClass: 'iconify-[heroicons--computer-desktop-20-solid]'
  }
];
const adminTabs = [
  {
    href: 'admin/users',
    name: 'Registrierte Nutzer',
    iconClass: 'iconify-[heroicons--user]',
    subTabs: [
      {
        href: 'admin/users/direct_invitations',
        name: 'Direkte Einladungen',
        iconClass: 'iconify-[heroicons--envelope]'
      },
      {
        href: 'admin/users/blocked',
        name: 'Blockierte Nutzer',
        iconClass: 'iconify-[heroicons--user-minus]'
      }
    ],
    enabled: session?.permissions.users
  },
  {
    href: 'admin/reports',
    name: 'Reports',
    iconClass: 'iconify-[heroicons--flag]',
    enabled: session?.permissions.reports
  },
  {
    href: 'admin/feedback',
    name: 'Feedback',
    iconClass: 'iconify-[heroicons--book-open]',
    enabled: session?.permissions.feedback
  },
  {
    href: 'admin/admins',
    name: 'Website Admins',
    iconClass: 'iconify-[heroicons--code-bracket-16-solid]',
    subTabs: [
      {
        href: 'admin/admins/strike_reasons',
        name: 'Strikegründe',
        iconClass: 'iconify-[heroicons--shield-exclamation]'
      }
    ],
    enabled: session?.permissions.admin
  },
  {
    href: 'admin/settings',
    name: 'Einstellungen',
    iconClass: 'iconify-[heroicons--adjustments-horizontal]',
    enabled: session?.permissions.settings
  },
  {
    href: 'admin/tools',
    name: 'Tools',
    iconClass: 'iconify-[heroicons--wrench-screwdriver]',
    enabled: session?.permissions.tools
  }
];
---

<BaseLayout title={title}>
  <ClientRouter />
  <div class="flex flex-row max-h-screen h-screen overflow-hidden">
    <div class="bg-base-200 w-72 flex flex-col justify-between overflow-scroll">
      <ul class="menu">
        {
          preTabs.map((tab) => (
            <li>
              <a href={tab.href}>
                <span class="iconify" class:list={tab.iconClass} />
                <span>{tab.name}</span>
              </a>
            </li>
          ))
        }
        <div class="divider mx-1 my-1"></div>
        {
          adminTabs.map(
            (tab) =>
              tab.enabled && (
                <li>
                  <a href={tab.href}>
                    <span class="iconify" class:list={tab.iconClass} />
                    <span>{tab.name}</span>
                  </a>
                  {tab.subTabs && (
                    <ul>
                      {tab.subTabs.map((subTab) => (
                        <li>
                          <a href={subTab.href}>
                            <span class="iconify" class:list={subTab.iconClass} />
                            <span>{subTab.name}</span>
                          </a>
                        </li>
                      ))}
                    </ul>
                  )}
                </li>
              )
          )
        }
      </ul>
      <ul class="menu w-full">
        {
          Astro.slots.has('actions') && (
            <fieldset class="fieldset bg-base-300 border-base-100 rounded-box border p-2">
              <slot name="actions" />
            </fieldset>
          )
        }
        <div class="divider mx-1 my-0"></div>
        <li>
          <button id="logout">
            <span class="iconify iconify-[heroicons--arrow-left-end-on-rectangle]"></span>
            <span>Ausloggen</span>
          </button>
        </li>
      </ul>
    </div>

    <div class="w-full overflow-scroll relative">
      <slot />
    </div>
  </div>
</BaseLayout>

<Popup client:idle />
<ConfirmPopup client:idle />

<script>
  import { actions } from 'astro:actions';

  document.addEventListener('astro:page-load', () => {
    const logout = document.getElementById('logout') as HTMLButtonElement;
    logout.addEventListener('click', async () => {
      await actions.session.logout();
      window.location.href = `${document.baseURI}admin/login`;
    });
  });
</script>