<script lang="ts">
import { onMount } from "svelte";
import Spacer from "$lib/Layout/Spacer.svelte";
import SettingHint from "$lib/Settings/SettingHint.svelte";
import { clearAllParameters } from "$lib/Utility/parameters";
import locale from "$stores/locale";

export let field: string;
export let submission: string;
export let event: string | undefined = undefined;
export let submitText: string;
export let saveParameters: string[] = [];
export let onSubmit = () => {
	return;
};
export let preserveCase = false;
export let prompt = `Enter a ${
	preserveCase ? field : field.toLowerCase()
} to search for to continue.`;
export let hint: string | undefined = undefined;

let input = "";

onMount(() => clearAllParameters(saveParameters));
</script>

<div class="card">
  <div>
    <input
      type="text"
      placeholder={field}
      bind:value={input}
      onkeypress={(e) => {
        if (e.key === 'Enter') {
          submission = input;

          onSubmit();

          if (event) umami.track(event);
        }
      }}
    />
    <button
      class="button-lined"
      onclick={() => {
        submission = input;

        onSubmit();
      }}
      title={$locale().tools.input?.pressEnter}
      data-umami-event={event}
    >
      {submitText}
    </button>

    {#if hint !== undefined}
      <br />
      <div style="margin-top: .25rem;">
        <SettingHint>{hint}</SettingHint>
      </div>
    {/if}
  </div>

  {#if submission !== ''}
    <slot />
  {:else}
    <Spacer />

    {prompt}
  {/if}
</div>
