<script lang="ts">
  import CrudPopup from '@components/admin/popup/CrudPopup.svelte';
  import { fetchBlockedUsers, addBlockedUser } from '@app/admin/blockedUsers/blockedUsers.ts';

  // states
  let createPopupOpen = $state(false);

  // lifecycle
  $effect(() => {
    fetchBlockedUsers();
  });
</script>

<div>
  <button class="btn btn-soft w-full" onclick={() => (createPopupOpen = true)}>
    <span class="iconify iconify-[heroicons--plus-16-solid]"></span>
    <span>Neuer blockierter Nutzer</span>
  </button>
</div>

<CrudPopup
  texts={{
    title: 'Blockierten Nutzer erstellen',
    submitButtonTitle: 'Erstellen',
    confirmPopupTitle: 'Nutzer blockieren',
    confirmPopupMessage:
      'Bist du sicher, dass der Nutzer blockiert werden soll?\nEin blockierter Nutzer kann dem Server nicht mehr beitreten.'
  }}
  target={null}
  keys={[
    [{ key: 'uuid', type: 'text', label: 'UUID', options: { required: true, dynamicWidth: true } }],
    [{ key: 'comment', type: 'textarea', label: 'Kommentar', default: null, options: { dynamicWidth: true } }]
  ]}
  onSubmit={addBlockedUser}
  bind:open={createPopupOpen}
/>
