<script lang="ts">
  import Input from '@components/input/Input.svelte';
  import TeamSearch from '@components/admin/search/TeamSearch.svelte';
  import Textarea from '@components/input/Textarea.svelte';
  import Checkbox from '@components/input/Checkbox.svelte';
  import type { Report } from './types.ts';
  import { confirmPopupState } from '@components/popup/ConfirmPopup.ts';

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

  // types
  interface Props {
    open: boolean;

    onSubmit: (report: Report) => void;
    onClose?: () => void;
  }

  // input
  let { open, onSubmit, onClose }: Props = $props();

  // form
  let reason = $state<string | null>(null);
  let body = $state<string | null>(null);
  let editable = $state<boolean>(true);
  let reporter = $state<Report['reporter'] | null>(null);
  let reported = $state<Report['reported'] | null>(null);

  let submitEnabled = $derived(!!(reason && reporter));

  // lifecycle
  $effect(() => {
    if (open) modal.show();
  });

  // callbacks
  async function onSaveButtonClick(e: Event) {
    e.preventDefault();
    $confirmPopupState = {
      title: 'Report erstellen',
      message: 'Bist du sicher, dass du den Report erstellen möchtest?',
      onConfirm: () => {
        modalForm.submit();
        onSubmit({
          id: -1,
          reason: reason!,
          body: body!,
          reporter: reporter!,
          reported: reported!,
          createdAt: editable ? null : new Date().toISOString(),
          status: null
        });
      }
    };
  }

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

<dialog class="modal" bind:this={modal} onclose={() => setTimeout(() => onClose?.(), 300)}>
  <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">Neuer Report</h3>
      <div>
        <div class="grid grid-cols-2 gap-4">
          <TeamSearch label="Report Team" required mustMatch onSubmit={(team) => (reporter = team)} />
          <TeamSearch label="Reportetes Team" mustMatch onSubmit={(team) => (reported = team)} />
        </div>
        <div class="grid grid-cols-1">
          <Input label="Grund" bind:value={reason} required dynamicWidth />
          <Textarea label="Inhalt" bind:value={body} rows={5} dynamicWidth />
        </div>
        <div class="grid grid-cols-1 mt-2">
          <Checkbox label="Report kann bearbeitet werden" bind:checked={editable} />
        </div>
      </div>
      <div>
        <button
          class="btn btn-success"
          class:disabled={!submitEnabled}
          disabled={!submitEnabled}
          onclick={onSaveButtonClick}>Erstellen</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>
