<script lang="ts">
  import { UIEventSource } from "../../../Logic/UIEventSource"
  import LanguageQuestion from "./LanguageQuestion.svelte"
  import LanguageAnswer from "./LanguageAnswer.svelte"
  import Tr from "../../Base/Tr.svelte"
  import Translations from "../../i18n/Translations"
  import type { SpecialVisualizationState } from "../../SpecialVisualization"
  import type { Feature } from "geojson"
  import LayerConfig from "../../../Models/ThemeConfig/LayerConfig"
  import EditButton from "../TagRendering/EditButton.svelte"

  export let key: string
  export let tags: UIEventSource<Record<string, string>>

  export let state: SpecialVisualizationState
  export let feature: Feature
  export let layer: LayerConfig | undefined

  export let question: string
  export let on_no_known_languages: string = undefined
  export let single_render: string
  export let item_render: string
  export let render_all: string // Should contain one `{list()}`
  let prefix = key + ":"
  let foundLanguages = tags.map((tags) => {
    const foundLanguages: string[] = []
    for (const k in tags) {
      const v = tags[k]
      if (v !== "yes") {
        continue
      }
      if (k.startsWith(prefix)) {
        foundLanguages.push(k.substring(prefix.length))
      }
    }
    return foundLanguages
  })

  const forceInputMode = new UIEventSource(false)

</script>

{#if $foundLanguages.length === 0 && on_no_known_languages && !$forceInputMode}
  <div class="p-1 flex items-center justify-between low-interaction rounded">
    <div>
      {on_no_known_languages}
    </div>
    <EditButton on:click={_ => forceInputMode.setData(true)} />
  </div>
{:else if $forceInputMode || $foundLanguages.length === 0}
  <LanguageQuestion {question} {foundLanguages} {prefix} {state} {tags} {feature} {layer}
                    on:save={_ => forceInputMode.setData(false)}>
    <span slot="cancel-button">
    {#if $forceInputMode}
      <button on:click={_ => forceInputMode.setData(false)}>
        <Tr t={Translations.t.general.cancel} />
      </button>
      {/if}
    </span>
  </LanguageQuestion>
{:else}
  <div class="p-2 flex items-center justify-between low-interaction rounded">
    <div>
      <LanguageAnswer {single_render} {item_render} {render_all} languages={foundLanguages} {state} {tags} { feature}
                      {layer} />
    </div>
    <EditButton on:click={_ => forceInputMode.setData(true)} />
  </div>
{/if}
