<script lang="ts">
    import { onMount } from 'svelte';
    import Text from './TextInput.svelte';
    import * as TxtArr from '../modules/arrayHelpers';

    export let textArray : Array<string> = [];
    export let onInput : () => void;
    export let onBlur : () => void = () => {};
    

    function update() {
        textArray = TxtArr.extendTextArrayWithEmptyString(
            TxtArr.cleanTextArrayFromEmptyString(textArray));
    }

    function updateInput() {
        textArray = TxtArr.cleanTextArrayFromEmptyString(textArray);
        onInput();
        textArray = TxtArr.extendTextArrayWithEmptyString(textArray);
    }
    
    onMount(() => {
        update();
    });
</script>

<div class="space-y-1">
    {#each textArray as inTxt}
        <Text bind:val={inTxt} onInput={updateInput} onBlur={onBlur} placeholder={"New Item"}/>
    {/each}
</div>