<script lang="ts">
  import type { Report, ReportStatus, StrikeReasons } from './types.ts';
  import Input from '@components/input/Input.svelte';
  import Textarea from '@components/input/Textarea.svelte';
  import Select from '@components/input/Select.svelte';
  import TeamSearch from '@components/admin/search/TeamSearch.svelte';
  import { editReportStatus, getReportStatus } from '@app/admin/reports/actions.ts';
  import { confirmPopupState } from '@components/popup/ConfirmPopup.ts';

  // types
  interface Props {
    strikeReasons: StrikeReasons;
    report: Report | null;
  }

  // inputs
  let { strikeReasons, report }: Props = $props();

  // states
  let status = $state<'open' | 'closed' | null>(null);
  let notice = $state<string | null>(null);
  let statement = $state<string | null>(null);

  // consts
  const strikeReasonValues = strikeReasons.reduce(
    (prev, curr) => Object.assign(prev, { [curr.id]: `${curr.name} (${curr.weight})` }),
    {}
  );

  // lifetime
  $effect(() => {
    if (!report) return;

    getReportStatus(report).then((reportStatus) => {
      if (!reportStatus) return;

      status = reportStatus.status;
      notice = reportStatus.notice;
      statement = reportStatus.statement;
    });
  });

  // callbacks
  async function onSaveButtonClick() {
    $confirmPopupState = {
      title: 'Änderungen speichern?',
      message: 'Sollen die Änderungen am Report gespeichert werden?',
      onConfirm: async () =>
        editReportStatus(report!, {
          status: status,
          notice: notice,
          statement: statement,
          strikeId: null
        } as ReportStatus)
    };
  }
</script>

<div
  class="absolute bottom-2 bg-base-200 rounded-lg w-[calc(100%-1rem)] mx-2 flex px-6 py-4 gap-2"
  hidden={report === null}
>
  <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" onclick={() => (report = null)}>✕</button>
  <div class="w-[34rem]">
    <TeamSearch value={report?.reporter.name} label="Report Team" readonly mustMatch />
    <TeamSearch value={report?.reported?.name} label="Reportetes Team" />
    <Textarea bind:value={notice} label="Interne Notizen" rows={8} />
  </div>
  <div class="divider divider-horizontal"></div>
  <div class="w-full">
    <Input value={report?.reason} label="Grund" readonly dynamicWidth />
    <Textarea value={report?.body} label="Inhalt" readonly dynamicWidth rows={12} />
  </div>
  <div class="divider divider-horizontal"></div>
  <div class="flex flex-col w-[42rem]">
    <Textarea bind:value={statement} label="Öffentliche Report Antwort" dynamicWidth rows={5} />
    <Select
      values={{ open: 'In Bearbeitung', closed: 'Bearbeitet' }}
      defaultValue="Unbearbeitet"
      label="Bearbeitungsstatus"
      dynamicWidth
    />
    <Select bind:value={status} values={strikeReasonValues} defaultValue="" label="Vergehen" dynamicWidth></Select>
    <div class="divider mt-0 mb-2"></div>
    <button class="btn mt-auto" onclick={onSaveButtonClick}>Speichern</button>
  </div>
</div>
