<script>
    import { v4 as uuidv4 } from "uuid";
    import { getContext } from "svelte";
    import Icon from "../../common/Icon.svelte";
    import { getErrorMessage } from "./errorMessage";
    const channelurl = getContext("channelurl");
    export let validationErrors;
    $: errorMessage = getErrorMessage(validationErrors, field.name);
    export let field;
    export let value;
    export let id;
    export let isCreateMode;
    let readonly = field.readonly && !isCreateMode;

    function generateId(e) {
        e.preventDefault();
        value = uuidv4();
    }
</script>

<div class="mb-0">

    <div class="d-flex justify-content-between">
        <input
            type="text"
            {id}
            class="form-control"
            class:is-invalid={errorMessage}
            bind:value
            autocomplete="off"
            {readonly}
        />
        {#if !readonly}
        <button
            class="btn btn-primary ms-2"
            title="Generate a new UUIDv4"
            on:click={generateId}
        >
            <Icon icon="dice" />
        </button>
        {/if}
    </div>

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