<script>
    import { onMount } from "svelte";
    import { getErrorMessage } from "./errorMessage";
    export let field;
    export let value;
    export let isCreateMode;
    export let validationErrors;
    let thisEl;
    $: errorMessage = getErrorMessage(validationErrors, field.name);
    export let id;

    function resize(e) {
        let el;
        if (e.target) {
            el = e.target;
        } else {
            el = e;
        }
        el.style.overflow = "hidden";
        el.style.height = "1px";
        el.style.height = +el.scrollHeight + "px";
    }

    onMount(() => {
        resize(thisEl);
    });
</script>

<div class="mb-0">
    <textarea
        bind:value
        bind:this={thisEl}
        {id}
        class="form-control"
        on:input={resize}
        on:focus={resize}
        rows="2"
        class:is-invalid={errorMessage}
        readonly={field.readonly && !isCreateMode}
    />

    {#if errorMessage}
        <div class="invalid-feedback d-block">
            {errorMessage}
        </div>
    {/if}
</div>

<style>
    textarea {
        resize: none;
    }
</style>
