<script lang="ts">
  import { Store, UIEventSource } from "../../Logic/UIEventSource.js"
  import type { ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
  import DeletableImage from "./DeletableImage.svelte"
  import LoadingPlaceholder from "../Base/LoadingPlaceholder.svelte"
  import type { Feature, Point } from "geojson"
  import ThemeViewState from "../../Models/ThemeViewState"
  import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
  import { GeoOperations } from "../../Logic/GeoOperations"

  export let images: Store<ProvidedImage[]>
  export let state: ThemeViewState
  export let tags: UIEventSource<Record<string, string>>
  export let feature: Feature
  export let estimated: Store<number>
  export let layer: LayerConfig
  let zoomToFeature: Feature<Point> = {
    type: "Feature",
    geometry: {
      type: "Point",
      coordinates: GeoOperations.centerpointCoordinates(feature)
    },
    properties: {
      name: layer?.title?.GetRenderValue(feature.properties)?.Subs(feature.properties)?.txt ?? feature?.properties?.name,
      focus: true
    }
  }
</script>

{#if $estimated > 0 && $images.length < 1}
  <LoadingPlaceholder />
{:else}
  <div class="w-full overflow-x-auto" style="scroll-snap-type: x proximity">
    <div class="flex space-x-2">
      {#each $images as image (image.url)}
        <DeletableImage {image} {state} {tags} nearbyFeatures={[zoomToFeature]} />
      {/each}
    </div>
  </div>
{/if}
