<script lang="ts">
  import Input from '@components/input/Input.svelte';
  import Textarea from '@components/input/Textarea.svelte';
  import { confirmPopupState } from '@components/popup/ConfirmPopup.ts';
  import type { BlockedUser } from '@app/admin/usersBlocked/types.ts';
  import { blockedUserCreateOrEditPopupState } from '@app/admin/usersBlocked/state.ts';
  import { onDestroy } from 'svelte';

  // html bindings
  let modal: HTMLDialogElement;
  let modalForm: HTMLFormElement;

  // states
  let action = $state<'create' | 'edit' | null>(null);
  let blockedUser = $state({} as BlockedUser);
  let onUpdate = $state((_: BlockedUser) => {});

  let submitEnabled = $derived(!!blockedUser.uuid);

  // lifecycle
  const cancel = blockedUserCreateOrEditPopupState.subscribe((value) => {
    if (value && 'create' in value) {
      action = 'create';
      blockedUser = {
        id: -1,
        uuid: '',
        comment: null
      };
      onUpdate = value?.create.onUpdate;
      modal.show();
    } else if (value && 'edit' in value) {
      action = 'edit';
      blockedUser = value.edit.blockedUser;
      onUpdate = value.edit.onUpdate;
      modal.show();
    }
  });

  onDestroy(cancel);

  // texts
  const texts = {
    create: {
      title: 'Blockierten Nutzer erstellen',
      buttonTitle: 'Erstellen',
      confirmPopupTitle: 'Nutzer blockieren?',
      confirmPopupMessage:
        'Bist du sicher, dass der Nutzer blockiert werden soll?\nEin blockierter Nutzer kann sich nicht mehr registrieren.'
    },
    edit: {
      title: 'Blockierten Nutzer bearbeiten',
      buttonTitle: 'Speichern',
      confirmPopupTitle: 'Änderungen speichern?',
      confirmPopupMessage: 'Sollen die Änderungen gespeichert werden?'
    },
    null: {}
  };

  // callbacks
  async function onSaveButtonClick(e: Event) {
    e.preventDefault();
    $confirmPopupState = {
      title: texts[action!].confirmPopupTitle,
      message: texts[action!].confirmPopupMessage,
      onConfirm: () => {
        modalForm.submit();
        onUpdate(blockedUser);
      }
    };
  }

  function onCancelButtonClick(e: Event) {
    e.preventDefault();
    modalForm.submit();
  }
</script>

<dialog class="modal" bind:this={modal}>
  <form method="dialog" class="modal-box" bind:this={modalForm}>
    <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" onclick={onCancelButtonClick}>✕</button>
    <div class="space-y-5">
      <h3 class="text-xt font-geist font-bold">{texts[action!].title}</h3>
      <div>
        <Input bind:value={blockedUser.uuid} label="UUID" required dynamicWidth />
        <Textarea label="Kommentar" bind:value={blockedUser.comment} rows={3} dynamicWidth />
      </div>
      <div>
        <button
          class="btn btn-success"
          class:disabled={!submitEnabled}
          disabled={!submitEnabled}
          onclick={onSaveButtonClick}>{texts[action!].buttonTitle}</button
        >
        <button class="btn btn-error" onclick={onCancelButtonClick}>Abbrechen</button>
      </div>
    </div>
  </form>
  <form method="dialog" class="modal-backdrop bg-[rgba(0,0,0,.3)]">
    <button class="!cursor-default">close</button>
  </form>
</dialog>
