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

  interface Props {
    field: string;
    submission: string;
    event?: string | undefined;
    submitText: string;
    saveParameters?: string[];
    onSubmit?: any;
    preserveCase?: boolean;
    prompt?: any;
    hint?: string | undefined;
    children?: import('svelte').Snippet;
  }

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

  let input = $state('');

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

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

          onSubmit();

          // eslint-disable-next-line no-undef
          if (event) umami.track(event);
        }
      }}
    />
    <button
      class="button-lined"
      onclick={() => {
        submission = input;

        onSubmit();
      }}
      title="Or click your Enter key"
      data-umami-event={event}
    >
      {submitText}
    </button>

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

  {#if submission !== ''}
    {@render children?.()}
  {:else}
    <p></p>

    {prompt}
  {/if}
</div>
