<script lang="ts">
  // DO NOT include `import { page } from '$app/stores'` here, because this can
  // lead to pages not being unmounted, which then causes weird page nesting
  // and routing issues.
  //
  // This is an issue in SvelteKit caused by using the page store in layouts and
  // using transitions on pages: https://github.com/sveltejs/kit/issues/7405

  import SideBarButton from '$lib/components/shared-components/side-bar/side-bar-button.svelte';
  import AccountMultipleOutline from 'svelte-material-icons/AccountMultipleOutline.svelte';
  import Sync from 'svelte-material-icons/Sync.svelte';
  import Cog from 'svelte-material-icons/Cog.svelte';
  import Server from 'svelte-material-icons/Server.svelte';
  import StatusBox from '$lib/components/shared-components/status-box.svelte';
  import { goto } from '$app/navigation';
  import { AppRoute } from '../../lib/constants';
  import type { LayoutData } from './$types';
  import SideBarSection from '$lib/components/shared-components/side-bar/side-bar-section.svelte';
  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';

  export let data: LayoutData;

  // Circumvents the need to import the page store. Should be replaced by
  // `$page.data.meta.title` once issue #7405 of SvelteKit is resolved.
  const getPageTitle = (routeId: string | null) => {
    switch (routeId) {
      case AppRoute.ADMIN_USER_MANAGEMENT:
        return 'User Management';
      case AppRoute.ADMIN_SETTINGS:
        return 'System Settings';
      case AppRoute.ADMIN_JOBS:
        return 'Jobs';
      case AppRoute.ADMIN_STATS:
        return 'Server Stats';
      default:
        return '';
    }
  };
</script>

<UserPageLayout user={data.user} showUploadButton={false} title={getPageTitle(data.routeId)}>
  <SideBarSection slot="sidebar">
    <SideBarButton
      title="Users"
      logo={AccountMultipleOutline}
      isSelected={data.routeId === AppRoute.ADMIN_USER_MANAGEMENT}
      on:selected={() => goto(AppRoute.ADMIN_USER_MANAGEMENT)}
    />
    <SideBarButton
      title="Jobs"
      logo={Sync}
      isSelected={data.routeId === AppRoute.ADMIN_JOBS}
      on:selected={() => goto(AppRoute.ADMIN_JOBS)}
    />
    <SideBarButton
      title="Settings"
      logo={Cog}
      isSelected={data.routeId === AppRoute.ADMIN_SETTINGS}
      on:selected={() => goto(AppRoute.ADMIN_SETTINGS)}
    />
    <SideBarButton
      title="Server Stats"
      logo={Server}
      isSelected={data.routeId === AppRoute.ADMIN_STATS}
      on:selected={() => goto(AppRoute.ADMIN_STATS)}
    />
    <div class="mb-6 mt-auto">
      <StatusBox />
    </div>
  </SideBarSection>

  <section id="setting-content" class="flex place-content-center mx-4">
    <section class="w-full sm:w-5/6 md:w-[800px] pt-5 pb-28">
      <slot />
    </section>
  </section>
</UserPageLayout>
