---
import '@assets/admin_layout.css';
import BaseLayout from '../BaseLayout.astro';
import { ClientRouter } from 'astro:transitions';
import { Icon } from 'astro-icon/components';
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: 'Varo Startseite',
    icon: 'heroicons:computer-desktop-20-solid'
  }
];
const adminTabs = [
  {
    href: 'admin/users',
    name: 'Registrierte Nutzer',
    icon: 'heroicons:user',
    subTabs: [
      {
        href: 'admin/users/blocked',
        name: 'Blockierte Nutzer',
        icon: 'heroicons:user-minus'
      }
    ],
    enabled: session?.permissions.users
  },
  {
    href: 'admin/teams',
    name: 'Teams',
    icon: 'heroicons:users',
    enabled: session?.permissions.users
  },
  {
    href: 'admin/reports',
    name: 'Reports',
    icon: 'heroicons:flag',
    enabled: session?.permissions.reports
  },
  {
    href: 'admin/feedback',
    name: 'Feedback',
    icon: 'heroicons:book-open',
    enabled: session?.permissions.feedback
  },
  {
    href: 'admin/admins',
    name: 'Website Admins',
    icon: 'heroicons:code-bracket-16-solid',
    subTabs: [
      {
        href: 'admin/admins/strike_reasons',
        name: 'Strikegründe',
        icon: 'heroicons:shield-exclamation'
      }
    ],
    enabled: session?.permissions.admin
  },
  {
    href: 'admin/settings',
    name: 'Einstellungen',
    icon: 'heroicons:adjustments-horizontal',
    enabled: session?.permissions.settings
  }
];
---

<BaseLayout title={title}>
  <ClientRouter />
  <div class="flex flex-row max-h-[100vh]">
    <ul class="menu bg-base-200 w-68 h-[100vh] flex">
      {
        preTabs.map((tab) => (
          <li>
            <a href={tab.href}>
              <Icon name={tab.icon} />
              <span>{tab.name}</span>
            </a>
          </li>
        ))
      }
      <div class="divider mx-1 my-1"></div>
      {
        adminTabs.map((tab) => (
          <li>
            <a href={tab.href}>
              <Icon name={tab.icon} />
              <span>{tab.name}</span>
            </a>
            {tab.subTabs && (
              <ul>
                {tab.subTabs.map((subTab) => (
                  <li>
                    <a href={subTab.href}>
                      <Icon name={subTab.icon} />
                      <span>{subTab.name}</span>
                    </a>
                  </li>
                ))}
              </ul>
            )}
          </li>
        ))
      }
      {
        Astro.slots.has('actions') && (
          <fieldset class="fieldset bg-base-300 border-base-100 rounded-box border p-2 -ml-1.5 -mr-1.5 mt-auto">
            <slot name="actions" />
          </fieldset>
        )
      }
      <li class:list={[Astro.slots.has('actions') ? null : 'mt-auto']}>
        <button id="logout">
          <Icon name="heroicons:arrow-left-end-on-rectangle" />
          <span>Ausloggen</span>
        </button>
      </li>
    </ul>
    <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>