<script lang="ts">
  import {parseJson} from "@welshman/lib"
  import {displayFeeds} from "@welshman/feeds"
  import {getAddress, getTagValue, getTagValues} from "@welshman/util"
  import TrashBin2 from "@assets/icons/trash-bin-2.svg?dataurl"
  import Icon from "@lib/components/Icon.svelte"
  import Button from "@lib/components/Button.svelte"
  import AlertDelete from "@app/components/AlertDelete.svelte"
  import type {Alert} from "@app/core/state"
  import {deriveAlertStatus} from "@app/core/state"
  import {pushModal} from "@app/util/modal"

  type Props = {
    alert: Alert
  }

  const {alert}: Props = $props()

  const status = deriveAlertStatus(getAddress(alert.event))
  const cron = $derived(getTagValue("cron", alert.tags))
  const channel = $derived(getTagValue("channel", alert.tags))
  const feeds = $derived(getTagValues("feed", alert.tags))
  const description = $derived(
    getTagValue("description", alert.tags) ||
      [
        `${cron?.endsWith("1") ? "Weekly" : "Daily"} alert for events`,
        displayFeeds(feeds.map(parseJson)),
        `sent via ${channel}.`,
      ].join(" "),
  )

  const startDelete = () => pushModal(AlertDelete, {alert})
</script>

<div class="flex items-start justify-between gap-4">
  <div class="flex items-start gap-4">
    <Button class="py-1" onclick={startDelete}>
      <Icon icon={TrashBin2} />
    </Button>
    <div class="flex-inline gap-1">{description}</div>
  </div>
  {#if $status}
    {@const statusText = getTagValue("status", $status.tags) || "error"}
    {#if statusText === "ok"}
      <span
        class="tooltip tooltip-left cursor-pointer rounded-full border border-solid border-base-content px-3 py-1 text-sm"
        data-tip={getTagValue("message", $status.tags)}>
        Active
      </span>
    {:else if statusText === "pending"}
      <span
        class="tooltip tooltip-left cursor-pointer rounded-full border border-solid border-base-content border-yellow-500 px-3 py-1 text-sm text-yellow-500"
        data-tip={getTagValue("message", $status.tags)}>
        Pending
      </span>
    {:else}
      <span
        class="tooltip tooltip-left cursor-pointer rounded-full border border-solid border-error px-3 py-1 text-sm text-error"
        data-tip={getTagValue("message", $status.tags)}>
        {statusText.replace("-", " ").replace(/^(.)/, x => x.toUpperCase())}
      </span>
    {/if}
  {:else}
    <span
      class="tooltip tooltip-left cursor-pointer rounded-full border border-solid border-error px-3 py-1 text-sm text-error"
      data-tip="The notification server did not respond to your request.">
      Inactive
    </span>
  {/if}
</div>
