<svelte:options
  customElement={{
    props: {
      field_id: { attribute: "field-id" },
      languages: { type: "Array" },
      value: { type: "Object" },
    },
    shadow: "none",
    tag: "i18n-textarea",
  }}
/>

<!--
@component
A textbox allowing for input in multiple alternative languages, used in the
form editor. The `value` attribute is expected to be a JSON record mapping
language codes to their initial text contents. The `languages` attribute is
expected to be a JSON array containing objects with keys `"code"` and
`"locale_str"`.

Form values are exposed as textarea inputs named as:
`<FIELD_ID>.<LANGUAGE_CODE>`.
-->

<script lang="ts">
  const DEFAULT_LANGUAGE = "eng";

  type Props = {
    field_id: string;
    languages: {
      code: string;
      locale_str: string;
    }[];
    value: Record<string, string>;
  };

  let { field_id = "", languages = [], value = {} }: Props = $props();

  let visible_language = $state(DEFAULT_LANGUAGE);
</script>

<div class="i18n-textarea">
  <select bind:value={visible_language}>
    {#each languages as { code, locale_str }}
      <option value={code}>{locale_str}</option>
    {/each}
  </select>
  {#each languages as { code }}
    <textarea
      name={`${field_id}.${code}`}
      style:display={visible_language === code ? "block" : "none"}
      >{value[code]}</textarea
    >
  {/each}
</div>
