<script lang="ts">
  /**
   * Shows an 'upload'-button which will start the upload for this feature
   */

  import type { SpecialVisualizationState } from "../SpecialVisualization"
  import { UIEventSource } from "../../Logic/UIEventSource"
  import type { OsmTags } from "../../Models/OsmFeature"
  import LoginToggle from "../Base/LoginToggle.svelte"
  import Translations from "../i18n/Translations"
  import Tr from "../Base/Tr.svelte"
  import UploadingImageCounter from "./UploadingImageCounter.svelte"
  import FileSelector from "../Base/FileSelector.svelte"
  import LoginButton from "../Base/LoginButton.svelte"
  import { Translation } from "../i18n/Translation"
  import type { Feature } from "geojson"
  import Camera from "@babeard/svelte-heroicons/mini/Camera"
  import ArrowUpTray from "@babeard/svelte-heroicons/solid/ArrowUpTray"

  export let state: SpecialVisualizationState

  export let tags: UIEventSource<OsmTags>
  export let targetKey: string = undefined
  export let noBlur: boolean = false
  export let feature: Feature
  /**
   * Image to show in the button
   * NOT the image to upload!
   */
  export let image: string = undefined
  if (image === "") {
    image = undefined
  }
  export let labelText: string = undefined
  const t = Translations.t.image

  let errors = new UIEventSource<Translation[]>([])

  async function handleFiles(files: FileList, ignoreGPS: boolean = false) {
    const errs = []
    for (let i = 0; i < files.length; i++) {
      const file = files.item(i)
      console.log("Got file", file.name)
      try {
        const canBeUploaded = await state?.imageUploadManager?.canBeUploaded(file)
        if (canBeUploaded !== true) {
          errs.push(canBeUploaded.error)
          continue
        }
        await state?.imageUploadManager?.uploadImageAndApply(
          file,
          tags,
          targetKey,
          noBlur,
          feature,
          { ignoreGPS }
        )
      } catch (e) {
        console.error(e)
        state.reportError(e, "Could not upload image")
      }
    }
    errors.setData(errs)
  }

  let maintenanceBusy = false
</script>

<LoginToggle {state}>
  <LoginButton clss="small w-full" osmConnection={state.osmConnection} slot="not-logged-in">
    <Tr t={Translations.t.image.pleaseLogin} />
  </LoginButton>
  {#if maintenanceBusy}
    <div class="alert">
      Due to maintenance, uploading images is currently not possible. Sorry about this!
    </div>
  {:else}
    <div class="my-4 flex flex-col">
      <UploadingImageCounter {state} {tags} />
      {#each $errors as error}
        <Tr t={error} cls="alert" />
      {/each}
      <!-- Take picture selector.  Must have image/*, capture=environment to work on DDG-browser/chromium based browsers -->
      <FileSelector
        accept="image/*"
        capture="environment"
        cls="button border-2 flex flex-col md:hidden"
        multiple={true}
        on:submit={(e) => {
          handleFiles(e.detail)
          e.preventDefault()
          e.stopPropagation()
        }}
      >
        <div class="flex w-full items-center justify-center text-2xl">
          {#if image !== undefined}
            <img src={image} alt="" aria-hidden="true" />
          {:else}
            <Camera class="h-12 w-12 p-1" aria-hidden="true" />
          {/if}
          <div class="flex flex-col">
            {#if labelText}
              {labelText}
            {:else}
              <Tr t={t.addPicture} />
            {/if}
            {#if noBlur}
              <span class="subtle text-sm">
                <Tr t={t.upload.noBlur} />
              </span>
            {/if}
          </div>
        </div>
      </FileSelector>
      <!-- "Select images from device" - shown on desktop -->
      <FileSelector
        accept=".jpg, .jpeg, image/jpeg"
        cls="flex justify-center button"
        multiple={true}
        on:submit={(e) => {
          e.preventDefault()
          e.stopPropagation()
          return handleFiles(e.detail, true)
        }}
      >
        <div class="hidden md:block">
          <div class="flex w-full">
            {#if image !== undefined}
              <img alt="" src={image} aria-hidden="true" />
            {:else}
              <Camera class="h-12 w-12 p-1" aria-hidden="true" />
            {/if}
            <ArrowUpTray
              class="h-6 w-6  self-end rounded-full bg-white p-0.5"
              style="margin-left: -1rem"
            />
          </div>
        </div>
        <div class="flex flex-col">
          {#if labelText}
            <div class="text-center md:text-2xl">
              {labelText}
            </div>
            <Tr t={t.selectFile} />
          {:else}
            <Tr cls="md:text-2xl text-center" t={t.selectFile} />
          {/if}
          {#if noBlur}
            <span class="subtle text-sm">
              <Tr t={t.upload.noBlur} />
            </span>
          {/if}
        </div>
      </FileSelector>

      <div class="subtle text-xs italic">
        <Tr t={Translations.t.general.attribution.panoramaxLicenseCCBYSA} />
        <span class="mx-1">—</span>
        <Tr t={t.respectPrivacy} />
      </div>
    </div>
  {/if}
</LoginToggle>
