<script lang="ts">
  import type { ImageUploadArguments } from "../../Logic/ImageProviders/ImageUploadQueue"
  import ImageUploadQueue from "../../Logic/ImageProviders/ImageUploadQueue"
  import { TrashIcon } from "@babeard/svelte-heroicons/mini"
  import Popup from "../Base/Popup.svelte"
  import { UIEventSource } from "../../Logic/UIEventSource"
  import Page from "../Base/Page.svelte"
  import BackButton from "../Base/BackButton.svelte"
  import Tr from "../Base/Tr.svelte"
  import Translations from "../i18n/Translations"

  let queue = ImageUploadQueue.singleton
  export let imageArguments: ImageUploadArguments
  let confirmDelete = new UIEventSource(false)

  function del() {
    queue.delete(imageArguments)
  }

  const t = Translations.t
  let src = undefined
  try {
    src = URL.createObjectURL(imageArguments.blob)
  } catch (e) {
    console.error("Could not create an ObjectURL for blob", imageArguments.blob)
  }
</script>

<div class="low-interaction border-interactive m-1 flex w-fit flex-col rounded p-2">
  <img class="max-h-64 w-auto w-auto max-w-64" {src} />
  {imageArguments.featureId}
  {imageArguments.layoutId}
  <button
    class="as-link self-end"
    on:click={() => {
      confirmDelete.set(true)
    }}
  >
    <TrashIcon class="w-4" />
    <Tr t={t.imageQueue.delete} />
  </button>
  <Popup shown={confirmDelete} dismissable={true}>
    <Page shown={confirmDelete}>
      <svelte:fragment slot="header">
        <TrashIcon class="m-1 w-8" />
        <Tr t={t.imageQueue.confirmDeleteTitle} />
      </svelte:fragment>

      <div class="flex flex-col">
        <div class="flex justify-center">
          <img
            class="max-w-128 max-h-128 w-auto w-auto"
            src={URL.createObjectURL(imageArguments.blob)}
          />
        </div>

        <div class="flex w-full">
          <BackButton clss="w-full" on:click={() => confirmDelete.set(false)}>
            <Tr t={t.general.back} />
          </BackButton>
          <button on:click={() => del()} class="primary w-full">
            <TrashIcon class="m-1 w-8" />
            <Tr t={t.imageQueue.confirmDelete} />
          </button>
        </div>
      </div>
    </Page>
  </Popup>
</div>
