<script lang="ts">
  import BottomBar from './BottomBar.svelte';
  import { feedbacks, type Feedback } from '@app/admin/feedback/feedback.ts';
  import DataTable from '@components/admin/table/DataTable.svelte';

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

  // states
  let activeFeedback = $state<Feedback | null>(null);
</script>

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

<div class="h-screen flex flex-col justify-between">
  <DataTable
    data={feedbacks}
    count={true}
    keys={[
      { key: 'event', label: 'Event', width: 10, sortable: true },
      { key: 'username', label: 'Nutzer', width: 10, sortable: true },
      { key: 'lastChanged', label: 'Datum', width: 10, sortable: true, transform: date },
      { key: 'content', label: 'Inhalt', width: 10 }
    ]}
    onClick={(feedback) => (activeFeedback = feedback)}
  />

  {#key activeFeedback}
    <BottomBar feedback={activeFeedback} />
  {/key}
</div>
