<script>
    import { onMount } from "svelte";
    import { Label, FormText, Icon, Styles } from "sveltestrap";

    import helpers from "@/libs/helpers";

    export let hidden = false;
    export let label = "";
    export let help = "";
    export let field = "field";
    export let strong = false;
    export let small = false;
    export let error = {
        validation: "required",
        text: "Ce champ est obligatoire. Merci de saisir une information pour vos données.",
    };
    export let id = 0;

    let displayHelp = false;

    onMount(() => {});

    $: isReady = true;
</script>

{#if isReady && !hidden}
    <!-- If label -->
    {#if label}
        <Label for={field + "-" + id} title={help}>
            {#if small}
                <small>
                    {label}
                    {#if error.required}
                        <span class="text-danger"> * </span>
                    {/if}
                </small>
            {:else if strong}
                <strong>
                    {label}
                    {#if error.required}
                        <span class="text-danger"> * </span>
                    {/if}
                </strong>
            {:else}
                {label}
                {#if error.required}
                    <span class="text-danger"> * </span>
                {/if}
            {/if}
            <!-- If help -->
            {#if help}
                <span
                    class="link"
                    on:click={() => {
                        displayHelp = !displayHelp;
                    }}
                >
                    <Icon name="info-circle-fill" class="ms-1 mb-1" />
                </span>
            {/if}
        </Label>
        <!-- If display help -->
        {#if displayHelp}
            <FormText color="muted mt-n1 mb-2" class="d-block">
                {@html helpers.nl2br(help)}
            </FormText>
        {/if}
    {/if}
    <!-- If error -->
    {#if error.required}
        <div class="invalid-feedback">{error.message}</div>
    {/if}
{/if}

<style>
</style>
