<script lang="ts">
  import Icon from '@iconify/svelte';
  import Input from '@components/input/Input.svelte';
  import { addReport, fetchReports } from '@app/admin/reports/actions.ts';
  import CreatePopup from '@app/admin/reports/CreatePopup.svelte';

  // states
  let reporterUsernameFilter = $state<string | null>(null);
  let reportedUsernameFilter = $state<string | null>(null);

  let newReportPopupOpen = $state(false);

  // lifecycle
  $effect(() => {
    fetchReports(reporterUsernameFilter, reportedUsernameFilter);
  });
</script>

<div>
  <fieldset class="fieldset border border-base-content/50 rounded-box p-2">
    <legend class="fieldset-legend">Filter</legend>
    <Input bind:value={reporterUsernameFilter} label="Reporter Ersteller" />
    <Input bind:value={reportedUsernameFilter} label="Reporteter Spieler" />
  </fieldset>
  <div class="divider my-1"></div>
  <button class="btn btn-soft w-full" onclick={() => (newReportPopupOpen = true)}>
    <Icon icon="heroicons:plus-16-solid" />
    <span>Neuer Report</span>
  </button>
</div>

{#key newReportPopupOpen}
  <CreatePopup open={newReportPopupOpen} onSubmit={addReport} onClose={() => (newReportPopupOpen = false)} />
{/key}
