<script lang="ts">
  import BottomBar from '@app/admin/reports/BottomBar.svelte';
  import { onMount } from 'svelte';
  import DataTable from '@components/admin/table/DataTable.svelte';
  import { type StrikeReasons, getStrikeReasons, reports } from '@app/admin/reports/reports.ts';

  // consts
  const dateFormat = new Intl.DateTimeFormat('de-DE', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  });

  // states
  let strikeReasons = $state<StrikeReasons>([]);
  let activeReport = $state<Report | null>(null);

  // lifecycle
  onMount(() => {
    getStrikeReasons().then((data) => (strikeReasons = data ?? []));
  });
</script>

{#snippet date(value: string)}
  {value ? dateFormat.format(new Date(value)) : ''}
{/snippet}

{#snippet status(value: null | 'open' | 'closed')}
  {#if value === 'open'}
    <p>In Bearbeitung</p>
  {:else if value === 'closed'}
    <p>Bearbeitet</p>
  {:else if value === null}
    <p>Unbearbeitet</p>
  {/if}
{/snippet}

<DataTable
  data={reports}
  count={true}
  keys={[
    { key: 'reason', label: 'Grund' },
    { key: 'reporter.username', label: 'Report Ersteller' },
    { key: 'reported.username', label: 'Reporteter Spieler' },
    { key: 'createdAt', label: 'Datum', transform: date },
    { key: 'status.status', label: 'Bearbeitungsstatus', transform: status }
  ]}
  onClick={(report) => (activeReport = report)}
/>

{#key activeReport}
  <BottomBar {strikeReasons} report={activeReport} />
{/key}
