<script lang="ts">
  import InputText from '../TextInput.svelte'

  export let text: string;
  export let onInput: () => void;
  export let onBlur: () => void = () => {};

  let doEdit: boolean = false;
  
  function onClick() {
    doEdit = !doEdit;
  }
  
  function handleBlur() {
    doEdit = !doEdit;
    onBlur();
  }
</script>

{#if doEdit}
  <InputText bind:val={text} onInput={onInput} onBlur={handleBlur} doAutofocus={true}/> 
{:else}
  <div class="w-full" on:click={onClick}>
    <b>{text}</b>
  </div>
{/if}