<script lang="ts">
  import DataTable from '@components/admin/table/DataTable.svelte';
  import {
    deleteStrikeReason,
    editStrikeReason,
    type StrikeReason,
    strikeReasons
  } from '@app/admin/strikeReasons/strikeReasons.ts';
  import { confirmPopupState } from '@components/popup/ConfirmPopup.ts';
  import CrudPopup from '@components/admin/popup/CrudPopup.svelte';

  // state
  let editPopupStrikeReason = $state(null);
  let editPopupOpen = $derived(!!editPopupStrikeReason);

  // lifecycle
  $effect(() => {
    if (!editPopupOpen) editPopupStrikeReason = null;
  });

  // callback
  function onBlockedUserDelete(strikeReason: StrikeReason) {
    $confirmPopupState = {
      title: 'Nutzer entblockieren?',
      message: 'Soll der Nutzer wirklich entblockiert werden?\nDieser kann sich danach wieder registrieren.',
      onConfirm: () => deleteStrikeReason(strikeReason)
    };
  }
</script>

<DataTable
  data={strikeReasons}
  count={true}
  keys={[
    { key: 'name', label: 'Name', width: 20 },
    { key: 'weight', label: 'Gewichtung', width: 50, sortable: true },
    { key: 'id', label: 'Id', width: 20 }
  ]}
  onDelete={onBlockedUserDelete}
  onEdit={(strikeReason) => (editPopupStrikeReason = strikeReason)}
/>

<CrudPopup
  texts={{
    title: 'Strikegrund bearbeiten',
    submitButtonTitle: 'Speichern',
    confirmPopupTitle: 'Änderungen speichern',
    confirmPopupMessage: 'Sollen die Änderungen gespeichert werden?'
  }}
  target={editPopupStrikeReason}
  keys={[
    [{ key: 'name', type: 'text', label: 'Name', options: { required: true, dynamicWidth: true } }],
    [{ key: 'weight', type: 'number', label: 'Gewichtung', options: { required: true, dynamicWidth: true } }]
  ]}
  onSubmit={editStrikeReason}
  bind:open={editPopupOpen}
/>
